:root{ --primary-color: #002c9a; --primary-color-hover: #002788; --primary-light-color: #E8F0FF; --primary-light-color-hover: #97b1e1; --secondary-color: #eea301; --secondary-color-hover: #FFAE00; --secondary-light-color: #FBC72B; --secondary-light-color-hover: #F6BB08; --red-color: #E40000; --red-color-hover: #D70202; --red-light-color: #ffe5e5; --green-color: #19B32B; --green-color-hover: #0E9A1F; --gray-color: #6A6C72; --gray-color-hover: #56585e; --lightgray-color: #999999; --lightgray-color-hover: #a3a3a3; --gray-border: #D5D5D5; --darkgray-border: #B9B9B9; --primary-light-border: #B1C6EE; --lightgray-bg: #f2f3f4; } /* 폰트 */ .fwLg{font-weight: 300 !important} .fwRg{font-weight: 400 !important} .fwMd{font-weight: 500 !important} .fwBold{font-weight: 700 !important} .sub_font{font-family:'GmarketSansBold';} /* 버튼 */ .btn{border-radius: 5px;} .btn:hover{box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12);transition: all 0.3s ease;} .btn.xssmall{height: 28px;} .btn.ssmall{height: 30px;} .btn.small{height: 32px;} .btn.medium{height: 34px;} .btn.large{height: 36px;} .btn.xlarge{height: 38px;} .btn.fill.primary{background-color: var(--primary-color);color: #fff;} .btn.fill.primary:hover{background-color: var(--primary-color-hover);color: #fff;} .btn.fill.primary_light{background-color: var(--primary-light-color);border: 1px solid var(--primary-light-border);color:#222;} .btn.fill.primary_light:hover{background-color: var(--primary-light-color-hover);} .btn.fill.secondary{background-color: var(--secondary-color);color: #222;} .btn.fill.secondary:hover{background-color: var(--secondary-color-hover);color: #222;} .btn.fill.red{background-color: var(--red-color);color: #fff;} .btn.fill.red:hover{background-color: var(--red-color-hover);} .btn.fill.green{background-color: var(--green-color);color: #fff;} .btn.fill.green:hover{background-color: var(--green-color-hover);} .btn.line.primary{border: 1px solid var(--primary-color);color: var(--primary-color);} .btn.line.primary:hover{border: var(--primary-color-hover);color: var(--primary-color-hover);} .btn.line.secondary{border: 1px solid var(--secondary-color);color: #222;} .btn.line.secondary:hover{border: 1px solid var(--secondary-color-hover);} .btn.line.red{border: 1px solid var(--red-color);color: var(--red-color);} .btn.line.red:hover{border: var(--red-color-hover);color: var(--red-color-hover);} .btn.line.green{border: 1px solid var(--green-color);color: var(--green-color);} .btn.line.green:hover{background-color: var(--green-color-hover);} /* 버튼 및 인풋 타입 */ select {border: 1px solid #e5e5e5;vertical-align: middle;font-weight: 300;font-size: 16px;font-family: 'Noto Sans KR', sans-serif;} select.selType1 {height: 34px;padding:0 25px 0 10px;border: 1px solid #d5d5d5;border-radius: 3px;background-image: url(/publish/images/select_search2.png);background-repeat: no-repeat;background-position: right 5px top 50%;color: #777;} /* .area_tabs */ select.selType2 {height: 36px; align-self: center; width: 125px; color: #666; background-image: url(/publish/images/select_search.png); background-repeat: no-repeat; background-position: 92% center; padding-left: 12px; box-sizing: border-box; border-radius: 3px; border: 1px solid #ccc;margin-left: 2px; font-size: 16px;} .list_selType1:focus {outline: none;} select.list_selType1 {background-color: transparent; border: none; width: 100%; padding: 0 15px; background-image: url(/publish/images/mem/list_select.png);background-repeat: no-repeat;background-position: right 0 top 50%; font-size: 18px; color: #222; font-family: 'Noto Sans KR', sans-serif; cursor: pointer;} input {border: 0;vertical-align: middle;box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; } input:focus {outline: none;} input::placeholder {font-family: 'Noto Sans KR', sans-serif; font-weight: 300;color: #a6a6a6 !important;} input:-ms-input-placeholder {font-family: 'Noto Sans KR', sans-serif; font-weight: 300;color: #a6a6a6 !important;} input[type="text"] {padding: 0 10px; border-radius: 3px;font-size: 16px;} input[type="text"].readonly::placeholder {color: #222 !important;} input[type="text"].readonly:-ms-input-placeholder {color: #222 !important;} input[type="text"].inputLight::placeholder {color: #a6a6a6 !important;} input[type="text"].inputLight:-ms-input-placeholder {color: #a6a6a6 !important;} input[type="password"] {padding: 0 10px; border-radius: 3px;font-size: 16px;} input[type="password"].inputLight::placeholder {color: #a6a6a6 !important;} input[type="password"].inputLight:-ms-input-placeholder {color: #a6a6a6 !important;} input.input_text{border:1px solid #d5d5d5;} /* 비밀번호 css 변경 */ input[type="checkbox"] {width: 16px; height: 16px; border: 1px solid #d6d8da;} input[type="radio"] {margin-top: 2px; margin-right: 3px;} input[type="radio"]+label {margin-right: 18px;font-size:16px;vertical-align: middle;} input[type="radio"].radio_big {margin:0;width:16px;height:16px;} /* input[type="radio"]+label, input[type="checkbox"]+label {vertical-align: middle;} */ textarea {width: 100%;font-size: 16px;padding: 15px; box-sizing: border-box;color: #666;font-weight: 300;font-family: 'Noto Sans KR', sans-serif;} textarea::-webkit-scrollbar {width:7px;} textarea::-webkit-scrollbar-thumb {background: #c3c6c7; border-radius: 3px;} textarea::-webkit-scrollbar-thumb:active {background:#808080;} textarea::placeholder {font-family: 'Noto Sans KR', sans-serif; font-weight: 300;color: #a6a6a6 !important;} textarea:-ms-input-placeholder {font-family: 'Noto Sans KR', sans-serif; font-weight: 300;color: #a6a6a6 !important;} .sort_wrap {display:inline-block;} .sort_wrap button:nth-child(1) img {margin-left: 3px;} .sort_wrap button:nth-child(2) img {margin-left: -5px;} .sort_wrap button img {margin-bottom: 5px;} .sortBtn {background-image: url(/publish/images/sortUp.png);border: none;background-color: transparent;background-repeat: no-repeat;background-position: center center;height: 14px;cursor: pointer; margin: -3px 0 0 0;} .sortBtnDesc {background-image: url(/publish/images/sortDown.png);border: none;background-color: transparent;background-repeat: no-repeat;background-position: center center;height: 14px;cursor: pointer;margin: -2px 0 0 0;} .sortBtnAsc {background-image: url(/publish/images/sortUp.png);border: none;background-color: transparent;background-repeat: no-repeat;background-position: center center;height: 14px;cursor: pointer;} .numOfCase {position: absolute;right: 0;top: 57px;} .numOfCase p {display: inline-block;font-size: 13px;} .numOfCase p:first-child span {color: #e40000;font-weight: 500;} .numOfCase p:last-child span {color: var(--primary-color);font-weight: 500;} /* table */ .tType1 {width: 100%;text-align: left;table-layout: fixed;} .tType1 tbody tr {border-bottom: 1px solid #e5e5e5;} .tType1 tbody tr:first-child{border-top: 2px solid #000;} .tType1 tbody tr th {min-width: 75px; height: 55px; vertical-align: middle;font-size: 17px; text-align: left;} .tType1 tbody tr th .essential {display:inline-block;margin:4px 2px 0 0;vertical-align:top;color:#e40000;} .tType1 tbody tr th.vTop {vertical-align: top; padding-top: 20px; line-height: 1.2;} .tType1 tbody tr td {vertical-align: middle;font-weight: 300;line-height: 1.3; padding: 10px 0;} .tType1 tbody tr td p {line-height: 1.4;} .tType1 tbody tr td.send_cf {font-size: 18px;} .tType1 tbody tr td.putText {padding: 10px 0;} .tType1 tbody tr td.putText>div {display: flex; width: 100%;} .tType1 tbody tr td.putText>p:last-child {color: #555; font-size: 14px; padding-top: 10px;} .tType1 tbody tr td.putText .put_left {float: left;width: calc(100% - 26%); min-width: 420px; padding: 0 10px; border:1px solid #f2f2f2;box-sizing: border-box; border-radius: 5px; background-color: #f2f2f2; position: relative; /*max-height: 300px;*/} .tType1 tbody tr td.putText .put_left .text_length {position: relative;min-height: 28px;margin:0 0 15px;border-radius: 0 0 5px 5px;} .tType1 tbody tr td.putText .put_left .text_length>div:first-child {font-size: 15px; padding-left: 10px;} .tType1 tbody tr td.putText .put_left .text_length>div:last-child {position: absolute;bottom: 0;right: 10px;} .tType1 tbody tr td.putText .put_left .text_length p {display: inline-block;padding-right: 10px;} .tType1 tbody tr td.putText .put_right { width: 26%; max-width: 200px; position: relative;} .tType1 tbody tr td.putText .put_right>button {width: calc(100% - 10px); margin-left: 10px;margin-bottom: 5px;} .tType1 tbody tr td.putText .put_right .btn_popup_wrap button:not(.btn_close) {width: calc(100% - 10px); margin-left: 10px;margin-bottom: 5px;} .tType1 tbody tr td.putText button .qmMark {background-image: url(/publish/images/content/qmIcon_s.png); width: 19px; height: 19px; margin-left: 5px; margin-top: -2px;} .tType1 tbody tr td.putText .put_right .send_btnWrap {position: absolute;bottom: 0;right:0;width: calc(100% - 10px);} .tType1 tbody tr td.putText .put_right .send_btnWrap button {width: 48.5%;} .tType1 tbody tr td.putText textarea {height: 160px; border: none;margin: 0;padding:0 15px;border-radius: 5px 5px 0 0;outline: 0;background-color: transparent; font-size: 15px;} .tType1 tbody tr td.putText .put_left.short textarea {height: 190px;margin:10px 0;padding:0 5px;} .tType1 tbody tr td.putText .put_left.short textarea::placeholder {color: #b5b5b5;} .tType1 tbody tr td.putText .put_left.short.on {border: 1px solid var(--primary-color);border-radius: 5px;background-color: #eef2f9 !important;} .tType1 tbody tr td.putText .put_left.long textarea {height: 380px;} .tType1 tbody tr td.putText .put_left.long.on {border: 1px solid #12bec9;border-radius: 5px;background-color: #eef5f9 !important;} .tType1 tbody tr td.putText .put_left.photo.on {border: 1px solid #e26ba9;border-radius: 5px;background-color: #f8f1f5 !important;} .tType1 tbody tr.msg_title {display:none;} .tType1 tbody tr.msg_title.active {display:table-row;} .tType1 tbody tr.msg_title td .title_wrap .textbox {display:none;margin:10px 0 0;} .tType1 tbody tr.msg_title td .title_wrap .textbox.active {display:block;} .tType1_title {font-size: 20px; font-weight: 600; position: relative; height: 40px;} .tType1_title button {position: absolute;top: 22%; right: 0; transform: translateY(-50%); background-color: var(--primary-color); height: 40px; padding: 0 15px; color: #fff;} .tType1_title>span {font-size: 16px; font-weight: 300; color: #666;} .tType1 tbody tr td.send_list {position: relative;display: flex; justify-content: space-between;} .tType1 tbody tr td.send_list .list_left, .tType1 tbody tr td.send_list .list_right {width: calc(100%/2 - 25px);min-width: 290px;} .tType1 tbody tr td.send_list .list_left {left: 0;position: relative;} .tType1 tbody tr td.send_list .list_left .add_num {height: 90px;} .tType1 tbody tr td.send_list .list_left .add_num input[type="text"] {width: calc(100% - 97px);min-width: 200px;} .tType1 tbody tr td.send_list .list_left .add_num input[type="text"]::placeholder {color: #a6a6a6; font-weight: 300;} .tType1 tbody tr td.send_list .list_left .add_num>span {color: #e40000;font-size: 13px;font-weight: 400;line-height: 39px;} .tType1 tbody tr td .text_req {display: inline-block; color: #999; font-size: 17px; font-weight: 300; vertical-align: middle;} .tType1 tbody tr td.send_list .list_right {right: 0;} .tType1 tbody tr td.send_list .list_right .list_btnWrap {display: flex;flex-flow: wrap;justify-content: space-between;} .tType1 tbody tr td.send_list .list_right .list_btnWrap button {height: 37px;width: calc(100%/3 - 3px);margin-bottom: 5px;} .tType1 tbody tr td.send_list .add_btn {position: absolute; right: 0; top: 0;} .tType1 tbody tr td.send_list .add_btn button {min-width: 95px; height: 32px; font-size: 14px;} .tType1 tbody tr td.send_list .add_remove {text-align: center;margin: 40px 4px 0 4px;align-self: center;} .tType1 tbody tr td.send_list .add_remove button {display: block;max-width: 44px;padding: 4px 6px; border: 1px solid #b1b1b1;border-radius: 5px; margin: 0 auto;margin-bottom: 5px;font-size: 12px;} .tType1 tbody tr td.send_list .add_remove button:hover {box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12);} .tType1 tbody tr td.send_list .add_remove button.add i {background-image:url(/publish/images/content/add_btn.png);width: 11px;height: 10px;display: block;margin: 0 auto;} .tType1 tbody tr td.send_list .add_remove button.remove i {background-image:url(/publish/images/content/remove_btn.png);width: 11px;height: 10px;display: block;margin: 0 auto;} .tType1 tbody tr th.billingAmount {position: relative;line-height: 1;vertical-align: middle;} .tType1 tbody tr th.billingAmount>div {background-color: #f2f2f2;border-radius: 5px;padding: 23px 30px;margin: 20px 0; position: relative;} .tType1 tbody tr th.billingAmount>div .final_pay {position: relative; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;} .tType1 tbody tr th.billingAmount>div p:first-child {font-size: 20px;font-weight: 500;} .tType1 tbody tr th.billingAmount>div p:last-child {font-size: 20px;} .tType1 tbody tr th.billingAmount>div p span#totalPriceTxt {font-size: 24px;color: #e40000;font-weight: 500;} .tType1 tbody tr th.billingAmount>div p span:last-child {font-size: 16px;color: #888;font-weight: 300;} .tType1 tbody tr th.billingAmount .pay_info_list p {float:left;line-height:35px;} .tType1 tbody tr th.billingAmount .pay_info_list .info {float:left;margin:0 0 0 15px;padding:8px 15px 10px;font-size:16px;font-weight:300;color:#555;background:#e5e5e5;border-radius:5px;box-sizing:border-box;} .tType1 tbody tr th.billingAmount .pay_info_list .info strong {font-size:18px;font-weight:700;color:var(--primary-color);} .tType1 tbody tr th.billingAmount .pay_info_list .info span {margin:0 8px 0 7px;} .tType1 tbody tr th.billingAmount button.cal_btn {position: absolute;right: 0; top: 50%;transform: translateY(-50%);background-color: var(--secondary-color);width: 88px;height: 32px;border-radius: 5px;} .tType1 tbody tr th.billingAmount button.cal_btn:hover {box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12);} .tType1 tbody tr th.billingAmount button.cal_btn i {background-image: url(/publish/images/content/calIcon.png);width: 12px;height: 16px;margin: 0 3px 2px 0;} .tType1 tbody tr th.billingAmount .pay_type {background-color: #fff; border-radius: 5px 5px 0 0; height: 60px; padding: 12px 13px; box-sizing: border-box;} .tType1 tbody tr th.billingAmount .pay_type button.btn_event_cash{width: 100px;} .tType1 tbody tr th.billingAmount .pay_type:last-child {margin-top: 10px;} .tType1 tbody tr th.billingAmount .pay_type>div:first-child {float: left;margin:0 0 0 5px;} .tType1 tbody tr th.billingAmount .pay_type>div .won {display:inline-block;margin:9px 11px 0 -34px;font-size:16px;vertical-align:top;color:#9a9a9a;} .tType1 tbody tr th.billingAmount .pay_type>div:last-child {float: right;} .tType1 tbody tr th.billingAmount .pay_type>div:only-child{float: left;} .tType1 tbody tr th.billingAmount .pay_type input[type="radio"]+label {font-size: 16px;} .tType1 tbody tr th.billingAmount .pay_type input[type="radio"]+label span {font-size: 17px; font-weight: 700;} .tType1 tbody tr th.billingAmount .pay_type input[type="text"] {width: 210px; height: 36px; padding:0 37px 2px 16px; border-radius: 5px;text-align:right;} .tType1 tbody tr th.billingAmount .pay_type input[type="text"]::placeholder {color: #000; font-size: 16px; text-align: right; font-weight: 500;} .tType1 tbody tr th.billingAmount .pay_type button {width: 78px; margin-left: 5px;} .tType1 tbody tr td.check_num>div {display: inline-block;} .tType1 tbody tr td.check_num>div button {height: 40px; padding: 0 5px;} .tType1 tbody input[type="text"] {height: 40px; padding: 0 15px; background-color: #f2f2f2;border-radius: 5px;line-height:38px;} .tType1 tbody input[type="password"] {height: 50px; padding: 0 15px; background-color: #f2f2f2;border-radius: 5px; font-size: 16px;} .tType1 tbody select.sel_number {width: 340px; height: 40px; padding: 0 20px; background-color: #f2f2f2;border-radius: 5px; border: 0;color: var(--primary-color);font-weight: 400;font-size: 16px;background-image: url(/publish/images/select_search.png); background-repeat: no-repeat; background-position: 94% center;} .tType1 tbody input[type="text"]::placeholder {color: #a6a6a6;} .tType1 tbody input:disabled {background-color: #dedede;} .tType3 {width: 100%; border-radius: 3px; border: 1px solid #ccc; box-sizing: border-box;} .tType3.payDetail {margin-bottom: 50px;} .tType3.usageDetail {margin-bottom: 50px;} .tType3.payDetail {margin: -15px 0 10px 0;} .payDetail .tType3_hd>div:nth-child(1), .payDetail .tType3_bd>div:nth-child(1) {width: 40px;} .payDetail .tType3_hd>div:nth-child(2), .payDetail .tType3_bd>div:nth-child(2) {width: 20%;} .payDetail .tType3_hd>div:nth-child(3), .payDetail .tType3_bd>div:nth-child(3) {width: 17%;} .payDetail .tType3_hd>div:nth-child(4), .payDetail .tType3_bd>div:nth-child(4) {width: 15%;} .payDetail .tType3_hd>div:nth-child(5), .payDetail .tType3_bd>div:nth-child(5) {width: 17%;} .payDetail .tType3_hd>div:nth-child(6), .payDetail .tType3_bd>div:nth-child(6) {width: 15%;} .payDetail .tType3_hd>div:nth-child(7), .payDetail .tType3_bd>div:nth-child(7) {width: 17%;} .table_cont {display: none;} .table_cont.current {display: block;} .tType3 .tType3_hd { display: flex; height: 36px; line-height: 34px; font-size: 15px; box-sizing: border-box; position: relative; z-index: 0; background-color: #ededed; text-align: center; border-radius: 3px 3px 0 0;} .tType3 .tType3_hd::after {content: ""; background-color: #e9e9e9; width: 100%; height: 18px; position: absolute; bottom: 0; left: 0;z-index: -1;} .tType3 .tType3_hd>div {border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; box-sizing: border-box;} .tType3 .tType3_hd>div:first-child {border-left: 0; } .tType3 .font_ellipsis {position: relative;} .tType3 .tType3_bd { display: flex; height: 40px; line-height: 40px; font-size: 15px; box-sizing: border-box; text-align: center; color: #555; font-weight: 300;} .tType3 .tType3_bd span {font-weight: 400;} .tType3 .tType3_bd>div {height: 40px; padding: 0 10px; line-height: 40px; border-bottom: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; text-align: center; color: #555; font-weight: 300; box-sizing: border-box;} .tType3 .tType3_bd>div:first-child {border-left: 0;} .tType3 .tType3_bd:last-child>div {border-bottom: 0;} .tType3 .tType3_bd .table_certify {font-weight: 400;} .tType3 .tType3_bd .input_wrap2 input[type="text"] {text-align: center; background-color: #f2f2f2; width: calc(100% - 20px); height: 32px; border-radius: 5px; color: #555; vertical-align: baseline;} .tType3 .tType3_bd .input_wrap2 input[type="text"]::placeholder {color: #555;} .tType3 .tType3_bd .input_wrap2 input[type="text"]:-ms-input-placeholder {color: #555;} .tType3 .tType3_bd .btnType14 {height: 28px; padding: 0 11.5px; vertical-align: baseline; line-height: 28px;} .tType3 .tType3_bd input[type="radio"] {margin-top: 0; margin-right: 0; vertical-align: revert;} .tb_wrap{position:relative;width: 100%; min-height: 430px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px; box-sizing: border-box;border-bottom:0 none;} .tb_wrap:after {content:'';position:absolute;left:2px;bottom:0;width:calc(100% - 4px);height:1px;background:#ccc;} .tType4{table-layout: fixed; width: 100%;} .tType4 thead{background-color: #ededed; position: relative; z-index: 0;} .tType4 thead tr:only-child th{height: 36px;} .tType4 thead th{border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; font-size: 15px; font-weight: 400; position: relative; z-index: 1; line-height: 25px; vertical-align: middle;} .tType4 thead th::after{position: absolute; content: " "; width: 100%; height: 18px; background-color: #e5e5e5; bottom: 0; left: 0; z-index: -1;} .tType4 thead th:last-child{border-right: 0;} .tType4 .sort_wrap{display: inline-block;} .tType4 tbody td{text-align: center; font-size: 15px; color: #666; font-weight: 400; border-right: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; height: 38px; vertical-align: middle; padding: 0 10px; box-sizing: border-box;} .tType4 tbody td.tb_tit{text-align: left; position: relative;} .tType4 tbody td.input_wrap2 input[type="text"] {text-align: center;background-color: #f2f2f2;width: calc(100% - 20px);height: 32px;border-radius: 5px;border: 1px solid #f2f2f2;margin-right: 0;color: #555;} .tType4 tbody tr:only-child:last-child td{border-bottom: 1px solid #ccc;} .tType4 tbody td:last-child{border-right: 0;} .tType4 tbody td>p{width: 100%; line-height: 38px; white-space: nowrap; text-overflow: ellipsis; letter-spacing: -0.5px; overflow: hidden;margin: 0 auto;} .tType4 tbody td span {font-weight: 400;} .tType4 td input[type="text"]{height: 28px; display: inline-block; border: 1px solid #e5e5e5; margin-right: 5px;} .tType4 tbody .btnType14 {height: 28px;} .tType4 .memo_text {width: calc(100% - 35px); margin-right: 5px; display: inline-block; text-align: left; vertical-align: inherit;} .tType4 tbody td span.textReject {line-height:28px;} .tType4 tbody td .btnTypeReject {margin:0 0 0 3px;line-height:26px;letter-spacing:0;text-align:center;vertical-align:top;} .tType4 tbody td.result_cont a {text-align: left!important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .tType4 tbody td.result_cont .result_tit { } .tType4 tbody td .cancel_date {font-size:14px; color:#666; display: block;} /* // table */ /* tab */ .top_content {display: none;} .top_content.current {display: block;} .custom_content {display: none;} .custom_content.current {display: block;} .bottom_content {display: none;} .bottom_content.current {display: block;} .popup_cont {display: none;} .popup_cont.current {display: block;} .history_cont {display: none;} .history_cont.current {display: block;} .tabType1 {background-color: #fff;width: 100%;border-radius: 10px; display: flex;text-align: center;margin-bottom: 20px;border:2px solid #46484a;} .tabType1 li {flex-basis: calc(100%/2); position: relative;} .tabType1 li button {width: 100%;padding: 13px 0;font-size: 16px;position:relative;z-index:1;} .tabType1 li.active {background-color: #46484a;} .tabType1 li.active:after {content:'';position:absolute;left:-1px;top:-1px;width:100%;height:100%;border:1px solid #46484a;} .tabType1 li.active button {color: #fff;border:1px solid #46484a;background-color: #46484a;} .tabType1 li.active button:before {content:'';position:absolute;left:-1px;top:-1px;width:100%;height:100%;border:2px solid #46484a;box-sizing:border-box;} .tabType1 li.active button:after {content:'';position:absolute;left:-5px;top:-5px;width:100%;height:100%;border:5px solid #46484a;border-radius:10px;} .tabType2 {width: calc(100% - 600px); border-radius:10px 10px 0 0; display: flex;text-align: center;margin-bottom: 20px;position: relative;background-color: #fff;} .tabType2::after {position: absolute;height: 2px;background-color: #000;width: calc(100% + 600px);content: "";bottom: 0;left: 0;} .tabType2 li {flex-basis: calc(100% /4);min-width: 200px;} .tabType2 li button {width: 100%;padding: 13px 0;font-size: 20px;border-left: 1px solid #e5e5e5;background-color: #fff;} .tabType2 li:nth-child(3) button {border-left: 0;} .tabType2 li:first-child button {border-left: 0;border-radius: 10px 0 0 0;} .tabType2 li:last-child button {border-radius: 0 10px 0 0;} .tabType2 li.active button {background-color: #46484a;border-radius:10px 10px 0 0;color: #fff;border-left: 1px solid transparent;} .tabType4 {background-color: #fff;width: 100%;border-radius: 10px; display: flex;text-align: center;margin-bottom: 20px;border:2px solid #46484a;} .tabType4 li {flex-basis: calc(100%/3); position: relative;} .tabType4 li::after {content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 1px; height: 34px; background-color: #ccc;} .tabType4 li:last-child::after {content: none;} .tabType4 li.active::after {content: none;} .tabType4 li button {position:relative;width: 100%; height: 50px; padding: 12px 0;font-size: 18px; letter-spacing: -0.5px;} .tabType4 li.active button {color:#fff;border:1px solid #46484a;background-color:#46484a;} .tabType4 li.active button:before {content:'';position:absolute;left:-1px;top:-1px;width:100%;height:100%;border:2px solid #46484a;box-sizing:border-box;} .tabType4 li.active button:after {content:'';position:absolute;left:-5px;top:-5px;width:100%;height:100%;border:5px solid #46484a;border-radius:10px;} .tabType4.tabTwo li {flex-basis: calc(100%/2);} .tabType5 {background-color: #fff;width: 100%; border: 1px solid #dfdfdf; border-bottom: 1px solid #46484a; border-radius: 5px 5px 0 0; display: flex;text-align: center;} .tabType5 li {flex-basis: calc(100%/3); position: relative;} .tabType5 li::after {content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 1px; height: 100%; background-color: #c7c8c8;} .tabType5 li:last-child::after {content: none;} .tabType5 li.active::after {content: none;} .tabType5 li button {width: 100%;height: 45px; font-size: 18px;} .tabType5 li.active button {background-color: #46484a;border-radius: 5px 5px 0 0;color: #fff; font-weight: 300;} .tabType6 {background-color: #fff;width: 100%;border-bottom: 1px solid #e5e5e5; display: flex;text-align: center;} .tabType6 li {flex-basis: calc(100%/2);} .tabType6 li button {width: 100%;height: 35px; font-size: 16px;border: 1px solid #dfdfdf; border-bottom: 1px solid #e5e5e5; border-radius: 5px 5px 0 0;} .tabType6 li.active button {background-color: #c8c8c8;border-radius: 5px 5px 0 0; border: 1px solid #c8c8c8;} .pay_refund_cont .pay_tType1 {margin-top:-20px;} .pay_refund_cont .pay_tType1 tbody tr:first-child {border-top:0 none;} /* // tab */ /* calendar */ .calendar_wrap {position:relative;display: inline-block;} .calendar_wrap>span {font-weight: 500;} .calendar_wrap>input[type="text"] {height: 36px;line-height: 36px;width: 140px;border: 1px solid #d5d5d5;font-size: 16px;font-weight: 300;padding: 0 5px;color: #777;background: url(/publish/images/calendar/calendarIcon2.png) #fff no-repeat right 7px center;} .calendar_in {position: relative;display: inline;} .calendar_in>button { border: 1px solid transparent !important; height: 26px; margin: 1px 0 0 0; padding: 0; text-indent: -9999em; width: 26px; vertical-align: middle; position: absolute; right: 8px;top: 57%; transform: translateY(-50%);} .calendar_in .calendar-frame {border: 0;height: 290px;width: 320px;} .calendar_in .calendarPop {display: none;position: absolute;z-index: 10;top: 32px;left: -204px; border-radius: 10px 10px 0 0;box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12); background-color: #fff;}