.imp-dialog { background: url(https://storage.googleapis.com/i.addblock.net/preloader2.gif) center center no-repeat; }
.m-b-0 {margin-bottom:0 !important;}
/*common*******************************************************************************************/
.sub-page {
padding-top:30px;
font-family: 'Noto Sans KR',sans-serif;
min-height: 80%;
}
.sub-page .divider {
border-top: 1px solid #DBDBDB;
margin: 20px 0px;
}
.sub-page .back-btn {
float: right;
border: none;
box-shadow: none;
padding :0;
line-height: 1;
margin-top: 45px;
}
.sub-page .back-btn a:before {
font-family: 'FontAwesome';
content: '\f104';
color:#2d343e;
font-size:23px;
margin-right: 10px;
}
.sub-page .back-btn a,
.sub-page .back-btn a:hover,
.sub-page .back-btn a:focus {
font-size: 18px;
color: #2d343e;
text-decoration: none;
}
.sub-page .breadcrumb {
background-color: transparent;
padding: 0;
margin-top: 45px;
margin-bottom: 40px;
}
.sub-page .breadcrumb li { vertical-align: middle; }
.sub-page .breadcrumb li a {
/*font-size: 27px;*/
color:#2d343e;
text-decoration: none;
}
.sub-page .breadcrumb li.active a { color: #4789e7;}
.sub-page .breadcrumb li a > img.fa { margin-right: 15px; }
.sub-page .breadcrumb > li + li:before{content: ''; display: none;}
.sub-page .breadcrumb > li svg{vertical-align: text-top; fill: #b1b3b7; margin: 0 10px;}
.sub-page .content-box {
padding: 50px;
background-color: #fff;
}
.sub-page .sub-header { font-size: 27px; letter-spacing: -0.03em; }
.sub-page .sub-title { margin-bottom: 20px; }
.sub-page .sub-title .text h2 { letter-spacing: -0.05em; font-weight: normal; color: #212326; margin-top: 0; margin-bottom: 10px; }
.sub-page .sub-title .text h2 strong { color: #4789e7; }
.sub-page .content-box .sub-title > .text {
font-size: 13px;
color: #797f86;
}
.sub-page .content-box .divider { margin-top: 25px; margin-bottom: 45px; clear: both; }
.sub-page .content-box .sub-content .btn-box .btn img { margin-bottom: 0; margin-right: 4px; }
.sub-page .content-box .sub-content .btn-box .btn { font-size: 13px;}
/**************************************************************************************************/
/**************************************************************************************************/
/*domain*******************************************************************************************/
.cl-domain-connect-delete-modal .visible-md.visible-lg {
display: inline-block !important;
}
.sub.sub-page.sub-domain.domaincheck {
padding-bottom: 110px;
position: relative;
background-color: #eeeff3;
padding-top:23px;
}
.sub.sub-page.sub-domain.domaincheck .breadcrumb{margin-bottom: 30px;}
.sub.sub-page.sub-domain.domaincheck .breadcrumb li a {font-size: 27px;}
.sub.sub-page.sub-domain.domaincheck .container {width: 100%; max-width:920px; margin: 0 auto;}
.sub-domain.domaincheck.index .sub-title.dmnotice-wrap {padding: 60px 50px 20px 50px;}
/*.sub-domain.domaincheck.index .sub-title.dmnotice-wrap .text {width:auto;}*/
.sub-domain.domaincheck.index .content-box .text{font-size: 13px; color: #696c71;float: left; width: 100%;}
.connect-mx-record-modal .text{font-size: 14px; color: #696c71; text-align: left; margin-top: 20px;}
.sub-domain.domaincheck.index .content-box .text li,
.connect-mx-record-modal .text li{position: relative; padding-left: 13px;}
.sub-domain.domaincheck.index .content-box .text li:before,
.connect-mx-record-modal .text li:before {content: '·'; display: block; position: absolute; left: 0;}
.sub-domain.domaincheck.index .content-box .text li.danger{color: #ee445f;}
.sub-domain.domaincheck.index .content-box .text li a,
.sub-domain.domaincheck.index .content-box .text li a:hover,
.sub-domain.domaincheck.index .content-box .text li a:focus,
.connect-mx-record-modal .text li a,
.connect-mx-record-modal .text li a:hover,
.connect-mx-record-modal .text li a:focus{text-decoration: underline; color: #4789e7;}
.connect-mx-record-error .etc-info {text-align: left;}
.connect-mx-record-error .info-text {
position: relative;
background-color: #f6f7f9;
padding: 15px 15px 15px 33px;
margin-top: 20px;
}
.connect-mx-record-error .etc-info .info-text svg {top: 20px;}
/*.sub-domain.index .sub-title .text:not(.domainnotice), .sub-domain.domaincheck .sub-content .content-input-box {
float: left;
width: 79%;
}
.sub-domain.domaincheck.index .sub-title.dmnotice-wrap .btn-box {
float: right;
width: 154px;
height: 46px;
}*/
.sub-domain.index .sub-title.dmnotice-wrap .btn-box {padding-left: 0;}
/*.sub-domain.index .sub-title .btn-box, .sub-domain.domaincheck .sub-content .btn-box {
display: inline-block;
width:20%;
padding-left: 10px;
}*/
/*.sub-domain .btn.btn-default.dark {
width: 100%;
font-size: 13px;
line-height: 18px;
-moz-border-radius: 0;
border-radius: 0;
padding: 15px 11px 15px;
color: #fff;
background-color: #2d343e;
border: 1px solid #2d343e;
}
.sub-domain .btn.btn-default.dark:hover,
.sub-domain .btn.btn-default.dark:focus {
color: #fff;
border-color: #3c4451;
background-color: #3c4451;
}*/
.sub-domain .info-content .info {position: relative; padding: 15px 15px 15px 33px; margin-bottom: 20px; margin-top: 10px; background-color: #f6f7f9; font-size: 13px;}
.sub-domain .info-content .info > svg {position: absolute; top: 21px; left: 15px; fill: #4789e7;}
.sub-domain .info-content .info.danger > svg {fill: #ee445f;}
.sub-domain .info-content .info > p {margin: 0 0 15px 0;}
.sub-domain .info-content .info.http { margin-top:10px;margin-bottom: 0px; }
.sub-domain .info-content .info.http p { margin:0; }
.sub-domain .info-content .info .btn-default {padding: 5px 25px; background-color: transparent;}
.sub-domain .info-content.ssl-info {padding-bottom: 10px;}
.sub-domain .info-content {border-bottom: 1px solid #eeeff0; padding-bottom: 30px; margin-bottom: 30px;}
.sub-domain .info-content:last-child{border-bottom: none; padding-bottom: 0px; margin-bottom: 0;}
.sub-domain .ns-info ul > li { margin-bottom: 7px; }
.sub-domain .ns-info ul > li > div > label { color: #9d9fa4; font-weight: normal; width: 30px; margin-bottom: 0;}
.sub-domain .ns-info ul > li > div + div label { width: auto; padding: 0 13px 0 20px; }
.sub-domain .ns-info ul > li .domain-nmsvinfo + span { flex: 1; line-height: normal; margin-right:15px; }
.sub-domain .ns-info ul > li .display-ns {align-items: center;}
.sub-domain .ns-info ul > li .display-ip {flex: 1;}
.sub-domain .ns-info ul > li .ns-copy {
width: 50px;
height: 22px;
border: 1px solid #4789e7;
border-radius: 3px;
color: #4789e7;
font-size: 13px;
float: right;
margin-right: 0;
text-align: center;
line-height: 20px;
}
.sub-domain .info-content > .ns-config-wrap { padding-top: 20px;}
.sub-domain .info-content > .ns-config-wrap > span {
display: inline-block;
padding: 0 25px;
width: auto;
height: 30px;
line-height: 30px;
border-radius: 3px;
border: solid 1px #dbdcdf;
cursor: pointer;
text-align: center;
}
.sub-domain .ns-info > .ns-config-wrap > span + span { margin-left: 7px;}
.sub-domain .ssl-info .https-switch { margin-top: 25px; }
.sub-domain .ssl-info .https-switch > span { margin-left: 7px; }
.sub-domain .ssl-info .https-switch .simple-switch { width: 46px !important; }
.sub-domain .ssl-info .https-switch .simple-switch .simple-switch-handle { width:16px;height:16px; top:5px; left:5px; }
.sub-domain .ssl-info .https-switch .simple-switch-input:checked ~ .simple-switch-handle { left: 25px !important; }
.sub-domain .ssl-info .https-switch .simple-switch.disable-switch .simple-switch-label { background: #d6d9dc !important; }
.sub-domain .ssl-info .https-switch .simple-switch.disable-switch .simple-switch-handle { background: #bcbfc2; }
/*domain index*/
.sub-domain.index .list-item .display-flex .ns-notice {
padding: 30px;
background-color: #ff9100;
display: flex;
align-items: start;
}
.sub-domain.index .list-item .display-flex .ns-notice .ns-notice-svg {width: 40px; height: 40px; margin-right: 20px;}
.sub-domain.index .list-item .display-flex .ns-notice svg { fill: #fff;}
.sub-domain.index .list-item .display-flex .ns-notice .ns-notice-text {
color: #fff;
font-size: 16px;
line-height: 1.3;
font-weight: normal;
}
.sub-domain.index .display-flex .list-title + div > p,
.sub-domain.index .display-flex .ns-notice + p,
.sub-domain.index .display-flex .list-title + div > p + .dmnotice-wrap,
.sub-domain.index .display-flex .ns-notice + p + .dmnotice-wrap {padding: 0 30px;}
.sub-domain.index .user-domain-wrap.creatorlink-domain .list-title + div { padding: 10px 30px 10px 30px;}
.sub-domain.index .user-domain-wrap.creatorlink-domain .list-title + div > p {padding: 0;}
.sub-domain.index .sub-title .go-add-domain {
width: 160px;
height: 40px;
font-size: 13px;
padding: 0;
line-height: 40px;
border:none;
}
.sub-domain.index .sub-title .go-add-domain.noplan,
.sub-domain .info-content > .ns-config-wrap > span.noplan {background-color: #d1d3d5; color: #fff;}
.sub-domain.index .list-item > li .zone-state .ns-info-open {
width: 14px;
height: 14px;
font-size: 0;
float: right;
line-height: 38px;
display: inline-block;
}
.sub-domain .info-content .zone-state:not(.collapsed) .ns-info-open svg {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
}
.sub-domain.index .sub-title .go-add-domain > svg,
.sub-domain.index .sub-title .go-add-domain > svg + span{
display: inline-block;
}
.sub-domain.index .sub-title .go-add-domain > svg {fill: #fff; margin-right: 10px;}
.sub-domain.index .list-title {font-size: 16px; color: #222428; font-weight: normal; margin-bottom: 10px;}
.sub-domain.index .list-item {color: #696c71;}
.sub-domain.index .list-item > li >div:nth-child(2) {width: 100%; max-width: 560px; flex: 1; border:1px solid #dbdcdf; border-radius: 3px; padding:0 0 30px 0; margin-bottom: 15px; }
.sub-domain.index .list-item > li:last-child {margin-bottom: 0px;}
/*.sub-domain.index .list-item > li > a.accordion-toggle:before {
float:right;
font-family: 'FontAwesome';
content:"\f106";
color:#438EEB;
font-size:23px;
text-decoration: none;
}*/
/*.sub-domain.index .list-item > li > a.accordion-toggle.collapsed:before { content:"\f107"; }
.sub-domain.index .list-item > li.none > a.accordion-toggle:before { content:'';}*/
.sub-domain.index .list-item > li > div > a { padding: 0; color:#2d343e; font-size:16px; text-decoration: none; margin: 10px 0;}
.sub-domain.index .list-item > li > div > p { padding: 0; color:#2d343e; font-size:16px; text-decoration: none; margin: 20px 0 15px 0;}
.sub-domain.index .list-item > li .zone-state {font-size: 13px; color:#696c71; margin-top: 15px;}
.sub-domain.index .list-item > li .zone-state.ns-info-col {width: 100%; display: inline-block; margin-top: 0;}
.sub-domain.index .list-item > li .zone-state.ns-info-col.active {padding-bottom: 10px;}
.sub-domain.index .list-item > li .zone-state > span{display: inline-block; width: 140px; color: #9d9fa4;}
.sub-domain.index .list-item > li .zone-state > span.ssl-state { color:#696c71; }
.sub-domain.index .list-item > li .zone-state > span.state{width: 8px; height: 8px; border-radius: 50%; margin-right: 5px;}
.sub-domain.index .list-item > li .zone-state > span.state.wait{background-color: #ff9100;}
.sub-domain.index .list-item > li .zone-state > span.state.active{background-color: #4789e7;}
.sub-domain.index .list-item > li .zone-state > span.state.none{background-color: #ee445f;}
.sub-domain.index .list-item > li > a > span.zone-state { font-size: 13px; color:#696c71; margin-left: 25px;}
.sub-domain.index .list-item > li > a > span.zone-state.active { color: #4789e7; }
.sub-domain.index .list-item > li ul{/*margin-bottom: 30px;*/}
.sub-domain.index .list-item > li .zone-state .remove-mx-record{display: inline-block; margin-left: 5px; width: 24px; height: 24px; line-height: 28px; fill: #b1b3b7; vertical-align: middle; text-align: center;}
.sub-domain.index .list-item > li .ssl-info .zone-state { margin-bottom: 0px; }
.sub-domain.index .user-domain-wrap.creatorlink-domain { margin-top: 25px; }
/*domain add*/
.sub-domain .connect-stap li {
display: block; height: 72px; /*line-height: 72px;*/
text-align: center;
font-size: 16px;
font-weight: normal;
color: #d1d3d5;
border-bottom: 2px solid #eeeff0;
display: flex;
justify-content: center;
align-items: center;
}
.sub-domain .connect-stap li .number,
.sub-domain .connect-stap li .complete{display: inline-block; margin-right: 12px; width: 32px; height: 32px; line-height: 32px; border-radius: 50%; font-family: Roboto; font-size: 20px; font-weight: normal; text-align: center; background-color: #d1d3d5; color: #fff; fill: #fff;}
.sub-domain .connect-stap li.last .stap { max-width: 145px; text-align: left; }
.sub-domain .connect-stap li span svg{vertical-align: text-bottom;}
.sub-domain .connect-stap li .complete{display: none;}
.sub-domain .connect-stap li.active,
.sub-domain .connect-stap li.complete{color: #4789e7; border-bottom: 2px solid #4789e7;}
.sub-domain .connect-stap li.active .number,
.sub-domain .connect-stap li.active .complete{background-color: #4789e7; }
.sub-domain .connect-stap li.complete{color: #4789e7;}
.sub-domain .connect-stap li.complete .number{display: none;}
.sub-domain .connect-stap li.complete .complete{display: inline-block; background-color: #4789e7;}
.sub-domain .btn-default{border-color: #4789e7; color: #4789e7;}
.sub-domain.domaincheck .sub-title > .text h3 { font-size:18px; color:#2d343e; line-height: 1.4;margin-bottom: 0px;padding-left: 45px;}
.sub-domain.domaincheck .sub-title > .text h5 {
color:#797f86;
font-weight:300;
line-height: 1.4;
margin-top:15px;
padding-left: 45px;
}
.sub-domain.domaincheck .sub-content {
margin-top:30px;
height:auto;
overflow: hidden;
}
.sub-domain.domaincheck .sub-content .domainconnect-input {
width: 100%;
position: relative;
overflow: hidden;
max-width: 480px;
margin:auto;
}
.sub-domain.domaincheck .sub-content .domainconnect-input .content-input-box { overflow: hidden; }
.sub-domain.domaincheck .sub-content .domainconnect-input .content-input-box .error { padding: 0; margin: 0; margin-top: 10px; }
.sub-domain.domaincheck .sub-content .domain-ctinfo {position:relative; overflow: hidden; }
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv {
height:auto;
overflow: hidden;
margin-bottom: 70px;
position: relative;
}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .btn{width: 70px;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv > div {margin-bottom: 10px;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv > div > div:last-child{margin-left:50px;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nameserver-wrap {width: 60%;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .ipaddress-wrap {width: 40%;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserver,
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserip{flex: 1;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserver + div {text-align: center;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserver .form-control,
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserip .form-control {
border-radius: 3px;
border: solid 1px #dbdcdf;
background-color: #f3f4f5;
padding: 5px 8px;
box-shadow: none;
text-align: left;
width: 100%;
margin-right: 10px;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sub-domain.domaincheck .content-box {padding:0;}
.sub-domain.domaincheck .content-box .sub-title { padding:0 50px;}
.sub-domain.domaincheck.index .content-box .sub-title { margin-bottom:20px;position: relative; overflow: hidden;}
.sub-domain.domaincheck .content-box .sub-content {padding:0 50px;}
.sub-domain.domaincheck .content-box .sub-content .stap .stap-title{margin: 40px 0px 60px; font-size: 26px; font-weight: normal;line-height: normal; color: #222428;text-align: center;}
.sub-domain.domaincheck .content-box .sub-content .stap-3 h3.stap-title{margin-bottom: 40px;}
.sub-domain.domaincheck .content-box .sub-content .stap h5.stap-title{margin-bottom: 10px;font-size: 19px;text-align: left;margin-top: 100px;}
.sub-domain.domaincheck .content-box .sub-content .stap-2 h5.stap-title{margin-bottom: 25px;margin-top: 10px;}
.sub-domain.domaincheck .content-box .sub-content .stap-3 h3.stap-title svg{fill: #00b900; margin-bottom: 20px;}
.sub-domain.domaincheck .content-box .sub-content .stap .stap-desc{font-size: 13px; color: #696c71; margin-bottom: 40px;}
.sub-domain.domaincheck .content-box .sub-content .stap .stap-desc li{position: relative; padding-left: 13px;}
.sub-domain.domaincheck .content-box .sub-content .stap .stap-desc li:before{content: '·'; display: block; position: absolute; left: 0;}
.sub-domain.domaincheck.index .content-box .sub-content {
margin: 0 50px 50px 50px;
border-top: 1px solid #eeeff0;
padding: 40px 0 25px 0;
border-bottom: 1px solid #eeeff0;
}
.sub-domain.domaincheck.index .content-box .sub-content .domain-list > .row:first-child {margin-bottom: 40px;}
.sub-domain.domaincheck .content-box .add_arrow {
background-repeat: no-repeat;
background-position: 25px 2px;
}
.sub-domain.domaincheck .content-box .sub-content .stap .stap-desc.domain-complete {
border:4px solid #eeeff0;
padding:30px 40px;
font-size: 16px;
line-height: normal;
}
.sub-domain.domaincheck .content-box .sub-content .stap .stap-desc.domain-complete li:first-child {margin-bottom: 10px;}
.sub-domain.domaincheck .content-box .sub-content .stap .stap-desc.domain-complete b { color:#222428; }
/*.sub-domain.domaincheck .breadcrumb + .content-box {margin-top:26px;}*/
/*.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmSeverinfo-wrap {
margin-bottom:10px;
position: relative;
height: 34px;
clear: both;
}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmSeverinfo-wrap div:nth-child(2n-1) {height: 36px; display: table;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmSeverinfo-wrap div:nth-child(2n-1) > span {vertical-align: middle; display: table-cell;letter-spacing: -0.3px;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserip input {margin-left:4px;}*/
.sub-domain.domaincheck .sub-content .popup-btn-wrap,
.connect-mx-record-modal .popup-btn-wrap{flex-wrap: wrap; margin-right: -10px;}
.sub-domain.domaincheck .sub-content .popup-btn-wrap .btn,
.connect-mx-record-modal .popup-btn-wrap .btn{
display: block;
width: calc(33.33% - 10px);
padding: 0;
margin: 0 10px 10px 0;
height: 45px;
line-height: 43px;
font-size: 13px;
color: #4789e7;
border: 1px solid #4789e7;;
}
.modal-dialog.connect-mx-record-modal .btn.btn-default,
.modal-dialog.connect-mx-record-modal .btn.btn-default:hover{
background-color: #fff !important;
}
.modal-default .modal-dialog.connect-mx-record-modal.cl-cmmodal .modal-footer .btn-default.close-button-dialog.clostbtnfalse{
background-color: #f3f4f5 !important;
}
/*.sub-domain.domaincheck .sub-content .popup-btn-wrap .btn svg,*/
.connect-mx-record-modal .popup-btn-wrap .btn svg{fill: #4789e7; margin-left: 0; vertical-align: middle; opacity: 0; width: 0; visibility: hidden; transition: all .2s; display: none;}
/*.sub-domain.domaincheck .sub-content .popup-btn-wrap .btn:hover svg,*/
.connect-mx-record-modal .popup-btn-wrap .btn:hover svg{opacity: 1; width: 16px; margin-left: 8px; visibility: visible;}
.sub-domain.domaincheck .domain-2nd .dm-guide2,
.sub-domain.domaincheck .domain_mail.dmnotice-wrap .dm-guide2 {color:#ee445f;}
.sub-domain.domaincheck .domain-btn {min-width:160px; margin : 50px auto 70px auto; text-align: center; border: none;}
.sub-domain.domaincheck .domain-dash {text-align: center; margin-top:8px;display: inline-block; margin-right: 10px;}
.sub-domain.domaincheck .domain-dash .domain-suc {
font-weight: 300;
display: inline-block;
background-color: #2d343e;
color: #fff;
padding: 15px 20px;
width: 150px;
}
.sub-domain.domaincheck .domain-2nd {margin:60px 0 0 0; }
.sub-domain.domaincheck .domain-2nd,
.sub-domain.domaincheck.add .domain_mail.domain-3rd {opacity: 0.3;}
.sub-domain.domaincheck.add .domain_mail.domain-3rd {margin-top: 50px;}
.sub-domain.domaincheck .domain_mail.domain-3rd { padding:0 50px 50px 50px;position: relative; overflow: hidden;}
.sub-domain.domaincheck .domain_mail.domain-3rd.dmnotice-wrap {opacity: 1;}
.sub-domain.domaincheck .domain_mail.domain-3rd.dmnotice-wrap > div {padding-left: 45px;}
.sub-domain.domaincheck .domain_mail svg {
position: absolute;
fill:#ee445f;
}
.sub-domain.domaincheck .domain_mail.dmnotice-wrap svg,
.sub-domain.domaincheck .dmnotice-wrap svg { opacity: 1;}
/*.sub-domain.domaincheck .domain_mail.dmnotice-wrap h3.domain_mtitle {margin:2px 0 18px 11px;float: left;width: calc(100% - 52px);line-height: 1.3;}*/
/*.sub-domain.domaincheck .domain_mail h3.domain_mtitle {
float: left;
width: calc(100% - 52px);
line-height: 1.3;
}*/
.sub-domain.domaincheck .domain_mail h3.domain_mtitle,
.sub-domain.domaincheck .sub-title > .text.domainnotice h3 {
font-weight: 500;
display: inline-block;
margin:0 0 15px 0;
font-size:18px;
}
.sub-domain.domaincheck .sub-title > .text.domainnotice h3 {margin:3px 0 14px 11px;}
.sub-domain.domaincheck .domain_mail p,
.sub-domain.domaincheck .sub-title > .text.domainnotice h5 {
color:#797f86;
margin-left: 44px;
font-size: 14px;
font-weight: 300;
margin-bottom: 0;
margin: 0 0 0 44px;
}
.sub-domain.domaincheck .sub-content .info-text {position: relative; font-size: 13px; color: #696c71; margin: 10px 0; /*padding: 0 0 0 18px;*/ text-align: center;}
.sub-domain.domaincheck .sub-content .info-text > svg{/*position: absolute; left: 0; top: 5px;*/ fill:#4789e7;transform: translateY(2px);margin-right: 2px;}
.sub-domain.domaincheck .sub-content .info-text > a {text-decoration: underline; color: #4789e7;}
.sub-domain.domaincheck .sub-content .stap-2 .info-text{/*padding: 20px 20px 20px 38px; background: #f6f7f9; margin: 30px 0 50px 0;*/text-align: left; margin-top: 5px;padding-bottom: 20px;color:#8e9095;}
.sub-domain.domaincheck .sub-content .stap-2 .info-text>svg{top: 24px; left: 20px;}
.sub-domain.domaincheck .domain_mail p span {
font-weight:500;
color:#000;
}
.sub-domain.domaincheck .domain_mail p .domain_mx {
color:#ee445f;
font-weight: 300;
margin-top:4px;
display: inline-block;
}
.sub-domain.domaincheck .sub-content,
.sub-domain.domaincheck .sub-title:not(.dmnotice-wrap) > .text,
.sub-domain.domaincheck:not(.index) .ns-info {
position: relative;
/* padding-left: 45px; */
}
/*.sub-domain.domaincheck .breadcrumb + .content-box { padding-bottom: 70px; }*/
.sub-domain.domaincheck.index .breadcrumb + .content-box { padding-bottom: 39px; }
.sub-domain.domaincheck .sub-title:not(.dmnotice-wrap) > .text:before,
/*.sub-domain.domaincheck .ns-info:not(.dmnotice-wrap) > .info:before,*/
.sub-domain.domaincheck .sub-title.domain-2nd > .text:before,
.sub-domain.domaincheck .sub-title.domain-3rd > .text:before {
content: '1';
font-family: 'Open Sans';
font-size: 18px;
color: #fff;
background-color: #7d8791;
-moz-border-radius: 50%;
border-radius: 50%;
width: 30px; height: 30px;
text-align: center;
line-height: 30px;
display: inline-block;
position: absolute;
top: 0; left: 0;
}
.sub-domain.domaincheck .sub-title.domain-2nd > .text:before {content: '2';}
.sub-domain.domaincheck .sub-title.domain-3rd > .text:before {content: '3';}
.sub-domain.domaincheck .ns-info.add > .info:before {
content: '2';
top: 65px;
}
.sub-domain.domaincheck .ns-info.mx > .info:before {
content: '3';
top: 55px;
}
.sub-domain.domaincheck .sub-title > .text > span { color: #2d343e; }
.sub-domain.domaincheck .sub-title > .text > span + span { margin-left: 7px; }
.sub-domain.domaincheck .sub-title > .text > a { color: #4789e7; text-decoration: underline; position: relative; }
.sub-domain.domaincheck .ns-info.add > .info { padding-top: 60px; }
.sub-domain.domaincheck .ns-info.mx > .info { padding-top: 50px; }
.sub-domain .ns-info > .info p {
color: #797f86;
margin-bottom: 0;
}
.sub-domain .ns-info > .info p + p { color: #ed6b6b; }
.sub-domain .ns-info > .info p > a.link { color: #4789e7; }
.sub-domain .ns-info > .btn-wrap { padding-top: 50px; }
.sub-domain .ns-info > .btn-wrap > a > .btn { width: auto; }
.sub-domain .ns-info > ul.row-ul > li { display: inline-block; }
.sub-domain .ns-info > ul.row-ul > li:nth-child(1) {
width: 95px;
vertical-align: top;
}
.sub-domain.domaincheck .sub-content .input-group-addon {
color: #696c71;
font-size: 16px;
line-height: 16px;
-moz-border-radius: 3px 0px 0px 3px;
border-radius: 3px 0px 0px 3px;
background-color: transparent;
border-right: none;
padding: 12px 0 12px 20px;
border-color: #dbdcdf;
}
.sub-domain.domaincheck .sub-content .input-group-addon + .form-control {
font-size: 16px;
line-height: 16px;
height: auto;
-moz-border-radius: 0px 3px 3px 0px;
border-radius: 0px 3px 3px 0px;
border-left: none;
padding: 12px 25px 12px 10px;
border-color: #dbdcdf;
box-shadow: none;
}
.sub-domain.domaincheck .sub-content .check-domain-form.focus .input-group-addon,
.sub-domain.domaincheck .sub-content .check-domain-form.focus .form-control {
border-color: #4789e7;
}
.sub-domain.domaincheck .content-box .form-control + i {
position: relative;
top:8px; right: 13px;
font-style: normal;
}
.sub-domain.domaincheck .content-box .form-control + i:before {
position:absolute;
font-family: 'FontAwesome';
left:-30px;
line-height: 34px;
font-size:18px;
}
.sub-domain.domaincheck .content-box .form-control.success + i:before {
content:"\f00c";
color: #4889E7;
}
.sub-domain.domaincheck .content-box .form-control.fail + i:before {
content:"\f00d";
color: #CC0000;
left:-30px;
}
.sub-domain.domaincheck .sub-content .btn.btn-primary {
width: 100%;
font-size: 13px;
line-height: 16px;
padding: 15px 25px 15px;
border: none;
max-width: 120px;
}
.sub-domain.domaincheck .sub-content .stap-3 .btn.btn-primary {
background-color: #fff;
color: #696c71;
border: 1px solid #cbcbce;
max-width: unset;
width: auto;
}
.sub-domain.domaincheck .sub-content .stap-3 .btn.btn-primary:active {
box-shadow: none;
}
.sub-domain.domaincheck .sub-content .content-input-box label.error { padding-top:5px; text-align: left; color: #ed6b6b; font-size: 13px; font-weight: normal; }
.sub-domain.domaincheck .sub-content .content-input-box label.error svg { transform: translateY(2px);margin-right: 5px; }
.sub-domain.domaincheck .working { color: #a1a7af; padding: 10px 0; display: none;}
.sub-domain.domaincheck .working > img { padding-right: 10px; }
.sub-domain.domaincheck .sub-content .dom-namesv{font-size: 13px;}
.sub-domain.domaincheck .sub-content .dom-namesv .nmserverNumber {width: 100px; margin-right: 10px;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserverNumber {width: 110px;letter-spacing: -0.1px;}
.sub-domain.domaincheck .sub-content .dom-namesv .namesv_numip{margin-right: 10px;}
.mx-record-info{color: #696c71;}
.mx-record-info > p{text-align: left; font-size: 16px;}
.mx-record-info .table-wrap{width: 100%; overflow-x: auto;}
.mx-record-info .table-wrap table{width: 540px; margin-top: 10px; max-width: 540px;}
.mx-record-info .table-wrap table,
.mx-record-info .table-wrap table tr td {
font-size: 13px;
border: 1px solid #eeeff0;
border-collapse: collapse;
}
.mx-record-info .table-wrap table thead{background-color: #f6f7f8; color: #9d9fa4;}
.mx-record-info .table-wrap table tr{height: 35px;}
.etc-info{text-align: left;}
.etc-info a,
.etc-info a:hover {color: #4789e7; text-decoration: underline;}
.etc-info .info-text{position: relative; background-color: #f6f7f9; padding: 15px 15px 15px 33px; margin-top: 20px;}
.etc-info .info-text>svg{position: absolute; top: 19px; left: 15px; fill: #ee445f;}
@media only screen and (min-width:770px) and (max-width:1200px) {
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserver span,
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserip span {
font-size:12px;
padding: 7px 8px;
}
}
/**************************************************************************************************/
/*J.20211202.유료보안인증서 보안인증서 구매 **********************************************************/
.sub-domain.ssl {
color:#222428;
padding:80px 0px 120px;
position: relative;
background-color: #eeeff3;
}
.sub-domain.ssl .container .row {
max-width: 940px;
margin: auto;
}
.sub-domain.ssl p,
.sub-domain.ssl span { margin:0; padding:0; line-height: normal; }
.sub-domain.ssl p > i {
font-size: 25px;
transform: translateY(-4px);
margin-right: 3px;
}
.sub-domain.ssl .ssl-title { text-align: center; font-size: 30px; padding-bottom: 50px; }
.sub-domain.ssl .ssl-panel {
max-width: 440px;
background-color: #fff;
border-radius: 8px;
padding:56px 80px 60px;
margin:auto;
text-align: center;
margin-bottom: 100px;
}
.sub-domain.ssl .ssl-panel .digicert {
width: 140px;
}
.sub-domain.ssl .ssl-panel p.ssl-name {
font-size: 20px;
font-weight: bold;
padding-top: 26px;
}
.sub-domain.ssl .ssl-panel .coupon-wrap { padding:20px 0; }
.sub-domain.ssl .ssl-panel .common-selectbox > .bootstrap-select,
.sub-domain.ssl .ssl-panel .common-selectbox > .bootstrap-select .btn.btn-default,
.sub-domain.ssl .ssl-panel .common-selectbox > .bootstrap-select .btn.btn-default:hover,
.sub-domain.ssl .ssl-panel .common-selectbox > .bootstrap-select .btn.btn-default:active,
.sub-domain.ssl .ssl-panel .common-selectbox > .bootstrap-select .btn.btn-default.active {
max-width: 100%;
color: #696c71 !important;
}
.sub-domain.ssl .ssl-panel .common-selectbox button { max-width: 100%; }
.sub-domain.ssl .ssl-panel .common-selectbox { float: none; }
.sub-domain.ssl .ssl-panel .common-selectbox > .bootstrap-select .dropdown-toggle .bs-caret { display: block; }
.sub-domain.ssl .ssl-panel .payment-wrap { min-height: 115px; margin:40px auto; }
.sub-domain.ssl .ssl-panel .payment-plan .dropdown {
position: relative;
display: inline-block;
margin-bottom: 10px;
}
.ssl-domain-select > .bootstrap-select > .dropdown-menu,
.ssl-domain-select > .bootstrap-select > .dropdown-menu .inner.open { min-height: 0px !important; }
.ssl-domain-select .bootstrap-select .dropdown-toggle .caret { border-top-color:#696c71; }
.sub-domain.ssl .ssl-panel .payment-plan .btn-select {
background-color: transparent;
color: #4789e9;
padding: 0;
border: none;
cursor: pointer;
line-height: 1.2;
letter-spacing: -0.02em;
width: 160px;
}
.sub-domain.ssl .ssl-panel .payment-plan .btn-select:after {
display: inline-block;
position: relative;
margin-left: 10px;
margin-top: -1px;
content: ' ';
border-top: 5px solid #4789e9;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
top: -2px;
}
.sub-domain.ssl .ssl-panel .payment-plan .dropdown-content {
display: none;
position: absolute;
top: 50%; left: 0;
transform: translateY(-50%);
background-color: #fbfbfb;
border: 1px solid #797f86;
min-width: 155px;
z-index: 1;
}
.sub-domain.ssl .ssl-panel .payment-plan .dropdown-content li {
display: block;
width: 100%;
padding: 0 10px;
vertical-align: middle;
}
.sub-domain.ssl .ssl-panel .payment-plan .dropdown-content li + li {
margin-left: 0;
border-top: 1px solid #797f86;
}
.sub-domain.ssl .ssl-panel .payment-plan .dropdown-content a {
color: black;
padding: 8px 16px;
text-decoration: none;
display: block;
}
.sub-domain.ssl .ssl-panel .payment-plan .dropdown-content li.select a { color: #4789e9; }
.sub-domain.ssl .ssl-panel .payment-plan strong,
.sub-domain.ssl .ssl-panel .payment-plan b { font-size: 35px; }
.sub-domain.ssl .ssl-panel .payment-plan b { font-weight: normal; }
.sub-domain.ssl .ssl-panel .payment-plan .notdiscount { color:#b1b3b7; font-size: 20px; text-decoration: line-through; }
.sub-domain.ssl .ssl-panel .btn-box {
width: 100%;
padding-top: 30px;
}
.sub-domain.ssl .ssl-panel .btn-box a {
background-color: #4789e7;
color:#fff;
font-size: 16px;
border-radius: 3px;
text-align: center;
padding:14px 0px;
display: inline-block;
width: 100%;
}
.sub-domain.ssl .ssl-panel .ssl-domain-select label {
text-align: center;
display: block;
color:#696c71;
font-weight: normal;
font-size: 14px;
}
.sub-domain.ssl .ssl-notice {
border-bottom: 1px solid #c7c7c7;
padding-bottom: 50px;
}
.sub-domain.ssl .ssl-notice p {
color:#8e9095;
font-size: 13px;
position: relative;
padding-left: 15px;
margin-bottom: 5px;
}
.sub-domain.ssl .ssl-notice .notice-num {
position: absolute;
left: 0;
}
.sub-domain.ssl .ssl-notice .ssl-notice-title,
.sub-domain.ssl .ssl-faq .ssl-faq-title {
font-size: 22px;
font-weight: bold;
color:#222428;
display: inline-block;
}
.sub-domain.ssl .ssl-notice .ssl-notice-title {
padding-bottom: 20px;
}
.sub-domain.ssl .ssl-faq .ssl-faq-title {
padding-top: 50px;
padding-bottom: 10px;
}
.sub-domain.ssl .ssl-faq .ssl-faq-list li {
border-bottom: 1px solid #dbdbdb;
}
.sub-domain.ssl .ssl-faq .ssl-faq-q {
font-size: 18px;
padding:20px 30px 20px 0px;
position: relative;
cursor: pointer;
}
.sub-domain.ssl .ssl-faq .ssl-faq-q .arrow-onoff {
position: absolute;
right: 0;
top: 20px;
}
.sub-domain.ssl .ssl-faq .ssl-faq-q .arrow-onoff svg {
fill: #696c71;
}
.sub-domain.ssl .ssl-faq .ssl-faq-q.on .arrow-onoff svg {
transform: rotate(180deg);
}
.sub-domain.ssl .ssl-faq .ssl-faq-a {
display: none;
padding-bottom: 20px;
color:#696c71;
}
.sub-domain.ssl .ssl-faq .ssl-faq-a p {
margin-bottom: 5px;
padding-left: 8px;
position: relative;
}
.sub-domain.ssl .ssl-faq .ssl-faq-a p:before {
content:'';
display: inline-block;
background-color: #696c71;
width: 2px;
height: 2px;
border-radius: 50%;
position: absolute;
left: 0;
top: 9px;
}
@media only screen and (max-width:992px) {
}
@media only screen and (min-width:768px) and (max-width:991px) {
.sub-domain.ssl { padding:50px 0px 80px !important; }
.sub-domain.ssl .row { margin:0px; }
.sub-domain.ssl .ssl-title {
font-size: 27px;
}
.sub-domain.ssl .ssl-panel {
padding: 40px 45px 50px;
}
.sub-domain.ssl .ssl-panel p.ssl-name {
font-size: 18px;
padding-top:15px;
}
.sub-domain.ssl .ssl-notice .ssl-notice-title,
.sub-domain.ssl .ssl-faq .ssl-faq-title {
font-size: 18px;
}
.sub-domain.ssl .ssl-panel .payment-wrap {
margin:40px auto;
}
.sub-domain.ssl .ssl-panel .payment-plan strong,
.sub-domain.ssl .ssl-panel .payment-plan b {
font-size: 32px;
}
.sub-domain.ssl .ssl-panel .payment-plan .notdiscount {
font-size: 14px;
}
.sub-domain.ssl .ssl-notice {
padding-bottom: 40px;
}
.sub-domain.ssl .ssl-notice p {
font-size: 14px;
margin-bottom: 8px;
}
.sub-domain.ssl .ssl-faq .ssl-faq-title {
padding-top: 40px;
}
.sub-domain.ssl .ssl-faq .ssl-faq-q {
font-size: 16px;
padding:15px 30px 15px 0px;
}
.sub-domain.ssl .ssl-faq .ssl-faq-q .arrow-onoff {
top: 15px;
}
.sub-domain.ssl .ssl-faq .ssl-faq-a {
font-size: 14px;
padding-bottom: 15px;
}
.sub-domain.ssl .ssl-faq .ssl-faq-a p { margin-bottom: 8px; }
.sub-domain.ssl .ssl-panel .digicert {
width: 116px;
}
}
/**************************************************************************************************/
/**************************************************************************************************/
/*upgrade******************************************************************************************/
.sub-upgrade {
/*font-family: 'Nanum Gothic',sans-serif;*/
background-color: #f3f4f9;
}
.sub-upgrade .sub-title .text h2 {
font-family: 'Noto Sans KR',sans-serif;margin-bottom: 23px;
}
.sub-upgrade .sub-title .text {
font-size: 14px !important; line-height: 1.8; letter-spacing: -0.03em; color:#878791 !important;
}
.sub-upgrade .content-box { padding-left: 0; padding-right: 0; background-color: inherit; text-align: center; }
.sub-upgrade .content-box > .sites-select-box {
max-width: 40%;
min-width: 260px;
position: relative;
display: inline-block;
margin: 35px auto 55px;
}
.sub-upgrade .content-box > .sites-select-box > label {
font-family: 'Noto Sans KR',sans-serif;
font-size: 15px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: -0.42px;
color: #696c71;
margin-bottom: 5px;
float: left;
}
.sub-upgrade .content-box > .sites-select-box > .sites-select {
float: left;
clear: both;
width: auto!important;
max-width: 100%;
}
.sub-upgrade .content-box > .sites-select-box > .sites-select .dropdown-toggle:focus,
.sub-upgrade .content-box > .sites-select-box > .sites-select > select.mobile-device:focus + .dropdown-toggle { outline: none!important; }
.sub-upgrade .content-box > .sites-select-box > .sites-select .dropdown-toggle .filter-option-inner-inner {
text-overflow: ellipsis;
white-space: nowrap;
}
.sub-upgrade .content-box > .sites-select-box > .sites-select > select + button.dropdown-toggle.btn-primary:hover,
.sub-upgrade .content-box > .sites-select-box > .sites-select > select + button.dropdown-toggle.btn-primary:active,
.sub-upgrade .content-box > .sites-select-box > .sites-select > select + button.dropdown-toggle.btn-primary:focus,
.sub-upgrade .content-box > .sites-select-box > .sites-select > select + button.dropdown-toggle.btn-primary {
font-family: 'Noto Sans KR',sans-serif;
font-size: 15px;
text-align: left;
line-height: 1.4;
color: #fff;
background-color: #4789e7;
min-width: 260px;
padding: 14px 15px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: none;
}
.sub-upgrade .content-box > .sites-select-box > .sites-select .dropdown-menu { padding: 0; }
.sub-upgrade .content-box > .sites-select-box > .sites-select .dropdown-menu > li + li { border-top: 1px solid #f1f1f1; }
.sub-upgrade .content-box > .sites-select-box > .sites-select .dropdown-menu > li > a { /*padding: 10px 14px;*/ text-align: left; }
.sub-upgrade .content-box > .sites-select-box > .sites-select .dropdown-menu > .active > a,
.sub-upgrade .content-box > .sites-select-box > .sites-select .dropdown-menu > .active > a:hover,
.sub-upgrade .content-box > .sites-select-box > .sites-select .dropdown-menu > .active > a:focus {
background-color: #fff;
color: #4789e7;
}
.sub-upgrade .sub-content { padding-bottom: 10px; text-align: center; }
.sub-upgrade .sub-content > ul {
display: flex;
justify-content: center;
}
.sub-upgrade .sub-content > ul > li {
letter-spacing: -0.03em;
color: #797f86;
padding: 30px 15px;
background-color:#fff;
vertical-align: top;
/*height: 440px;*/
height: 380px;
border: 1px solid #eff0f4;
position: relative;
border-radius: 8px;
/*flex: 1;*/
margin-right: 8px;
width:224px;
flex-basis: 224px;
}
.vat-str-modal,
.sub-upgrade .sub-content > ul > li > .vat-str { position:absolute; bottom:-35px; right:0px; color:#797f86; font-family: "Noto Sans KR"; font-weight: 300; font-size:12px;}
.vat-str-modal { bottom:20px; font-size:13px;}
.sub-upgrade .sub-content > ul > li:last-child {
margin-right: 0px;
}
.sub-upgrade .sub-content > ul > li .payment-name {
font-size: 20px;
color: #222428;
margin-bottom: 40px;
line-height: 1.2;
}
.sub-upgrade .sub-content > ul > li .payment-info {
font-size: 13px;
color: #696c71;
line-height: 1.54;
letter-spacing: -0.39px;
min-height: 80px;
word-break: keep-all;
}
.sub-upgrade .sub-content > ul > li .payment-info .planLK-detail-view {
color: #556274;
font-size: 12px;
border: 1px solid #e5e8eb;
padding: 1px 12px;
max-width: 90px;
margin: 15px auto 0;
cursor: pointer;
}
.sub-upgrade .sub-content > ul > li .payment-info .planLK-detail-view:hover,
.sub-upgrade .sub-content > ul > li .payment-info .planLK-detail-view:focus { text-decoration: underline; }
.sub-upgrade .sub-content > ul > li .payment-plan { line-height: 1.2; min-height: 85px; }
.sub-upgrade .sub-content > ul > li:nth-child(4) .payment-plan { padding-top: 25px; }
.sub-upgrade .sub-content > ul > li .payment-plan strong {
font-size: 27px;
font-weight: bold;
letter-spacing: normal;
color: #2d343e;
}
.sub-upgrade .sub-content > ul > li .payment-plan b {
font-size: 27px;
font-weight: bold;
letter-spacing: normal;
color: #2d343e;
}
.sub-upgrade .sub-content > ul > li .payment-plan .dropdown {
position: relative;
display: inline-block;
margin-bottom: 10px;
}
.sub-upgrade .sub-content > ul > li .payment-plan .btn-select {
background-color: transparent;
color: #4789e9;
padding: 0;
border: none;
cursor: pointer;
line-height: 1.2;
letter-spacing: -0.02em;
width: 155px;
}
.sub-upgrade .sub-content > ul > li .payment-plan .btn-select:after {
display: inline-block;
position: relative;
margin-left: 6px;
margin-top: -1px;
content: ' ';
border-top: 5px solid #4789e9;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
.sub-upgrade .sub-content > ul > li .payment-plan .dropdown-content {
display: none;
position: absolute;
top: 50%; left: 0;
transform: translateY(-50%);
background-color: #fbfbfb;
border: 1px solid #797f86;
min-width: 155px;
z-index: 1;
}
.sub-upgrade .sub-content > ul > li .payment-plan .dropdown-content li {
display: block;
width: 100%;
padding: 0 10px;
vertical-align: middle;
}
.sub-upgrade .sub-content > ul > li .payment-plan .dropdown-content li + li {
margin-left: 0;
border-top: 1px solid #797f86;
}
.sub-upgrade .sub-content > ul > li .payment-plan .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.sub-upgrade .sub-content > ul > li .payment-plan .dropdown-content > li:first-child > a { padding: 11px 16px 12px; }
.sub-upgrade .sub-content > ul > li .payment-plan .dropdown-content li.select a { color: #4789e9; }
.sub-upgrade .sub-content > ul > li .payment-plan span.pay-month { color:#b1b3b7; text-decoration: line-through; font-size: 14px; }
.sub-upgrade .sub-content > ul > li .payment-ssl { line-height: normal; margin-top: 25px; }
.sub-upgrade .sub-content > ul > li .payment-ssl span {
font-size: 12px;
color:#4789e7;
border:1px solid #4789e7;
border-radius: 20px;
padding: 2px 16px 3px;
line-height: normal;
}
.sub-upgrade .sub-content > ul > li .payment-ssl span .month {
border: none;
padding: 0px;
}
.sub-upgrade .sub-content > ul > li .payment-wrap { position: relative;height: 100%; }
.sub-upgrade .sub-content > ul > li .btn-box { position: absolute; bottom: 0px; width: 100%; padding:0px 15px; }
.sub-upgrade .sub-content > ul > li .payment-how { line-height: 1; }
.sub-upgrade .sub-content > ul > li .payment-how i { font-size:18px; cursor:pointer;}
.sub-upgrade .sub-content > ul > li.disabled > * { opacity: 0.6; cursor: default; }
.sub-upgrade .sub-content > ul > li.disabled .btn-select { pointer-events: none; }
.sub-upgrade .sub-content #select-quantity { display:none; }
.sub-upgrade .sub-content .btn.btn-primary.btn-apply {
background-color: #2d343e;
border: none;
padding: 16px 12px;
width: 100%;
}
.sub-upgrade .sub-content .btn.btn-primary.btn-apply.disabled {
pointer-events: auto;
cursor: pointer;
opacity: 0.3;
}
.sub-upgrade .sub-content .btn.btn-primary.btn-apply:hover {
background-color: #3c4451;
}
.sub-upgrade .plan-function .table-header { position: sticky; top: 55px; z-index: 10; background: rgba(244, 245, 249, 0.7); }
header.intro ~ .sub-upgrade .plan-function .table-header { top: 64px; }
.sub-upgrade .plan-function.en .table-header { max-width: 850px; margin: auto; }
.sub-upgrade .plan-function .table-header .tb-row { display: grid; grid-template-columns: 14fr repeat(4, 13fr); align-items: center; }
.sub-upgrade .plan-function.en .table-header .tb-row { grid-template-columns: 14fr repeat(3, 13fr); }
.sub-upgrade .plan-function .table-header .tb-row > div { display:table-cell;text-align: center; font-size: 15px; line-height: 1.5; padding:11px 0px; color:#222428; }
.sub-upgrade .plan-function.en .table-header .tb-row > div.plan-sm { display: none; }
.sub-upgrade .plan-function .table .tb-row[disabled] span,
.sub-upgrade .plan-function .table .tb-row[disabled] span + .explain-icon { color:#b1b3b7; }
.sub-upgrade .plan-function .table .tb-row[disabled] .cm-popover-info + .popover {opacity: 1;}
.sub-upgrade .plan-function .table .tb-row .explain-icon {fill: #4789e7; margin-left: 6px; transform: translateY(2px);}
.sub-upgrade .plan-function .table .tb-row .explain-icon.confirmadult + .popover { max-width: 285px; }
.sub-upgrade .plan-function .table .tb-row .explain-icon + .popover .popover-content { line-height: 1.5; word-break: keep-all; }
.toBeUpdated {color:#4790e7;}
.sub-upgrade .plan-function { padding-bottom: 15px; }
.sub-upgrade .plan-function .table { display: table; font-size: 13px; letter-spacing: -0.03em; color: #797f86; }
.sub-upgrade .plan-function.en .table { max-width: 850px; margin: auto; }
.sub-upgrade .plan-function .table > .tb-row { display: table-row; }
.sub-upgrade .plan-function .table > .tb-row > div { display: table-cell; padding: 7px 10px 7px 5px; }
.sub-upgrade .plan-function .table > .tb-row > div i.fa-question-circle { margin-left:5px;}
.sub-upgrade .plan-function .table > .tb-row:nth-child(1) { display: none; color: #3c4451; font-size: 15px; }
.sub-upgrade .plan-function .table > .tb-row:nth-child(1) > div { vertical-align: bottom; }
.sub-upgrade .plan-function .table > .tb-row:nth-child(n+2) > div { vertical-align: middle; }
.sub-upgrade .plan-function .table > .tb-row[disabled] > div:nth-child(1) { }
.sub-upgrade .plan-function .table > .tb-row > div:nth-child(1) { width: 14%; text-align: right; color: #556274; vertical-align: middle;}
.sub-upgrade .plan-function .table > .tb-row > div:nth-child(1n+2) {
font-family: 'Noto Sans KR';
width: 13%;
text-align: center;
border-bottom: 1px solid #e7e9ec;
vertical-align: middle;
}
.sub-upgrade .plan-function .table > .tb-row > div > .fa.fa-circle-o {
font-family: FontAwesome;
font-style: normal;
font-size: 22px;
color: #4790e7;
margin-top: 5px;
}
.sub-upgrade .plan-function .table > .tb-row .mobile-features {
width: 14% !important;
}
.sub-upgrade .plan-function .table > .tb-row .mobile-features,
.sub-upgrade .plan-function .table > .tb-row .upgrade-blocks,
.sub-upgrade .plan-function .table > .tb-row .delete-footer,
.sub-upgrade .plan-function .table > .tb-row .site-nickname { line-height:1.4;}
.sub-upgrade .plan-function .table > .tb-row .only-memberpage { width:12% !important;}
.sub-upgrade .plan-function .table > .tb-row > div > small { display: block; line-height: 1.2; font-size: 10px; opacity: 0.7; margin-top: 2px;}
.sub-upgrade .plan-function .table .point-color { color: #4790e7; font-weight: bold; }
.sub-upgrade .plan-function > small {
display: block;
margin-bottom: 70px;
font-size: 12px;
text-align: right;
color: #a3a8ad;
width:93%;
}
.sub-upgrade + .plan-qna { background-color: #fff; }
.plan-qna .sub-footer { padding-top: 40px; padding-bottom: 60px; }
.plan-qna .upgrade-support .panel {
font-size: 12px;
letter-spacing: -0.05em;
color: #a1a7af;
background-color: transparent;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.plan-qna .upgrade-support .panel-default { border: none; }
.plan-qna .upgrade-support .panel-default > .panel-heading { padding: 0; background-color: transparent; border: none; }
.plan-qna .upgrade-support .panel-title a:before {
float: left;
font-family: 'FontAwesome';
content: "\f107";
color: #3c4451;
font-size: 15px;
text-decoration: none;
margin-right : 20px;
}
.plan-qna .upgrade-support .panel-title a.collapsed:before { content: "\f106"; }
.plan-qna .upgrade-support .panel-title a,
.plan-qna .upgrade-support .panel-title a:hover,
.plan-qna .upgrade-support .panel-title a:focus {
font-size: 14px;
letter-spacing: -0.05em;
color: #556274;
text-decoration: none;
}
.plan-qna .upgrade-support .panel-collapse { padding-top: 5px; padding-left: 30px; line-height: 1.6; font-size:14px; }
.plan-qna .upgrade-support .panel-collapse a.upgrade-color { color:#4789e7;}
/* betaSM - gabia, SM plan hidden*/
.sub-upgrade.en .sub-content > ul > li[data-plan="SM"],
/*.sub-upgrade.en .plan-function .table > .tb-row > div:nth-child(1),*/
.sub-upgrade.en .plan-function .table > .tb-row > div:nth-child(4) {
display: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px){
/*.sub-upgrade .sub-content > ul > li { width: 23.333333%; }*/
}
@media only screen and (max-width:768px) {
.sub-page.sub-upgrade { padding-top: 0px !important; }
.sub-upgrade .sub-title .text h2 { font-size: 27px !important; }
.sub-upgrade .content-box > .sites-select-box > label,
.sub-upgrade .content-box .sub-title > .text { font-size: 14px !important;line-height: normal; }
.sub-upgrade .content-box > .sites-select-box { margin: 20px auto 50px !important; }
}
/**************************************************************************************************/
/**************************************************************************************************/
/*payment-state************************************************************************************/
.sub-payment-state .content-box { margin-top: 10%; padding: 90px 50px 80px; }
.sub-payment-state .sub-content table { width: 430px; margin:0 auto;}
.sub-payment-state .sub-content table tr:nth-child(4) td { border-bottom: 1px solid #dddddd; }
.sub-payment-state .sub-content table tr td:nth-child(1) { font-weight: bold; width:96px;vertical-align: middle; }
.sub-payment-state .sub-content table tr td:nth-child(2) { text-align: left; }
.sub-payment-state .sub-content table tr td { padding:10px;}
.sub-payment-state .sub-content table tr td .fa { font-size: 12px; }
.sub-payment-state .sub-content table { margin-bottom: 50px; }
.sub-payment-state .sub-content .btn-box li { display: inline-block; }
.sub-payment-state .sub-content .btn-box li + li { margin-left: 8px; }
.sub-payment-state .sub-content .btn { color: #fff; border: none; min-width: 145px; padding: 11px 12px; }
.sub-payment-state .sub-content .btn-home { background-color: #9a9fa5;}
.sub-payment-state .sub-content .btn-plan { background-color: #3c4451;}
.sub-payment-state .sub-content .btn-cancel { background-color: #e74747; }
@media only screen and (max-width:768px) {
.sub-payment-state .content-box { margin-top: 10%; padding: 90px 30px 80px; }
.sub-payment-state .sub-content table { margin:0 auto;}
.sub-payment-state .sub-content .btn {min-width: auto; padding:0;}
.sub-payment-state .sub-content .btn-box.land-box { margin-top: 30px; }
.sub-payment-state .sub-content .btn-box.land-box li:first-child { background-color: #3c4451;}
.sub-payment-state .sub-content .btn-box {
text-align: center;
margin: 0 auto;
}
.sub-payment-state .sub-content .btn-box li {
display: inline-block;
width: 46%;
padding: 11px 12px;
}
.sub-payment-state .sub-content .btn-box:not(.land-box) li:first-child {
background-color: #9a9fa5;
}
.sub-payment-state .sub-content .btn-box:not(.land-box) li + li {
margin-left: 11px;
background-color: #3c4451;
}
.sub-payment-state .sub-content .btn-box .cancel {
background-color: #e74747!important;
}
.sub-payment-state .sub-content .btn-box:has(.cancel) {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 7px;
width: 100%;
max-width: 430px;
}
.sub-payment-state .sub-content .btn-box:has(.cancel) li {
margin: 0!important;
}
.sub-payment-state .sub-content .btn-box:has(.cancel) li:first-of-type {
flex: 0 0 100%;
width: 100%;
max-width: 430px;
}
.sub-payment-state .sub-content .btn-box:has(.cancel) li:nth-of-type(2),
.sub-payment-state .sub-content .btn-box:has(.cancel) li:last-of-type {
flex: 1 1 0;
width: auto;
max-width: 210px;
min-width: 0;
}
}
@media only screen and (max-width:420px) {
.sub-payment-state .sub-content .btn-box:has(.cancel) li.eng .btn-plan { white-space: pre-line; line-height: 1.31; }
.sub-payment-state .sub-content .btn-box:has(.cancel) li.eng { padding: 4px 16px; vertical-align: 3.5px; height: 45.4px; }
}
/**************************************************************************************************/
/**************************************************************************************************/
/*plan*********************************************************************************************/
.sub-page.sub-plan,
.sub-page.sub-billing { background-color: #eef0f4; padding-top:40px;padding-bottom: 100px; }
.sub-page.sub-plan .container,
.sub-page.sub-billing .container { max-width: 946px; }
.sub-page .plan-wrapper { padding:0; }
.sub-page.sub-billing .content-box { padding:20px 30px 50px; }
.sub-page .plan-wrapper .breadcrumb { margin:0;margin-bottom: 40px; line-height: normal; }
.sub-page .plan-wrapper .breadcrumb li { font-size: 26px; color: #222428; line-height: 1.5; }
.sub-page .plan-wrapper .breadcrumb li p { color:#696c71; margin-top: 8px; font-size: 13px; margin-bottom: 0; }
.sub-page .plan-tab {
list-style: none;
padding: 0 30px;
margin: 0;
border-bottom: 1px solid #eff0f4;
background-color: #fff;
}
.sub-page .plan-tab li {
display: inline-block;
vertical-align: middle;
font-size: 14px;
text-align: center;
color: #b1b3b7;
margin-right: 2px;
position: relative;
}
.sub-page .plan-tab li:last-child { margin-right: 0px; }
.sub-page .plan-tab li.active:after { content:''; display:block; width:100%; height:2px; background-color:#4789e7; }
.sub-page .plan-tab li a { padding: 12px 15px; height: 42px; display: flex; align-items: center;}
.sub-page .plan-tab li.active a { color:#4789e7; }
.sub-plan .plan-list > li { padding: 20px 30px; background-color: #ffffff; margin-bottom: 10px; border: solid 1px #dfe1e3;border-radius: 3px;}
.sub-plan .plan-list > li.active { border:1px solid #4789E7; background-color:#fff; }
.sub-page.sub-plan .plan-mng-box { padding:0 30px 50px;background-color: #fff; }
.sub-plan .plan-site { position: relative; }
.sub-plan .plan-site > li { display:inline-block; vertical-align: middle; }
.sub-plan .plan-site > li.shot { position: relative; height:auto; min-height: 100px; overflow:hidden; border:1px solid #e5e8eb; }
.sub-plan .plan-site > li.shot img { width:190px; }
.sub-plan .plan-site > li.shot img + .over-box.none-site {
position: absolute; top: 50%; left: 50%;
width: 80%; margin: 0 auto;
text-align: center;
line-height: 5;
background-color: #fff;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.sub-plan .plan-site > li.info { padding-left: 30px; font-size: 13px; width: calc(100% - 437px); }
.sub-plan .plan-site > li.info > .summry { margin-bottom: 8px; }
.sub-plan .plan-site > li.info > .summry > label {
display: inline-block;
overflow: hidden;
background-color: #a1a7af;
font-size: 12px;
font-weight: 300;
line-height: 14px;
padding: 0 4px;
margin-right: 7px;
margin-bottom: 0;
vertical-align: middle;
border:1px solid transparent;
border-radius: 3px;
}
.sub-plan .plan-site > li.info .plan-btn-box .plan-btn.vbank_ready {
cursor: default;
}
.sub-plan .plan-site > li.info > .summry > label.label-primary { background-color: #4789e7; }
.sub-plan .plan-site > li.info > .summry > label.label-plan.BASIC { background-color: #00c82a;}
.sub-plan .plan-site > li.info > .summry > label.label-plan.SHOPPING,
.sub-plan .plan-site > li.info > .summry > label.label-plan.ECOMMERCE { background-color: #ee445f;}
.sub-plan .plan-site > li.info > .summry > label.label-plan.BUSINESS { background-color: #4789e7;}
.sub-plan .plan-site > li.info > .summry > label.label-plan.PARKING { background-color: #ddbcee;}
.sub-plan .plan-site > li.info > .summry > label.label-plan.FREE,
.sub-plan .plan-site > li.info .plan-btn-box .plan-btn.vbank_ready { background-color: #fff; border-color: #c0bfc4; color:#c0bfc4; }
.sub-plan .plan-site > li.info .plan-btn-box .plan-btn.auto-schedule-disabled { background-color: #fff; border-color: #d2d6db; color:#d2d6db; cursor: pointer; }
.sub-plan .plan-site > li.info > .summry > .site-name { font-size: 16px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: calc(100% - 100px);
color:#484b50;
vertical-align: middle;
}
.sub-plan .plan-site > li.info > .description p { margin: 0; }
.sub-plan .plan-site > li.info > .description .schedule .check-schedule.active .fa.off,
.sub-plan .plan-site > li.info > .description .schedule .check-schedule .fa.on { display: none; }
.sub-plan .plan-site > li.info > .description .schedule .check-schedule.active .fa.on,
.sub-plan .plan-site > li.info > .description .schedule .check-schedule .fa.off { display: inline-block; }
/*.sub-plan .plan-site > li.info > .description .schedule .check-schedule { font-size: 10px; margin-right: 0; padding: 1px 3px;} J.20210525.요금제결제관리페이지변경*/
.sub-plan .plan-site > li.info > .description .method { color:#696c71;line-height: normal;margin-bottom: 2px; }
.sub-plan .plan-site > li.info > .description .next-str { color:#b1b3b7;line-height: normal;}
.sub-plan .plan-site > li.info > .description .method-str,
.sub-plan .plan-site > li.info > .description .schedule-str { color:#696c71; line-height: normal; }
.sub-plan .plan-site > li.info > .description .next-date { min-width:115px; display:inline-block;}
.sub-plan .plan-site > li.info > .description .method { /*padding-right:20px;*/ }
.sub-plan .plan-site > li.info > .description .check-box {
background-color: transparent;
border: 1px solid #a1a7af;
padding:1px 4px;
font-size:10px;
border-radius: 10px;
font-weight: normal;
cursor:pointer;
}
.sub-plan .plan-site > li.info > .description .check-box .fa { color:#a1a7af;}
.sub-plan .plan-site > li.info > .description .check-box:hover,
.sub-plan .plan-site > li.info > .description .check-box.active { background-color: #2d343e; border: 1px solid #2d343e;}
.sub-plan .plan-site > li.info > .description .check-box:hover .fa,
.sub-plan .plan-site > li.info > .description .check-box.active .fa { color:#fff;}
.sub-plan .plan-site > li.info > .description .payment-auto { margin-top: 10px; }
.plan-switch {
position: relative;
display: inline-block;
width: 26px;
height: 14px;
border-radius: 7px;
cursor: pointer !important;
vertical-align: middle;
}
label.plan-switch { margin:0; margin-right: 8px; }
.plan-switch-label {
position: relative;
display: block;
height: inherit;
background: #b1b3b7;
border-radius: inherit;
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
-webkit-transition-property: opacity background;
-moz-transition-property: opacity background;
-o-transition-property: opacity background;
transition-property: opacity background;
}
.plan-switch-label:before, .plan-switch-label:after{
position: absolute;
top: 45%;
margin-top: -.4em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.plan-switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.plan-switch-input:checked ~ .plan-switch-label {
background: #4789E7;
}
.plan-switch-input:checked ~ .plan-switch-handle{
left: 14px;
}
.plan-switch-handle{
top: 2px;
left: 2px;
width: 10px;
height: 10px;
position: absolute;
background: #fff;
border-radius: 10px;
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
.plan-switch.active .plan-switch-input:checked ~ .plan-switch-handle{
left: 14px;
}
/*.sub-plan .plan-site > li.plan-btn-box { position: relative; }*/
.sub-plan .plan-site > li.info > .plan-more,
.sub-plan .plan-site > li.info > .plan-btn-box { position: absolute;top: 50%;transform: translateY(-50%);right:0; text-align: center; }
.sub-plan .plan-site > li.info .plan-more.open { z-index: 1; }
.sub-plan .plan-site > li.info > .plan-btn-box,
.sub-plan .remain-list-box .remain-list .plan-conn { right:40px; }
.sub-plan .plan-site > li.info .plan-more { display: inline-block;padding-bottom: 4px; cursor: pointer; }
.sub-plan .plan-site > li.info .plan-more svg { fill: #696c71;vertical-align: middle; }
.sub-plan .plan-site > li.info .plan-btn-box .plan-btn { /*사이트목록 요금제 버튼style*/
color:#4789e7;
font-size: 13px;
border-radius: 16px;
border: solid 1px #4789e7;
padding: 5px 14px 6px;
line-height: normal;
display: block;
margin-top: 10px;
cursor: pointer;
margin-right: 10px;
}
.sub-plan .remain-list-box .remain-list .plan-conn { /*보관중인 요금제 버튼style*/
color:#484b50;
font-size: 13px;
border-radius: 16px;
border: solid 1px #b1b3b7;
padding: 5px 14px 6px;
line-height: normal;
display: inline-block;
/* display: block; */
/* margin-top: 10px; */
/* width: 112px; */
cursor: pointer;
margin-right: 10px;
}
.sub-plan .plan-site > li.info .plan-btn-box .plan-btn:last-child { margin-bottom:0; }
/* .sub-plan .plan-site > li.info .plan-btn-box .plan-btn.extend, */
.sub-plan .plan-site > li.info .plan-btn-box .plan-btn.upgrade,
.sub-plan .remain-list-box .remain-list .plan-conn { color:#4789e7; border-color: #4789e7; }
.sub-plan .plan-site > li.info .plan-more .plan-more-box {
position: absolute;
background-color: #fff;
width: 180px;
border-radius: 3px;
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.15);
right: 0;
top: 25px;
z-index: 2;
display: none;
}
.sub-plan .plan-list .more-open .plan-site { z-index: 1; }
.sub-plan .plan-site > li.info .plan-more .plan-more-box.open { display: block; }
.sub-plan .plan-site > li.info .plan-more .plan-more-box ul { }
.sub-plan .plan-site > li.info .plan-more .plan-more-box li { text-align:left;padding: 9px 15px; line-height: normal;font-weight: normal; color:#696c71; cursor: pointer; }
.sub-plan .plan-site > li.info .plan-more .plan-more-box li:hover { background-color: #f3f4f5; }
.sub-plan .plan-site > li.info > .toolbar .btn,
.sub-plan .sub-content .plan-escape .btn {
color: #556274;
background-color: transparent;
border-color: #9ea1a5;
min-width: 80px;
padding: 4px 10px;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
font-size: 11px;
margin-right:5px;
}
.plan-change:hover,.plan-change:focus { text-decoration: none !important; }
.sub-plan .plan-site > li.info > .toolbar .btn:hover,
.sub-plan .plan-site > li.info > .toolbar .btn:focus,
.sub-plan .sub-content .plan-escape .btn:hover,
.sub-plan .sub-content .plan-escape .btn:focus {
text-decoration: none !important;
color: #556274;
border-color: #9ea1a5;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.sub-plan .plan-site > li.info > .toolbar .btn + .btn { /* margin-left: 5px; */ }
.sub-plan .plan-site > li.info > .toolbar .btn-coupon,
.sub-plan .plan-site > li.info > .toolbar .btn-coupon:hover,
.sub-plan .plan-site > li.info > .toolbar .btn-coupon:active,
.sub-plan .plan-site > li.info > .toolbar .btn-coupon:focus { color:#EE445F; background-color:#fff; border:1px solid #EE445F; }
/*요금제관리 백업페이지 css*/
.sub-plan.plan-ssl-page .plan-site > li.shot { position: absolute; min-height:100px; overflow:hidden; border:1px solid #e5e8eb; }
.sub-plan.plan-ssl-page .plan-site > li.info { padding-left: 220px; font-size: 13px; width: 100%; min-height: 110px; }
.sub-plan.plan-ssl-page .plan-site > li.info > .summry { border-bottom: 1px solid #dfe1e3; padding-bottom: 20px; }
.sub-plan.plan-ssl-page .plan-site > li.info > .summry.notplan {
border: none;
padding: 0px;
top: 50%;
transform: translateY(-50%);
position: absolute;
width: calc(100% - 220px);
}
.sub-plan.plan-ssl-page .plan-site > li.info > .description { /*margin-bottom: 22px;*/ padding-top: 25px; }
.sub-plan.plan-ssl-page .plan-site > li.info > .description p { margin: 0; line-height: normal; }
.sub-plan.plan-ssl-page .plan-site > li.info > .description .plan-subtitle { padding-bottom: 20px; position: relative; }
.sub-plan.plan-ssl-page .plan-site > li.info > .description p.des-subtitle { color:#484b50; font-size: 15px; font-weight: bold; }
.sub-plan.plan-ssl-page .plan-site > li.info > .description .payment-auto { margin-top: 10px; }
.sub-plan.plan-ssl-page .plan-site > li.info > .description .plan-info {
position: relative;
display: flex;
}
.sub-plan.plan-ssl-page .plan-site > li.info > .description .plan-info .plan-payment {
flex:auto;
}
.sub-plan.plan-ssl-page .plan-site > li.info:not(.notplan) .plan-btn-box {
position: relative;
right:unset;
top: unset;
align-items: center;
display: flex;
}
.sub-plan.plan-ssl-page .plan-site > li.info.notplan {
position: relative;
}
.sub-plan.plan-ssl-page .plan-site > li.info.notplan > .description {
padding: 0px;
}
.sub-plan.plan-ssl-page .plan-site > li.info .plan-more { position: absolute;top: 0;right:0; text-align: center; }
.sub-plan.plan-ssl-page .plan-site > li.info .plan-btn-box { position: absolute;top:0; right: 0; }
.sub-plan.plan-ssl-page .plan-site > li.info.notplan .plan-btn-box { position: absolute;transform: translateY(-50%);top: 50%; }
.sub-plan.plan-ssl-page .plan-site > li.info .plan-btn-box div { width: 120px;text-align: center; }
.sub-plan.plan-ssl-page .plan-site > li.info .plan-btn-box .plan-btn { display: block; margin-bottom: 10px; margin-right: 0px; }
.sub-plan .plan-site > li.info .domain-content {
border-top: 1px solid #dfe1e3;
padding-top: 25px;
margin-top: 25px;
}
.sub-plan .plan-site > li.info .domain-content .domain-list {
padding-top: 20px;
}
.sub-plan .plan-site > li.info .domain-content .domain-list li {
position: relative;
margin-bottom: 15px;
}
.sub-plan .plan-site > li.info .domain-content .domain-list li:last-child {
margin-bottom: 0px;
}
.sub-plan .plan-site > li.info .domain-content .domain-list li p {
padding-left: 13px;
color:#696c71;
}
.sub-plan .plan-site > li.info .domain-content .domain-list li .domain-name:before {
content:'';
display: inline-block;
background-color: #696c71;
width: 4px;
height: 4px;
border-radius: 50%;
position: absolute;
left: 0;
top: 7px;
}
.sub-plan .plan-site > li.info .domain-content .domain-list li .domain-info {
color:#b1b3b7;
}
.sub-plan .plan-site > li.info .domain-content .domain-list li .domain-info.not-ssl {
color:#ee445f;
}
.sub-plan .plan-site > li.info .domain-content .domain-list .domain-btn {
width: 120px;
color:#4789e7;
border: 1px solid #4789e7;
border-radius: 16px;
text-align: center;
padding: 3px 0px;
position: absolute;
top: 0;
right: 0;
}
.sub-plan .plan-site > li.info .domain-content .domain-coupon {
background-color: #f5f9fe;
padding: 10px 18px;
border-radius: 3px;
border-left: 3px solid #4789e7;
position: relative;
margin-top: 20px;
}
.sub-plan .plan-site > li.info .domain-content .domain-coupon p { display: inline-block; color:#484b50;font-size: 13px; }
.sub-plan .plan-site > li.info .domain-content .domain-coupon p.coupon-title { font-weight: bold; padding-right: 40px; }
.sub-plan .plan-site > li.info .domain-content .domain-coupon p.coupon-day { }
.sub-plan .plan-site > li.info .domain-content .domain-coupon p.coupon-day > span { color:#b1b3b7; }
.sub-plan .plan-site > li.info .domain-content .domain-coupon p.coupon-btn { color:#4789e7; position: absolute; right: 18px; }
.sub-plan .plan-site > li.info .domain-content .domain-coupon p.coupon-btn svg { fill:#4789e7; margin-left: 3px; }
@media only screen and (max-width:992px) {
.sub-plan .plan-site > li.info .domain-content .domain-coupon p.coupon-day { display: block; }
.sub-plan .plan-site > li.info .domain-content .domain-coupon p.coupon-btn { bottom: 10px; }
.sub-plan .plan-site > li.info > .summry.notplan > .site-name { width: calc(100% - 60px);padding-right: 130px; }
}
@media only screen and (max-width:767px) {
.sub-domain.index .list-item .display-flex .ns-notice {padding: 24px 20px;}
.sub-domain.index .display-flex .list-title + div > p,
.sub-domain.index .display-flex .ns-notice + p {padding : 20px 15px 0 15px;}
.sub-domain.index .display-flex .list-title + div > p + .dmnotice-wrap,
.sub-domain.index .display-flex .ns-notice + p + .dmnotice-wrap {padding: 10px 15px 20px 15px;}
.sub-plan.plan-ssl-page .plan-site > li.info { padding-left: 0px; }
.sub-plan.plan-ssl-page .plan-site > li.info > .description {
padding-top: 20px;
}
.sub-plan.plan-ssl-page .plan-site > li.info > .summry,
.sub-plan.plan-ssl-page .plan-site > li.info > .description .plan-subtitle {
padding-bottom: 15px;
}
.sub-plan.plan-ssl-page .plan-site > li.info > .description .plan-info { display: block; }
.sub-plan.plan-ssl-page .plan-site > li.info .plan-btn-box { position: relative; display: flex; padding-top: 20px; }
.sub-plan.plan-ssl-page .plan-site > li.info .plan-btn-box .plan-btn { right: auto; flex: auto;width: auto;margin-bottom: 0px; }
.sub-plan.plan-ssl-page .plan-site > li.info .plan-btn-box .plan-btn { margin-right: 10px; }
.sub-plan.plan-ssl-page .plan-site > li.info .plan-btn-box .plan-btn:last-child { margin-right: 0px; }
.sub-plan .plan-site > li.info .domain-content .domain-list .domain-btn {
position: relative;
width: 100%;
margin-top: 10px;
}
.sub-plan .plan-site > li.info .domain-content .domain-coupon p.coupon-title { padding:0px; margin-bottom: 5px; }
.sub-plan .plan-site > li.info .domain-content .domain-coupon p.coupon-day > span { display: block; }
.sub-plan .plan-site > li.info .domain-content .domain-coupon p { font-size: 14px; }
.sub-plan .plan-site > li.info { min-height: 50px; }
.sub-plan .plan-site > li.info > .summry.notplan {
width: 100%;
}
.sub-plan.plan-ssl-page .plan-site > li.info > .summry.notplan > .site-name {padding-right: 0px; }
.sub-plan.plan-ssl-page .plan-site > li.info > .summry.notplan,
.sub-plan.plan-ssl-page .plan-site > li.info.notplan .plan-btn-box {
position: relative;
transform: unset;
top: auto;
}
}
.sub-plan .content-title { font-size: 14px; padding-bottom:15px; padding-top:40px;margin:0; color:#484b50; }
.sub-plan .remain-list-box li { border:solid 1px #dfe1e3;border-radius: 3px; margin-bottom: 10px; color:#696c71; }
.sub-plan .remain-list-box li:last-child { margin-bottom: 0px; }
.sub-plan .remain-list-box li.no-remain-plan { text-align: center;border: solid 1px #eeeff0;padding:59px 0px 60px; color:#b1b3b7; line-height: normal; }
.sub-plan .remain-list-box li div { display:inline-block; vertical-align: middle; }
.sub-plan .remain-list-box li p { margin: 0; }
.sub-plan .remain-list-box .remain-list .plan-name { width: 184px; }
.sub-plan .remain-list-box .remain-list .plan-name span { padding-left: 45px;font-size: 15px;font-weight: 500; }
.sub-plan .remain-list-box .remain-list .plan-date { padding: 15px 0px; width: calc(100% - 355px); }
.sub-plan .remain-list-box .remain-list .plan-conn { margin:0; }
.sub-plan .remain-list-box li.BUSINESS { border-left: solid 6px #00bff999; }
.sub-plan .remain-list-box li.BUSINESS .plan-name span { color: #00bff9; }
.sub-plan .remain-list-box li.BASIC { border-left: solid 6px #4ac27a99 }
.sub-plan .remain-list-box li.BASIC .plan-name span { color: #4ac27a; }
.sub-plan .remain-list-box li.SHOPPING,
.sub-plan .remain-list-box li.ECOMMERCE { border-left: solid 6px #f55d5599; }
.sub-plan .remain-list-box li.SHOPPING .plan-name span,
.sub-plan .remain-list-box li.ECOMMERCE .plan-name span { color: #f55d55; }
.sub-billing .sub-content .billing-list { width: 100%; }
.sub-billing .sub-content .billing-list::-webkit-scrollbar {
width: 8px;
height: 8px;
border: 5px solid #f3f4f5;
}
.sub-billing .sub-content .billing-list::-webkit-scrollbar-thumb {
height: 50px;
width: 50px;
background: #d1d3d5;
-webkit-box-shadow: inset 0 0 4px rgb(0 0 0 / 10%);
border: 0;
border-radius: unset;
}
.sub-billing .sub-content .paging {
text-align: center;
padding: 30px;
padding-bottom: 0px;
background: #fff;
color: #000;
font-weight: 300;
font-size: 13px;
margin-top: 0;
}
.sub-billing .sub-content .paging a,
.sub-billing .sub-content .paging span,
.sub-billing .sub-content .paging strong {
width: 30px;
height: 30px;
display: inline-block;
margin: 0 2px;
color: #696c71;
font-weight: normal;
line-height: 30px;
background: #f6f8f9;
color: #b1b3b7;
}
.sub-billing .sub-content .paging strong {
color: #4789e7;
border: 1px solid #4789e7;
background: #fff;
vertical-align: top;
}
.sub-billing .sub-content .paging svg {
fill: #b1b3b7;
}
.sub-billing .sub-content .paging [disabled] svg {
/*display: none;*/
fill: #d1d3d5;
}
.sub-billing .sub-content .table { width:886px; max-width: unset; margin: 0px; border: none; word-break: break-all; /*border: 1px solid #dee0e2;*/ }
.sub-billing .sub-content table tr td { color:#696c71; }
.sub-billing .sub-content table tr td,
.sub-plan .sub-content .plan-escape tr td { vertical-align: middle !important; }
.sub-billing .sub-content table tr th,
.sub-plan .sub-content .plan-escape tr th {
font-size: 13px;
text-align: left;
color: #696c71;
background-color: #f7f8f9;
border: 1px solid #dee0e2;
font-weight: normal;
padding: 11px 15px;
vertical-align: middle;
}
.sub-plan .sub-content .plan-escape tr th + th { border-left: 1px solid #fff; }
.sub-plan .sub-content .plan-escape tr td { border: 1px solid #eff0f4; }
.sub-billing .sub-content .billing-ssl table tr td:nth-child(1) {
word-break: break-all;
}
.sub-billing .sub-content table tr td.text-center { text-align:left; padding:8px 15px; letter-spacing: -0.32px; }
.sub-billing .sub-content table tr th,
.sub-billing .sub-content table tr td { border: 1px solid #E5E7E9 !important; }
.sub-billing .sub-content #site-select { margin-bottom: 15px; }
.sub-billing .sub-content #site-select a,
.sub-billing .sub-content #site-select a:hover,
.sub-billing .sub-content #site-select a:focus {
font-size: 15px;
text-decoration: none;
color: #4789e7;
display: inline-block;
/*padding: 2px 10px 3px;*/
min-width: 140px;
width: 140px;
-webkit-box-shadow: none;
box-shadow: none;
font-weight: normal;
}
.sub-billing .sub-content #site-select svg {
/*position: absolute;
top: 1px;
right: 0px;*/
fill:#4789e7;
transform: translateY(2px);
}
.sub-billing .sub-content #site-select a .site-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
/*padding-right: 20px;*/
max-width: 110px;
}
.sub-billing .sub-content #site-select .list-wrap,
.billmanage #msite-select .mlist-wrap {
width: 100%;
min-width: 140px;
margin-top: 1px;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
border: 1px solid #e5e8eb;
max-height: 390px;
overflow-y: auto;
padding-bottom: 0;
border: 1px solid #e5e8eb;
-moz-border-radius: 0;
border-radius: 0;
padding-top: 0;
z-index: 1;
}
.sub-billing .sub-content #site-select .list-wrap li,
.billmanage #msite-select .mlist-wrap li {
padding: 8px 15px;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
}
.sub-billing .sub-content #site-select .list-wrap li.active,
.sub-billing .sub-content #site-select .list-wrap li:hover,
.sub-billing .sub-content #site-select .list-wrap li:focus,
.billmanage #msite-select .mlist-wrap li.active,
.billmanage #msite-select .mlist-wrap li:hover,
.billmanage #msite-select .mlist-wrap li:focus {
background-color: #eeeff1;
}
.sub-billing .sub-content table { color: #a1a7af; }
.sub-billing .sub-content table tr.active td { color: #2d343e; background-color: transparent; font-weight: bold; }
.sub-billing .sub-content table tr.active td.state { color: #4789e7; }
.sub-billing .sub-content table tr.empty-data td { font-size: 13px; color: #2d343e; line-height: 5; color: #b1b3b7; }
.sub.mobile-title {
width: 100%;
padding: 12px 0px;
font-size: 24px;
position: relative;
background-color: rgb(255,255,255);
overflow: hidden;
display: none;
color: #222428;
}
.billing-tab {
float: left;
line-height: normal;
transform: translateY(10px);
}
.billing-tab span {
color:#b1b3b7;
}
.billing-tab span.active {
color:#4789e7;
}
.billing-tab span:first-child:after {
content:'';
display: inline-block;
width: 1px;
height:15px;
background-color:#cfcfcf;
margin:0px 6px 0px 10px;
transform: translateY(3px);
}
.card-slide-item.selected { border-color: #222428; transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.2); }
.card-slide-item.add-new-card:hover { background: #ebebeb; border-color: #a0a0a0; }
/* billing card 추가 ******************************************************************************/
.sub-page .plan-tab li.card_add {display: none;}
.card_list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
row-gap: 15px;
column-gap: 16px;
}
.sub-page .cards_mng .plan-tab li.card_add {
float: right;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
align-items: center;
height: 45px;
cursor: pointer;
}
.sub-page .cards_mng .plan-tab li.card_add svg { fill: #4789e7; margin-right: 7px;}
.sub-page .cards_mng .plan-tab li.card_add span { color:#4789E7;}
.sub-page .cards_mng .plan-tab li.card_add:hover svg { fill: #9BC5FF;}
.sub-page .cards_mng .plan-tab li.card_add:hover span {color: #9BC5FF;}
.sub-page .cards_mng .plan-tab li.card_add.is-disabled,
.sub-page .cards_mng .plan-tab li.card_add[aria-disabled="true"] {
cursor: default;
}
.sub-page .cards_mng .plan-tab li.card_add.is-disabled svg,
.sub-page .cards_mng .plan-tab li.card_add[aria-disabled="true"] svg {
fill: #D2D6DB;
}
.sub-page .cards_mng .plan-tab li.card_add.is-disabled span,
.sub-page .cards_mng .plan-tab li.card_add[aria-disabled="true"] span {
color: #D2D6DB;
}
.sub-page .cards_mng .plan-tab li.card_add.is-disabled:hover svg,
.sub-page .cards_mng .plan-tab li.card_add[aria-disabled="true"]:hover svg {
fill: #D2D6DB;
}
.sub-page .cards_mng .plan-tab li.card_add.is-disabled:hover span,
.sub-page .cards_mng .plan-tab li.card_add[aria-disabled="true"]:hover span {
color: #D2D6DB;
}
.empty_content.card_list {grid-template-columns: 1fr;}
.sub-page.sub-billing .cards_mng .content-box {padding: 40px 30px;}
.empty_content.card_list .card_content {
margin-top: 40px;
margin-bottom: 225px;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.empty_content.card_list .card_content span { color: #b1b3b7; font-size:14px; }
.card_list .card_item {
box-sizing: border-box;
border: 1px solid #e5e7e9;
border-radius: 15px;
padding: 20px 15px;
display: flex;
flex-direction: column;
gap: 0;
min-height: 150px;
height: 150px;
position: relative;
cursor: pointer;
}
.card_list .card_item.expired { background-color: #fafafa; border: 1px solid #e5e7e9; color: #d2d6db; }
.card_list .card_item.expired .card_mask::before { background-color : #d2d6db; box-shadow: 8px 0px 0 #d2d6db, 16px 0 0 #d2d6db, 24px 0 0 #d2d6db; }
.card_list .card_item.expired .card_actions .cl-dashboard-button-box[data-func="EditCard"] { display: none; }
.card_list .card_actions.expire .card-delete-button svg { fill : #b1b3b7;}
.card_list .card_item::after {
content: '';
position: absolute;
inset: -1px;
border: 1px solid #4789e7;
border-radius: 15px;
pointer-events: none;
opacity: 0;
}
.card_list .card_item.active::after {
opacity: 1;
}
.card_list .card_head {
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between;
position: relative;
padding-right: 48px;
}
.card_list .card_default {
flex: 0 0 auto;
}
.card_list .card_title {
flex: 1 1 auto;
min-width: 0;
}
.card_list .card_nickname {
display: block;
font-size: 16px;
font-weight: 500;
color: #222428;
line-height: 1.4;
}
.card_list .card_badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
height: 18px;
border: 1px solid #4789e7;
border-radius: 10px;
font-size: 11px;
width: 34px;
color: #4789e7;
}
.card_list .card_badge.is-en {
width: auto;
min-width: 34px;
padding: 0 8px;
white-space: nowrap;
}
.card_list .card_item.expired-default .card_head {
padding-right: 88px;
}
.card_list .card_item.expired-default .card_badge {
right: 51px;
}
.card_list .card_expired_badge {
display: inline-flex;
align-items: center;
gap: 3px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
color: #ee445f;
font-size: 12px;
line-height: 1;
}
.card_list .card_expired_icon {
width: 16px;
height: 16px;
display: block;
fill: #ee445f;
}
.expired-card-select-notice-modal .modal-dialog {
width: 560px;
max-width: calc(100% - 32px);
}
@media only screen and (min-width:768px) {
.modal-default.expired-card-select-notice-modal .modal-dialog.cl-cmmodal.expired-card-select-notice-dialog {
width: 560px;
max-width: 560px;
}
.modal-default.expired-card-select-notice-modal.card-limit-notice-modal .modal-dialog.cl-cmmodal.expired-card-select-notice-dialog {
width: 580px;
max-width: 580px;
}
}
.expired-card-select-notice-modal .modal-content {
min-height: 308px;
border-radius: 0;
}
.expired-card-select-notice-modal .modal-body {
padding: 54px 60px 0;
text-align: center;
}
.expired-card-select-notice-modal .modal-title {
margin: 0 0 44px;
font-size: 24px;
font-weight: 500;
line-height: 1.2;
color: #25282b;
}
.expired-card-select-notice-modal .expired-card-select-notice-message {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: #777d86;
}
.expired-card-select-notice-modal .modal-footer {
padding: 38px 0 48px;
text-align: center;
border-top: 0;
}
.expired-card-select-notice-modal .modal-footer .btn-default {
display: none;
}
.expired-card-select-notice-modal .modal-footer .btn-primary {
width: 250px;
height: 50px;
margin: 0;
border: 0;
border-radius: 3px;
background-color: #4a86e8;
font-size: 14px;
font-weight: 500;
}
.card_list .card_info {
display: flex;
flex-direction: column;
flex: 1 1 auto;
margin-left: 30px;
padding-top: 20px;
}
.card_list .card_number {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
font-size: 28px;
line-height: 1;
color: #7b8087;
}
.card_list .card_last {
font-size: 13px;
color: #696c71;
}
.card_list .card_name {
font-size: 26px;
font-weight: 500;
letter-spacing: -0.02em;
color: #6d7278;
}
.card_list .card_mask {
display: inline-flex;
align-items: center;
flex: 0 0 29px;
width: 29px;
min-width: 29px;
justify-content: flex-start;
}
.card_list .card_mask::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #696c71;
box-shadow: 8px 0px 0 #696c71, 16px 0 0 #696c71, 24px 0 0 #696c71;
}
.card_list .card_footer {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.card_list .card_exp {
font-size: 12px;
color: #696c71;
}
.card_list .card_exp_label { margin-right: 5px; }
.card_list .card_actions {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 0 0 auto;
}
.card_list .card_actions .cl-dashboard-button-box[data-func="DeleteCard"] {
margin-left: 8px;
}
.card_list .card_actions .cl-dashboard-button-box {
width: 32px;
height: 32px;
display: flex;
flex-direction: row;
align-items: center;
}
.card_list .card_actions .cl-dashboard-button {
--cl-dashboard-button-width: 20px;
--cl-dashboard-button-height: 20px;
min-width: 20px;
padding: 0;
border: 0;
background: transparent;
color: #b1b3b7;
font-size: 0;
position: relative;
margin-right: 0;
}
.card_list .card_actions .cl-dashboard-button:not(.card-delete-button):hover::before {
background-color: #4789E7;
}
.card_list .card_actions .cl-dashboard-button.card-delete-button:hover svg {
fill: #EE445F ;
}
.card_list .card_actions .cl-dashboard-button:not(.card-delete-button)::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
transform: translate(-50%, -50%);
background-color: #b1b3b7;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.card_list .card_actions .card-delete-button {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
}
.card_list .card_actions .card-delete-button svg {
display: block;
fill: #b1b3b7;
width: 18px;
height: 18px;
}
.card_list .btn-delete{
border: 1px solid #e7c3c3;
background: #fff;
color: #d64545;
border-radius: 8px;
padding: 8px 10px;
cursor:pointer;
}
/* billing card list renewal */
.sub-page.sub-billing .cards_mng .content-box { padding: 0 30px 28px; }
.cards_mng .card_list {
position: relative;
display: block;
width: 100%;
border-top: 1px solid #eeeff0;
}
.cards_mng .card_list .card_item::after { display: none; }
.cards_mng .card_list .card_item.active {
border-color: #eeeff0;
background: #f3f8ff;
}
.cards_mng .card_list .card_head {
display: block;
padding: 0;
}
.cards_mng .card_list .card_default {
position: absolute;
left: 17px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
}
.cards_mng .card_list .card_default .cl-dashboard-circlebox {
position: relative;
width: 18px;
height: 18px;
}
.cards_mng .card_list .card_default .cl-dashboard-circlebox::after {
display: none;
content: attr(data-label);
position: absolute;
left: 91px;
top: 50%;
transform: translateY(-50%);
width: 125px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #222428;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
pointer-events: none;
}
.cards_mng .card_list .card_default .cl-dashboard-circle-text {
position: absolute;
left: 126px;
top: 50%;
transform: translateY(4px);
width: 180px;
margin-left: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #222428;
font-size: 13px;
font-weight: 500;
line-height: 18px;
pointer-events: none;
}
@media only screen and (max-width:767px) {
.card_list {
row-gap: 10px;
}
.card_list .card_item {
width: 100%;
}
.sub-page .cards_mng .plan-tab li.card_add {
margin-left: auto;
margin-right: 0;
padding: 0 10px;
}
#billingCardModalRoot .modal-default .modal-dialog.cl-cmmodal.cover.w560,
#billingCardModalRoot .modal-default .modal-dialog.cl-cmmodal.w560 {
max-width: 100%;
}
}
@media only screen and (min-width:768px) and (max-width:991px) {
.card_list {
grid-template-columns: repeat(2, 1fr);
}
}
/* billing card list flex alignment */
.sub-page.sub-billing .cards_mng .content-box { padding: 0 30px 28px; }
.cards_mng .card_list_summary {
display: flex;
align-items: center;
margin: 0;
font-size: 14px;
font-weight: 500;
color: #222428;
padding: 30px 0 15px 0;
}
.cards_mng .card_list_summary_count {
font-size:12px;
margin-left: 10px;
font-weight: normal;
}
.cards_mng .card_list_summary_current {
color: #4789e7;
}
.cards_mng .card_list_summary_total {
color: #b1b3b7;
}
.cards_mng .card_list {
display: block;
width: 100%;
border-top: 1px solid #eeeff0;
}
.cards_mng .card_list:not(.empty_content) .card_item {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 15px;
min-height: 70px;
height: 70px;
padding: 0 10px 0 15px;
border: 0;
border-bottom: 1px solid #e5e7e9;
border-radius: 0;
background: #ffffff;
color: #222428;
cursor: default;
}
.cards_mng .card_list:not(.empty_content) .card_item.active {
background: #f0f7ff;
}
.cards_mng .card_list:not(.empty_content) .card_item:not(.active):not(.disabled):not(.is-disabled):not(.expired):not([aria-disabled="true"]):hover {
background-color: #fafafa;
}
.cards_mng .card_list:not(.empty_content) .card_item.expired {
background-color: #f4f5f9;
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
color: #b1b3b7;
}
.cards_mng .card_list .card_head {
display: flex;
align-items: center;
justify-content: flex-start;
flex: 0 0 auto;
min-width: 0;
gap: 0;
padding: 0;
}
.cards_mng .card_list .card_default {
position: static;
left: auto;
top: auto;
transform: none;
flex: 0 0 10px;
width: 18px;
height: 18px;
margin-right: 10px;
}
.cards_mng .card_list .card_default .cl-dashboard-circlebox {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
}
.cards_mng .card_list .card_default .cl-dashboard-circle-label,
.cards_mng .card_list .card_default .cl-dashboard-circlesvg-box {
width: 18px;
height: 18px;
}
.cards_mng .card_list .card_default .cl-dashboard-circlesvg-box svg.active {
left: 1px;
}
.cards_mng .card_list .card_default .cl-dashboard-circlebox::after,
.cards_mng .card_list .card_default .cl-dashboard-circle-text {
display: none;
}
.cards_mng .card_list .card_item.expired .card_default .cl-dashboard-circlebox {
cursor: not-allowed;
pointer-events: none;
}
.cards_mng .card_list .card_item.expired .card_default .cl-dashboard-circlesvg-box {
border: 1px solid #dbdcdf;
border-radius: 50%;
background-color: #eeeff3;
}
.cards_mng .card_list .card_item.expired .card_default .cl-dashboard-circlesvg-box svg {
opacity: 0;
}
.cards_mng .card_list .card_item.expired .card_default .cl-dashboard-circle-input {
cursor: not-allowed;
}
.cards_mng .card_list .card_visual {
position: relative;
flex: 0 0 60px;
width: 60px;
height: 44px;
margin-right: 15px;
border-radius: 4px;
overflow: hidden;
}
.cards_mng .card_list .card_item.expired .card_visual {
opacity: 0.6;
}
.cards_mng .card_list .card_visual.card-visual-mastercard {
background-color: #0061a8;
}
.cards_mng .card_list .card_visual.card-visual-visa {
background-color: #191278;
}
.cards_mng .card_list .card_visual.card-visual-visaelectron {
background-color: #191278;
}
.cards_mng .card_list .card_visual.card-visual-maestro {
background-color: #174160;
}
.cards_mng .card_list .card_visual.card-visual-amex {
background-color: #a6bbe1;
}
.cards_mng .card_list .card_visual.card-visual-discover {
background-color: #3d392e;
}
.cards_mng .card_list .card_visual.card-visual-dinersclub {
background-color: #8baeae;
}
.cards_mng .card_list .card_visual.card-visual-dankort {
background-color: #0055c7;
}
.cards_mng .card_list .card_visual.card-visual-jcb {
background-color: #f8a61b;
}
.cards_mng .card_list .card_visual:before {
content: " ";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: inherit;
background-color: transparent !important;
opacity: 1;
pointer-events: none;
background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 15% 80%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 15% 80%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), linear-gradient(-25deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
}
.cards_mng .card_list .card_visual .jp-card-logo {
position: absolute;
right: 7px;
bottom: 5px;
display: block;
width: auto;
height: auto;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
color: transparent;
font-size: 0;
font-style: normal;
line-height: 1;
opacity: 1;
text-shadow: none;
pointer-events: none;
z-index: 1;
}
.cards_mng .card_list .card_visual .jp-card-logo::before,
.cards_mng .card_list .card_visual .jp-card-logo::after {
content: none;
display: none;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-amex::before,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-amex::after,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-discover::before,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-discover::after,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dinersclub::before,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dinersclub::after,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-visaelectron::before,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-visaelectron::after,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort .dk::before,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort .dk::after,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort .d::before,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort .k::before,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort .k::after {
content: "";
display: block;
}
.cards_mng .card_list .card_visual .jp-card-logo svg {
position: relative;
display: block;
z-index: 1;
}
.cards_mng .card_list .card_visual .jp-card-visa svg {
width: 22px;
height: 7px;
}
.cards_mng .card_list .card_visual .jp-card-mastercard svg {
width: 20px;
height: 13px;
}
.cards_mng .card_list .card_visual .jp-card-maestro svg {
width: 20px;
height: 13px;
}
.cards_mng .card_list .card_visual .jp-card-jcb svg {
width: 18px;
height: 14px;
}
.cards_mng .card_list .card_visual .jp-card-discover svg {
width: 19px;
height: 12px;
}
.cards_mng .card_list .card_visual .jp-card-dinersclub svg {
width: 30px;
height: 8px;
}
.cards_mng .card_list .card_visual .jp-card-dankort svg {
width: 20px;
height: 12px;
}
.cards_mng .card_list .card_visual .jp-card-amex svg {
width: 18px;
height: 18px;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-visaelectron {
width: 28px;
height: 15px;
padding-top: 4px;
background: #fff;
color: #1a1876;
font-size: 8px;
font-weight: 700;
line-height: 1;
text-align: center;
text-transform: uppercase;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-visaelectron::before,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-visaelectron::after {
position: absolute;
left: 0;
width: 100%;
height: 3px;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-visaelectron::before {
top: 0;
background: #1a1876;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-visaelectron::after {
bottom: 0;
background: #e79800;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-visaelectron .elec {
margin-top: -1px;
font-size: 5px;
text-transform: none;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-visaelectron {
width: auto;
height: auto;
padding: 0;
background: transparent;
color: transparent;
font-size: 0;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-visaelectron::before,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-visaelectron::after {
content: none;
display: none;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-visaelectron svg {
width: 22px;
height: 10px;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-amex {
width: 18px;
height: 18px;
border: 1px solid rgba(255,255,255,.8);
background: #016fd0;
color: #fff;
font-size: 3px;
font-weight: 700;
text-transform: uppercase;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-amex::before {
content: "american";
position: absolute;
top: 5px;
left: 2px;
color: #fff;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-amex::after {
content: "express";
position: absolute;
right: 2px;
bottom: 5px;
color: #fff;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-amex {
width: auto;
height: auto;
border: 0;
background: transparent;
color: transparent;
font-size: 0;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-amex::before,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-amex::after {
content: none;
display: none;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-amex svg {
width: 18px;
height: 18px;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-discover {
width: 28px;
height: 16px;
padding-top: 5px;
border: 1px solid rgba(255,255,255,.8);
background: #fff;
color: #111;
font-size: 6px;
font-weight: 700;
line-height: 1;
text-align: center;
text-transform: uppercase;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-discover::after {
content: "";
position: absolute;
left: 13px;
top: 5px;
width: 6px;
height: 6px;
border-radius: 50%;
background: radial-gradient(circle, #fff 0%, #ff8a2b 55%, #ff6600 100%);
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-discover {
width: auto;
height: auto;
padding: 0;
border: 0;
background: transparent;
color: transparent;
font-size: 0;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-discover::before,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-discover::after {
content: none;
display: none;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-discover svg {
width: 19px;
height: 12px;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dinersclub {
width: 38px;
height: 14px;
color: #fff;
font-family: serif;
font-size: 9px;
font-weight: 700;
line-height: 1;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dinersclub::before {
content: "Diners Club";
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dinersclub::after {
content: "International";
margin-top: 1px;
font-size: 4px;
text-transform: uppercase;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dinersclub {
width: auto;
height: auto;
color: transparent;
font-size: 0;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dinersclub::before,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dinersclub::after {
content: none;
display: none;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dinersclub svg {
width: 30px;
height: 8px;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort {
width: 22px;
height: 14px;
padding: 2px;
border: 1px solid #fff;
border-radius: 4px;
background: #fff;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort .dk {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 3px;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort .dk::before {
position: absolute;
inset: 0;
border-radius: 3px;
background: #e21e27;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort .d,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort .k {
position: absolute;
top: 50%;
width: 50%;
height: 8px;
margin-top: -4px;
background: #fff;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort .d {
left: 0;
border-radius: 0 5px 5px 0;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort .k {
right: 0;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort .d::before {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 3px;
margin: -2px 0 0 -2px;
border-radius: 1px 2px 3px 0;
background: #e21e27;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort .k::before,
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort .k::after {
position: absolute;
right: 50%;
width: 0;
height: 0;
margin-right: -1px;
border-style: solid;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort .k::before {
top: 0;
border-width: 4px 3px 0 0;
border-color: #e21e27 transparent transparent transparent;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort .k::after {
bottom: 0;
border-width: 0 3px 4px 0;
border-color: transparent transparent #e21e27 transparent;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort {
width: auto;
height: auto;
padding: 0;
border: 0;
background: transparent;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort .dk {
display: none;
}
.cards_mng .card_list .card_visual .jp-card-logo.jp-card-dankort svg {
width: 20px;
height: 12px;
}
.cards_mng .card_list .card_visual.card-visual-legacy {
background: linear-gradient(135deg, #d9e1ea 0%, #aab6c3 100%);
}
.cards_mng .card_list .card_visual.card-visual-legacy em {
position: absolute;
left: 8px;
top: 15px;
width: 11px;
height: 8px;
border-radius: 2px;
background: #aeb9c5;
}
.cards_mng .card_list .card_meta {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
flex: 1 1 auto;
min-width: 111px;
max-width: 111px;
height: 100%;
gap: 2px;
}
.cards_mng .card_list .card_status {
display: flex;
align-items: center;
order: -1;
flex: 0 0 auto;
min-height: 20px;
gap: 5px;
}
.cards_mng .card_list .card_status:empty,
.cards_mng .card_list .card_status:not(:has(.card_badge, .card_expired_badge)) {
display: none;
min-height: 0;
}
.cards_mng .card_list .card_badge {
display: inline-flex;
align-items: center;
justify-content: center;
position: static;
top: auto;
right: auto;
transform: none;
width: 80px;
height: 20px;
margin: 0;
border: 1px solid #4789e7;
border-radius: 10px;
background: #fff;
color: #4789e7;
font-size: 11px;
line-height: 1;
text-align: center;
text-indent: 1px;
box-sizing: border-box;
z-index: 1;
}
.cards_mng .card_list .card_badge.is-en {
width: auto;
min-width: 34px;
padding: 0 8px;
}
.cards_mng .card_list .card_expired_badge {
display: inline-flex;
align-items: center;
gap: 3px;
position: static;
top: auto;
right: auto;
transform: none;
margin: 0 0 0 18px;
color: #ee445f;
font-size: 14px;
line-height: 18px;
white-space: nowrap;
z-index: 1;
}
.cards_mng .card_list .card_expired_icon {
width: 16px;
height: 16px;
display: block;
fill: currentColor;
}
.cards_mng .card_list .card_expired_badge_tablet {
display: none;
}
.cards_mng .card_list .card_badge + .card_expired_badge,
.cards_mng .card_list .card_item.expired-default .card_expired_badge {
margin-left: 30px;
}
.cards_mng .card_list .card_nickname {
display: block;
width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #222428;
font-size: 15px;
font-weight: normal;
line-height: 18px;
pointer-events: none;
}
.cards_mng .card_list .card_info {
display: flex;
flex-direction: row;
align-items: center;
flex: 1 1 auto;
min-width: 0;
margin: 0;
padding: 0;
column-gap: 15px;
}
.cards_mng .card_list .card_number {
display: flex;
align-items: center;
flex: 0 0 auto;
min-width: 0;
width: auto;
gap: 3px;
color: #222428;
font-size: 13px;
line-height: 1;
white-space: nowrap;
}
.cards_mng .card_list .card_mask {
display: inline-flex;
align-items: center;
width: 37px;
min-width: 37px;
flex-basis: 37px;
}
.cards_mng .card_list .card_mask::before {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: currentColor;
box-shadow: 8px 0 0 currentColor, 16px 0 0 currentColor, 24px 0 0 currentColor;
}
.cards_mng .card_list .card_mask::after {
content: "";
width: 4px;
height: 1px;
margin-left: 27px;
background-color: #222428;
}
.cards_mng .card_list .card_last,
.cards_mng .card_list .card_legacy_label {
color: #222428;
font-size: 12px;
}
.cards_mng .card_list .card_footer {
display: flex;
flex-direction: row;
align-items: center;
flex: 1 1 auto;
min-width: 0;
margin: 0;
}
.cards_mng .card_list .card_exp {
flex: 0 0 auto;
width: auto;
color: #222428;
font-size: 12px;
line-height: 18px;
white-space: nowrap;
}
.cards_mng .card_list .card_exp_label { margin-right: 5px; }
.cards_mng .card_list .card_actions {
display: flex;
align-items: center;
justify-content: flex-start !important;
gap: 5px;
flex: 0 0 253px;
width: 253px;
height: 32px;
margin-left: auto;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity .15s ease, visibility .15s ease;
}
.cards_mng .card_list .card_actions .cl-dashboard-button-box {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-left: 0;
cursor: pointer;
}
.cards_mng .card_list .card_actions .card-move-top-button {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 164px;
height: 36px;
padding: 0 14px;
border: 1px solid #4789e7;
border-radius: 18px;
background: #fff;
color: #4789e7;
cursor: pointer;
font-size: 15px;
font-weight: normal;
line-height: 36px;
white-space: nowrap;
}
.cards_mng .card_list .card_actions .card-move-top-button:hover {
border-color: #73ACF9;
color: #73ACF9;
}
.cards_mng .card_list .card_actions .card-move-top-button + .cl-dashboard-button-box {
margin-left: 15px;
}
.cards_mng .card_list .card_item.active .card-move-top-button {
visibility: hidden;
pointer-events: none;
}
.cards_mng .card_list .card_item.expired .card-move-top-button {
display: none;
}
.cards_mng .card_list .card_actions .cl-dashboard-button-box[data-func="DeleteCard"] {
margin-left: 0;
}
.cards_mng .card_list .card_actions .cl-dashboard-button-box:only-child[data-func="DeleteCard"] {
margin-left: auto;
}
.cards_mng .card_list .card_actions .cl-dashboard-button-box:only-child[data-func="EditCard"],
.cards_mng .card_list .card_actions.is-single-edit-action .cl-dashboard-button-box[data-func="EditCard"] {
margin-left: 0 !important;
margin-right: auto !important;
}
.cards_mng .card_list .card_actions:has(> .cl-dashboard-button-box:only-child[data-func="EditCard"]),
.cards_mng .card_list .card_actions.is-single-edit-action {
justify-content: flex-start !important;
}
.cards_mng .card_list .card_item.expired .card_actions .cl-dashboard-button-box[data-func="DeleteCard"] {
margin-left: 37px;
}
.cards_mng .card_list .card_item.expired .card_actions.is-single-delete-action .cl-dashboard-button-box[data-func="DeleteCard"] {
margin-left: auto;
}
.cards_mng .card_list .card_actions .cl-dashboard-button {
--cl-dashboard-button-width: 18px;
--cl-dashboard-button-height: 18px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
min-width: 32px;
}
.cards_mng .card_list .card_actions .card-delete-button {
width: 32px;
height: 32px;
}
.cards_mng .card_list .card_actions .card-delete-button svg {
width: 24px;
height: 24px;
}
.cards_mng .card_list .card-moving-top {
box-shadow: none;
}
.cards_mng .card_list .card-top-insert-line {
display: none;
}
.cards_mng .card_list .card-top-insert-line.active {
display: none;
}
.cards_mng .card_list .card_item:not(.disabled):not(.is-disabled):not([aria-disabled="true"]):hover .card_actions,
.cards_mng .card_list .card_item:not(.disabled):not(.is-disabled):not([aria-disabled="true"]):focus-within .card_actions {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.cards_mng .card_list .card_item.expired .card_nickname,
.cards_mng .card_list .card_item.expired .card_number,
.cards_mng .card_list .card_item.expired .card_last,
.cards_mng .card_list .card_item.expired .card_exp,
.cards_mng .card_list .card_item.expired .card_legacy_label {
color: #b1b3b7;
}
.cards_mng .card_list .card_item.expired .card_expired_badge {
color: #ee445f;
}
.cards_mng .card_list .card_item.expired .card_mask::before {
background-color: currentColor;
box-shadow: 8px 0 0 currentColor, 16px 0 0 currentColor, 24px 0 0 currentColor;
}
.cards_mng .card_list .card_item.expired .card_mask::after {
background-color: currentColor;
}
@media only screen and (min-width:768px) and (max-width:991px) {
.cards_mng .card_list:not(.empty_content) .card_item {
position: relative;
display: grid;
grid-template-columns: 60px minmax(0, 1fr);
grid-template-rows: auto auto auto;
align-items: center;
min-height: 70px;
height: 108px;
padding: 15px 256px 15px 15px;
column-gap: 15px;
row-gap: 10px;
}
.cards_mng .card_list:not(.empty_content) .card_item:not(.active):not(.expired):hover,
.cards_mng .card_list:not(.empty_content) .card_item:not(.active):not(.expired):active,
.cards_mng .card_list:not(.empty_content) .card_item:not(.active):not(.expired):focus,
.cards_mng .card_list:not(.empty_content) .card_item:not(.active):not(.expired):focus-within {
background-color: #ffffff !important;
}
.cards_mng .card_list .card_actions .card-move-top-button + .cl-dashboard-button-box {
margin-left: 5px;
}
.cards_mng .card_list .card_head {
display: contents;
gap: 0;
}
.cards_mng .card_list .card_visual {
grid-column: 1;
grid-row: 1 / 4;
align-self: center;
flex: 0 0 60px;
width: 60px;
height: 44px;
margin-right: 0;
}
.cards_mng .card_list .card_meta {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
max-width: none;
width: 100%;
min-width: 0;
height: auto;
gap: 5px;
}
.cards_mng .card_list .card_meta .card_nickname {
flex: 0 1 auto;
width: auto;
min-width: 0;
}
.cards_mng .card_list .card_status {
order: 0;
}
.cards_mng .card_list .card_info {
grid-column: 2;
grid-row: 2 / 4;
display: contents;
flex: 1 1 auto;
min-width: 0;
flex-direction: column;
align-items: flex-start;
gap: 10px;
column-gap: 0;
}
.cards_mng .card_list .card_number {
grid-column: 2;
grid-row: 2;
flex: 0 0 auto;
width: auto;
gap: 3px;
}
.cards_mng .card_list .card_mask {
width: 37px;
min-width: 37px;
flex-basis: 37px;
}
.cards_mng .card_list .card_mask::before {
width: 6px;
height: 6px;
box-shadow: 8px 0 0 currentColor, 16px 0 0 currentColor, 24px 0 0 currentColor;
}
.cards_mng .card_list .card_footer {
display: contents;
width: 100%;
}
.cards_mng .card_list .card_exp {
grid-column: 2;
grid-row: 3;
flex: 0 0 auto;
font-size: 12px;
}
.cards_mng .card_list .card_expired_badge {
grid-column: 2;
grid-row: 2;
align-self: center;
margin-left: 177px;
}
.cards_mng .card_list .card_item.expired-default .card_expired_badge {
margin-left: 183px;
}
.cards_mng .card_list .card_footer > .card_expired_badge {
display: none;
}
.cards_mng .card_list .card_meta .card_expired_badge_tablet {
display: inline-flex;
margin-left: 0;
}
.cards_mng .card_list .card_actions {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
flex: 0 0 256px;
width: 256px;
height: 36px;
margin-left: 0;
flex-direction: row;
justify-content: flex-start !important;
gap: 5px;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.cards_mng .card_list .card_actions .cl-dashboard-button-box,
.cards_mng .card_list .card_actions .cl-dashboard-button,
.cards_mng .card_list .card_actions .card-delete-button {
width: 40px;
height: 40px;
min-width: 40px;
}
.cards_mng .card_list .card_actions .card-move-top-button {
box-sizing: border-box;
width: 164px;
height: 36px;
font-size: 15px;
line-height: 34px;
color: #4789e7;
border: 1px solid #4789e7;
padding: 7px 15px;
}
.cards_mng .card_list .card_actions .card-move-top-button:hover,
.cards_mng .card_list .card_actions .card-move-top-button:active,
.cards_mng .card_list .card_actions .card-move-top-button:focus {
border-color: #4789e7;
color: #4789e7;
}
.cards_mng .card_list .card_actions .cl-dashboard-button-box[data-func="DeleteCard"] {
margin-left: auto;
}
.cards_mng .card_list .card_item.expired .card_actions .cl-dashboard-button-box[data-func="DeleteCard"] {
margin-left: 45px;
}
.cards_mng .card_list .card_item.expired .card_actions.is-single-delete-action .cl-dashboard-button-box[data-func="DeleteCard"] {
margin-left: auto;
}
.cards_mng .card_list .card_actions.is-single-edit-action .cl-dashboard-button-box[data-func="EditCard"] {
margin-left: 0 !important;
margin-right: 45px !important;
}
.sub-page.sub-billing .cards_mng .content-box {padding-bottom: 50px;}
}
@media only screen and (max-width:767px) {
.sub-page.sub-billing .cards_mng .content-box {
padding-left: 15px;
padding-right: 15px;
}
.cards_mng .card_list_summary {
margin-bottom: 15px;
padding: 0;
}
.cards_mng .card_list:not(.empty_content) .card_item {
position: relative;
display: grid;
grid-template-columns: 60px minmax(0, 1fr);
grid-template-rows: auto auto auto auto;
align-items: center;
min-height: unset;
height: auto;
column-gap: 15px;
row-gap: 10px;
padding: 15px 0 54px 15px;
}
.cards_mng .card_list:not(.empty_content) .card_item.active,
.cards_mng .card_list:not(.empty_content) .card_item.expired {
padding: 15px 0 15px 15px;
}
.cards_mng .card_list:not(.empty_content) .card_item.active {
min-height: 0;
padding-bottom: 0;
}
.cards_mng .card_list:not(.empty_content) .card_item:not(.active):not(.expired):hover,
.cards_mng .card_list:not(.empty_content) .card_item:not(.active):not(.expired):active,
.cards_mng .card_list:not(.empty_content) .card_item:not(.active):not(.expired):focus,
.cards_mng .card_list:not(.empty_content) .card_item:not(.active):not(.expired):focus-within {
background-color: #ffffff !important;
}
.sub-page .cards_mng .plan-tab li.card_add:hover svg {
fill: #4789e7;
}
.sub-page .cards_mng .plan-tab li.card_add:hover span {
color: #4789e7;
}
.cards_mng .card_list .card_head {
display: contents;
}
.cards_mng .card_list .card_visual {
grid-column: 1;
grid-row: 1 / 4;
align-self: center;
flex: 0 0 60px;
width: 60px;
height: 40px;
margin-right: 0;
}
.cards_mng .card_list .card_meta {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
flex: 1 1 auto;
max-width: none;
height: auto;
min-width: 0;
gap: 5px;
padding-left: 0;
}
.cards_mng .card_list .card_status {
order: 0;
flex: 0 0 auto;
min-height: 0;
gap: 5px;
}
.cards_mng .card_list .card_nickname {
flex: 0 1 auto;
font-size:14px;
width: auto;
min-width: 0;
max-width: 100%;
}
.cards_mng .card_list .card_nickname:has(+ .card_status:not(:empty)) {
max-width: calc(100% - 118px);
}
.cards_mng .card_list .card_info {
grid-column: 2;
grid-row: 2 / 4;
display: contents;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
flex: 0 0 auto;
width: 100%;
margin-left: 0;
gap: 10px;
column-gap: 0;
padding-left: 0;
}
.cards_mng .card_list .card_number {
grid-column: 2;
grid-row: 2;
flex: 0 0 auto;
width: 100%;
gap: 3px;
}
.cards_mng .card_list .card_footer {
display: contents;
width: 100%;
}
.cards_mng .card_list .card_exp {
grid-column: 2;
grid-row: 3;
flex: 0 0 auto;
font-size: 12px;
line-height: 18px;
}
.cards_mng .card_list .card_expired_badge {
grid-column: 2;
grid-row: 2;
align-self: center;
margin-left: 155px;
line-height: 20px;
font-size: 14px;
width: max-content;
min-width: max-content;
}
.cards_mng .card_list .card_footer > .card_expired_badge {
display: none;
}
.cards_mng .card_list .card_meta .card_expired_badge_tablet {
display: inline-flex;
margin-left: 0;
}
.cards_mng .card_list .card_expired_icon {
flex: 0 0 16px;
min-width: 16px;
}
.cards_mng .card_list .card_item.expired-default .card_expired_badge {
margin-left: 155px;
}
.cards_mng .card_list .card_actions {
display: contents;
position: static;
right: auto;
top: auto;
transform: none;
align-items: center;
justify-content: flex-start;
flex: none;
width: auto;
height: auto;
gap: 0;
margin-left: 0;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.cards_mng .card_list .card_actions .cl-dashboard-button-box,
.cards_mng .card_list .card_actions .cl-dashboard-button,
.cards_mng .card_list .card_actions .card-delete-button {
width: 40px;
height: 40px;
min-width: 40px;
}
.cards_mng .card_list .card_actions .card-move-top-button {
position: absolute;
left: auto;
right: 15px;
bottom: 20px;
width: auto;
height: auto;
padding: 0;
background: transparent;
margin-top: 0;
font-size: 13px;
line-height: 19px;
color: #4789e7;
border: 0;
}
.cards_mng .card_list .card_actions .card-move-top-button:hover {
border-color: transparent;
color: #4789e7;
}
.cards_mng .card_list .card_item.active .card-move-top-button {
display: none;
}
.cards_mng .card_list .card_actions .cl-dashboard-button-box[data-func="EditCard"] {
position: absolute;
right: 0;
top: 10px;
}
.cards_mng .card_list .card_actions .cl-dashboard-button-box[data-func="DeleteCard"] {
position: absolute;
right: 0;
top: 55px;
margin-left: 0;
}
.cards_mng .card_list .card_actions.is-single-edit-action .cl-dashboard-button-box[data-func="EditCard"] {
top: 50%;
transform: translateY(-50%);
}
.cards_mng .card_list .card_actions.is-single-delete-action .cl-dashboard-button-box[data-func="DeleteCard"],
.cards_mng .card_list .card_item .card_actions .cl-dashboard-button-box:only-child[data-func="DeleteCard"] {
top: 50%;
transform: translateY(-50%);
}
.cards_mng .card_list .card_actions .card-move-top-button + .cl-dashboard-button-box {
margin-left: 0;
}
.cards_mng .card_list .card_item.expired .card_actions .cl-dashboard-button-box[data-func="DeleteCard"] {
margin: auto 0;
}
.cards_mng .card_list .card_item .card_actions .cl-dashboard-button-box:only-child[data-func] {
margin: auto 0;
}
.cards_mng .card_list .card_item .card_actions.is-single-action .cl-dashboard-button-box[data-func] {
margin: auto 0;
}
}
.card-modal-default {
display: block;
position: fixed;
width: 100%;
}
#billingCardModalRoot .modal-default .modal-dialog.cl-cmmodal.cover.w560,
#billingCardModalRoot .modal-default .modal-dialog.cl-cmmodal.w560 { width: 100%; max-width: 560px; overflow:auto; }
#billingCardModalRoot .modal-default .modal-dialog.cl-cmmodal .modal-footer .btn.btn-default.close-button-dialog { margin-top:10px; }
#billingCardModalRoot .modal-default .modal-dialog.cl-cmmodal.cover .modal-content { padding: 20px 20px 62px; }
#billingCardModalRoot .modal-default .modal-dialog.cl-cmmodal .modal-content {
display: flex;
flex-direction: column;
}
#billingCardModalRoot .modal-default .modal-dialog.cl-cmmodal .modal-content .modal-body { max-width: 320px; }
#billingCardModalRoot .modal-default .modal-dialog.cl-cmmodal .modal-footer {max-width: 250px;}
.sub-billing .cl-dashboard-button-box[data-action="card_delete"] .cl-dashboard-button {
margin-right:0;
}
#billingCardModalRoot .table-card {
margin: 40px auto 0 auto;
max-width: 100%;
overflow: hidden;
}
#billingCardModalRoot .card-wrapper {
margin: 0 auto;
max-width: 260px;
}
#billingCardModalRoot .jp-card-container {
width: 100%;
height: 166px;
max-width: 260px;
}
#billingCardModalRoot .jp-card-container .jp-card { min-width: 260px;}
#billingCardModalRoot .jp-card-container-custom .jp-card {
min-width: 100%;
box-shadow: none;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-front,
#billingCardModalRoot .jp-card-container-custom .jp-card-back {
border-radius: 15px;
background: #afbac8;
}
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-visa .jp-card-front {
background-color: #191278;
}
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-visaelectron .jp-card-front {
background-color: #191278;
}
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-mastercard .jp-card-front {
background-color: #0061a8;
}
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-maestro .jp-card-front {
background-color: #174160;
}
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-amex .jp-card-front {
background-color: #a6bbe1;
}
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-discover .jp-card-front {
background-color: #3d392e;
}
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-dinersclub .jp-card-front {
background-color: #8baeae;
}
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-dankort .jp-card-front {
background-color: #0055c7;
}
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-jcb .jp-card-front {
background-color: #f8a61b;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-front:before,
#billingCardModalRoot .jp-card-container-custom .jp-card-front:after,
#billingCardModalRoot .jp-card-container-custom .jp-card-back:before,
#billingCardModalRoot .jp-card-container-custom .jp-card-back:after {
display: none;
}
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-identified .jp-card-front:before,
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-identified .jp-card-back:before {
content: " ";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 16px;
background-color: transparent !important;
opacity: 1;
pointer-events: none;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
transition: all 400ms ease;
background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 15% 80%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 15% 80%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), linear-gradient(-25deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
}
#billingCardModalRoot .jp-card-container-custom .jp-card-front-decoration,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge,
#billingCardModalRoot .jp-card-container-custom .jp-card-back-top,
#billingCardModalRoot .jp-card-container-custom .jp-card-back-signature {
position: absolute;
display: block;
pointer-events: none;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-front-decoration {
inset: 0;
width: 100%;
height: 100%;
border-radius: 16px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge {
display: flex;
align-items: center;
justify-content: center;
right: 25px;
bottom: 25px;
width: 76px;
height: 36px;
z-index: 2;
overflow: visible;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo {
position: absolute;
top: auto;
left: auto;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
opacity: 0;
line-height: 1;
text-align: center;
transform: none;
transform-origin: center;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo::before,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo::after {
flex: 0 0 auto;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-visa {
line-height: 1;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-visa {
width: 56px;
height: 18px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-visaelectron {
width: 56px;
height: 26px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-mastercard {
width: 42px;
height: 26px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-maestro {
width: 42px;
height: 26px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-amex {
width: 36px;
height: 36px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-discover {
width: 50px;
height: 32px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-dinersclub {
width: 76px;
height: 20px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-dankort {
width: 48px;
height: 29px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-jcb {
width: 39px;
height: 30px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-discover,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-amex,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-dinersclub,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-dankort,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-jcb,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-maestro {
background: transparent !important;
border: 0 !important;
color: transparent !important;
font-size: 0 !important;
font-style: normal !important;
letter-spacing: 0 !important;
overflow: visible !important;
padding: 0 !important;
text-indent: 0 !important;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-visa svg {
display: block;
width: 56px;
height: 18px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-visaelectron svg {
display: block;
width: 56px;
height: 26px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-mastercard svg {
display: block;
width: 42px;
height: 26px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-discover svg {
display: block;
width: 50px;
height: 32px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-amex svg {
display: block;
width: 36px;
height: 36px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-dankort svg {
display: block;
width: 48px;
height: 29px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-jcb svg {
display: block;
width: 39px;
height: 30px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-maestro svg {
display: block;
width: 42px;
height: 26px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-dinersclub svg {
display: block;
width: 76px;
height: 20px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-visa::before,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-visa::after,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-visaelectron::before,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-visaelectron::after,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-mastercard::before,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-mastercard::after,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-discover::before,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-discover::after,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-amex::before,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-amex::after,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-dankort::before,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-dankort::after,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-jcb::before,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-jcb::after,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-maestro::before,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-maestro::after,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-dinersclub::before,
#billingCardModalRoot .jp-card-container-custom .jp-card-brand-badge .jp-card-logo.jp-card-dinersclub::after {
content: none !important;
display: none !important;
}
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-identified .jp-card-brand-badge .jp-card-logo {
box-shadow: none;
}
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-visa.jp-card-identified .jp-card-brand-badge .jp-card-logo.jp-card-visa,
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-visaelectron.jp-card-identified .jp-card-brand-badge .jp-card-logo.jp-card-visaelectron,
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-mastercard.jp-card-identified .jp-card-brand-badge .jp-card-logo.jp-card-mastercard,
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-maestro.jp-card-identified .jp-card-brand-badge .jp-card-logo.jp-card-maestro,
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-amex.jp-card-identified .jp-card-brand-badge .jp-card-logo.jp-card-amex,
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-discover.jp-card-identified .jp-card-brand-badge .jp-card-logo.jp-card-discover,
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-dinersclub.jp-card-identified .jp-card-brand-badge .jp-card-logo.jp-card-dinersclub,
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-dankort.jp-card-identified .jp-card-brand-badge .jp-card-logo.jp-card-dankort,
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-jcb.jp-card-identified .jp-card-brand-badge .jp-card-logo.jp-card-jcb,
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-elo.jp-card-identified .jp-card-brand-badge .jp-card-logo.jp-card-elo {
opacity: 1;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-content {
position: absolute;
display: flex;
flex-direction: column;
padding: 25px;
width: 100%;
height: 100%;
align-items: flex-start;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-display,
#billingCardModalRoot .jp-card-container-custom .jp-card-nickname-label,
#billingCardModalRoot .jp-card-container-custom .jp-card-expiry-label {
color: #ffffff;
opacity: 1;
font-weight: normal !important;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-number-wrap .jp-card-display {
flex: 1 1 auto;
min-width: 0;
text-align: left;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-number-sr-only {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-number-wrap .jp-card-number,
#billingCardModalRoot .jp-card-container-custom .jp-card-number-wrap .jp-card-number.jp-card-display {
display: none !important;
width: 0 !important;
min-width: 0 !important;
flex: 0 0 0 !important;
overflow: hidden !important;
opacity: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-number-preview {
display: none;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-number-preview:empty::before {
content: none;
color: #ffffff;
}
#billingCardModalRoot .jp-card-container-custom {
font-size: 12px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-name {
font-size: 12px;
}
#billingCardModalRoot .no-card-nickname .jp-card-container-custom .jp-card-name {
display: none;
}
#billingCardModalRoot .no-card-nickname .jp-card-container-custom .jp-card-number-wrap {
margin-top: 0;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-number-wrap {
display: block;
width: 100%;
margin-top: 10px;
text-align: left;
max-width: 150px;
height: 18px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-number-preview {
color: #ffffff;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
min-width: 0;
text-align: left;
height: 100%;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-number-group {
display: inline-block;
color: #ffffff;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-number-gap {
width: 10px;
display: inline-block;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-number-mask {
display: inline-flex;
align-items: center;
gap: 3px;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-number-mask-dot {
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
background-color: #ffffff;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-expiry-label { margin-right: 5px; }
#billingCardModalRoot .jp-card-container-custom .jp-card-expiry-wrap {
margin-top: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
align-content: center;
}
#billingCardModalRoot .jp-card-container-custom .jp-card-back-top {
top: 24px;
left: 0;
width: 100%;
height: 34px;
background: rgba(47, 58, 84, 0.72);
}
#billingCardModalRoot .jp-card-container-custom .jp-card-back-signature {
top: 76px;
left: 20px;
width: calc(100% - 40px);
height: 34px;
border-radius: 6px;
background: rgba(255,255,255,0.9);
}
#billingCardModalRoot .jp-card-container-custom .jp-card-back .jp-card-cvc {
position: absolute;
top: 85px;
right: 28px;
left: auto;
font-size: 13px;
color: #45516c;
}
#billingCardModalRoot .jp-card-container-custom .jp-card.jp-card-identified {
box-shadow: none;
}
#billingCardModalRoot .cl-dashboard-input-group { margin-bottom: 15px; }
#billingCardModalRoot .billing-card-field-error .cl-dashboard-input {
border-color: #ee445f !important;
box-shadow: none !important;
}
#billingCardModalRoot .billing-card-field-error .cl-dashboard-input:focus {
border-color: #ee445f !important;
}
#billingCardModalRoot .billing-card-error-message {
display: flex;
align-items: center;
gap: 3px;
margin-top: 6px;
font-size: 12px;
line-height: 1.4;
color: #ee445f;
fill: #ee445f;
word-break: keep-all;
text-align: left;
}
#billingCardModalRoot .billing-card-error-message[data-error-for="exp"] {align-items: flex-start;}
#billingCardModalRoot .billing-card-error-message[data-error-for="exp"] svg {margin-top:1px;}
#billingCardModalRoot .billing-card-error-message svg {
flex: 0 0 auto;
fill: currentColor;
}
#billingCardModalRoot .billing-card-number-group .cl-dashboard-input {
font-size: 15px;
color: #696c71;
}
#billingCardModalRoot .billing-card-number-group .billing-card-number-field {
position: relative;
--billing-card-input-x: 10px;
}
#billingCardModalRoot .billing-card-number-group #card_num {
--cl-dashboard-input-maxW: 100%;
--cl-dashboard-input-minW: 100%;
padding-left: var(--billing-card-input-x);
padding-right: var(--billing-card-input-x);
color: transparent;
caret-color: transparent;
}
#billingCardModalRoot .billing-card-number-group #card_num::placeholder {color: transparent;}
#billingCardModalRoot .billing-card-number-group #card_num::selection {
color: transparent;
background: transparent;
}
#billingCardModalRoot .billing-card-number-group #card_num::-moz-selection {
color: transparent;
background: transparent;
}
#billingCardModalRoot .billing-card-number-group .billing-card-number-display {
position: absolute;
top: 50%;
left: var(--billing-card-input-x);
right: var(--billing-card-input-x);
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 0;
pointer-events: none;
font-size: 15px;
line-height: 1;
color: #696c71;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
#billingCardModalRoot .billing-card-number-group .billing-card-number-caret {
display: none;
position: absolute;
top: 50%;
width: 1px;
height: 18px;
background-color: #222428;
transform: translateY(-50%);
animation: billing-card-caret-blink 1s step-end infinite;
}
#billingCardModalRoot .billing-card-number-group .billing-card-number-field.is-focused .billing-card-number-caret {
display: block;
}
#billingCardModalRoot .billing-card-number-group .billing-card-number-measure {
position: absolute;
left: -9999px;
top: 0;
visibility: hidden;
white-space: pre;
font: inherit;
letter-spacing: 0;
}
#billingCardModalRoot .billing-card-number-group .billing-card-number-segment {
flex: 0 0 4ch;
min-width: 4ch;
display: inline-flex;
align-items: center;
justify-content: flex-start;
}
#billingCardModalRoot .billing-card-number-group .billing-card-number-segment.is-placeholder {
color: #b7c3d0;
}
#billingCardModalRoot .billing-card-number-group .billing-card-number-segment.is-masked {
min-width: 33px;
position: relative;
}
#billingCardModalRoot .billing-card-number-group .billing-card-mask-placeholder {
display: inline-block;
color: #b7c3d0;
}
#billingCardModalRoot .billing-card-number-group .billing-card-mask-dots {
display: none;
align-items: center;
gap: 3px;
}
#billingCardModalRoot .billing-card-number-group .billing-card-number-segment.is-masked.is-filled .billing-card-mask-placeholder {
display: none;
}
#billingCardModalRoot .billing-card-number-group .billing-card-number-segment.is-masked.is-filled .billing-card-mask-dots {
display: inline-flex;
}
#billingCardModalRoot .billing-card-number-group .billing-card-mask-dot {
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
background-color: transparent;
opacity: 0;
transition: opacity .12s ease, background-color .12s ease;
}
#billingCardModalRoot .billing-card-number-group .billing-card-mask-dot.active {
background-color: #222428;
opacity: 1;
}
#billingCardModalRoot .billing-card-number-group .billing-card-number-separator {
flex: 0 0 auto;
width: 6px;
height: 1px;
margin: 0 15px;
overflow: hidden;
color: transparent;
background-color: #707070;
}
@keyframes billing-card-caret-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
#billingCardModalRoot .billing-card-meta-row {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 30px;
}
#billingCardModalRoot .billing-card-meta-group {flex: 1 1 50%; margin-bottom: 0;}
#billingCardModalRoot .billing-card-meta-group .cl-dashboard-input-count {display: none;}
#billingCardModalRoot .billing-card-meta-group .cl-dashboard-input:focus { border-color: #4789e7; box-shadow: none;}
#billingCardModalRoot .billing-card-company-help {
margin: 15px 0;
font-size: 13px;
color: #8e9095;
word-break: keep-all;
text-align: left;
line-height: 1.6;
}
#billingCardModalRoot .cl-dashboard-input-group[data-input-id="card_birth"] { margin-bottom: 0px; margin-top: 15px;}
#billingCardModalRoot .billing-card-password-group .billing-card-password-field {
position: relative;
--billing-card-password-input-x: 14px;
}
#billingCardModalRoot .billing-card-password-group #card_2digit {
--cl-dashboard-input-maxW: 100%;
--cl-dashboard-input-minW: 100%;
padding-left: var(--billing-card-password-input-x);
color: transparent;
caret-color: transparent;
}
#billingCardModalRoot .billing-card-password-group #card_2digit::placeholder {color: transparent;}
#billingCardModalRoot .billing-card-password-group .pwd-num {
position: absolute;
top: 50%;
left: var(--billing-card-password-input-x);
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 6px;
pointer-events: none;
}
#billingCardModalRoot .billing-card-password-group .pwd-circle {
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
background-color: #b1b3b7;
transition: background-color .15s ease;
}
#billingCardModalRoot .billing-card-password-group .pwd-circle.is-placeholder:nth-child(3) {margin-left:5px;}
#billingCardModalRoot .billing-card-password-group .pwd-circle.active,
#billingCardModalRoot .billing-card-password-group .pwd-circle.is-placeholder {
background-color: #222428;
}
#billingCardModalRoot .billing-card-password-group .billing-card-password-caret {
display: none;
position: absolute;
top: 50%;
width: 1px;
height: 18px;
background-color: #222428;
transform: translate(-50%, -50%);
animation: billing-card-caret-blink 1s step-end infinite;
}
#billingCardModalRoot .billing-card-password-group .billing-card-password-field.is-focused .billing-card-password-caret {
display: block;
}
#billingCardModalRoot .cl-dashboard-button-box { width: 50%;}
#billingCardModalRoot .cl-dashboard-button {
--cl-dashboard-button-maxW: 100%;
--cl-dashboard-button-minW: 100%;
position: relative;
z-index: 0;
--cl-dashboard-button-height: 40px;
}
#billingCardModalRoot .cl-dashboard-button:hover { border-color: #9bc5ff; color: #9bc5ff; }
#billingCardModalRoot .cl-dashboard-button-box.active .cl-dashboard-button{ border-color: #4789e7; z-index: 2; color: #4789e7; }
#billingCardModalRoot .cl-dashboard-button-box.active .cl-dashboard-button[data-val="comp"]{ border-left: 1px solid #4789e7; }
#billingCardModalRoot .cl-dashboard-button-box.active .cl-dashboard-button[data-val="indi"]{ border-right: 1px solid #4789e7; }
#billingCardModalRoot .cl-dashboard-button[data-val="indi"] {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: none;
}
#billingCardModalRoot .cl-dashboard-button[data-val="comp"] {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: none;
margin-right:0;
}
/* ===== Form ===== */
/* .bc-form{ display: grid; gap: 12px; }
.bc-row{ display:grid; gap: 6px; }
.bc-input{
height: 42px;
border: 1px solid #d6dbe3;
border-radius: 8px;
padding: 0 12px;
outline: none;
}
.bc-input:focus{ border-color:#2f73ff; box-shadow: 0 0 0 3px rgba(47,115,255,.12); }
.bc-grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bc-error{ font-size: 12px; color:#e24a4a; } */
/**************************************************************************************************/
/**************************************************************************************************/
/*buy & change ************************************************************************************/
.sub-buy .content-box { padding: 80px 0px 130px; background-color: inherit; text-align: center; }
.sub-buy .sub-title > .text > h2 {
font-size: 27px;
font-weight: normal;
letter-spacing: -0.81px;
color: #2d343e;
margin-bottom: 30px;
}
.sub-buy .sub-title > .text > p {
font-size: 14px;
letter-spacing: -0.42px;
color: #888888;
margin-bottom: 0;
}
.sub-buy .sub-title {
margin-bottom: 68px;
}
.sub-buy .sub-caption {
font-size: 14px;
letter-spacing: -0.42px;
color: #2d343e;
margin-top: 33px;
margin-bottom: 13px;
}
.sub-buy .sub-content {
width: 313px;
margin: 0 auto;
display: inline-block;
text-align: left;
}
.sub-buy .sub-switch {
display: table;
width: 100%;
margin-bottom: 30px;
border: 1px solid #DEE0DF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.sub-buy .sub-switch > .switch-lang { display: table-cell; text-align: center; width: 50%; }
.sub-buy .sub-switch > .switch-lang > a { display: block; text-decoration: none; height: 45px; line-height: 45px; color: #2D343E; }
.sub-buy .sub-switch > .switch-lang:first-child > a { border-right: 1px solid #DEE0DF; }
.sub-buy .sub-switch > .switch-lang a.active { background-color: #2D343E; color: #fff; }
.sub-buy .sub-check {
background-color: #D2D2D2;
color: #ffffff;
padding: 0px 3px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin-right: 5px;
}
.sub-buy .sub-check.active { background-color: #4789e7; }
.sub-buy .select-wrap { position: relative; }
.sub-buy .select-wrap.pay-method:after {
content: '';
position: absolute;
display: inline-block;
top: 50%; right: 15px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
border-top: 6px solid #2d343e;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 0px dotted;
}
.sub-buy .select-wrap > select {
font-size: 13px;
box-shadow: none;
border-color: #dde1e2;
height: 45px;
line-height: 45px;
color: #2D343E;
cursor: pointer;
padding: 0px 30px 0 15px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.sub-buy .select-wrap > select::-ms-expand { display: none; }
.sub-buy .select-wrap > select.form-control[disabled]::-ms-value { color: #2d343e; }
.sub-buy .select-wrap > select.sites-select {
font-size: 15px;
color: #2d343e;
background-color: #fff;
border: 1px solid #dde1e2;
cursor: default;
}
.sub-buy .select-wrap > select.sites-select[disabled] {
background-color:#f6f9fc;
}
.sub-buy .plan-grid span.plan-price-original {
display: block;
font-size: 11px;
font-weight: normal;
text-decoration: line-through;
color: #a1a7af;
}
.sub-buy .sub-discount { color:#4789e7; }
.sub-buy .input-box { display:relative; border:1px solid #e7e8e9; padding:12px 15px; border-radius: 3px;}
.sub-buy .input-box.disabled { background-color:#f6f9fc;}
.sub-buy .input-box .check-box { position:absolute; top:17px; left:15px; }
.sub-buy .input-box .check-box svg { fill: #dbdcdf; cursor: pointer;}
.sub-buy .input-box .coupon-text { padding-left:25px; cursor: pointer;}
.sub-buy .sub-content > .charge-result.total { padding-top: 30px; }
.sub-buy .sub-content > .charge-result.total > .pull-left {
font-size: 16px;
font-weight: 500;
letter-spacing: -0.48px;
}
.sub-buy .sub-content > .charge-result.total > .pull-right > .charge-total {
font-size: 25px;
color: #4789e7;
}
.sub-buy .sub-content > .charge-info.discount > .pull-right:before {
content: '-';
display: inline-block;
position: relative;
vertical-align: text-top;
line-height: 15px;
}
.sub-buy .sub-content > .agree {
font-size: 14px;
color: #a1a7af;
line-height: 1.3;
letter-spacing: -0.05em;
padding: 15px 0;
}
/* .sub-buy .sub-content > .agree + .newcheckbox { margin-bottom: 44px; } */
.sub-buy .sub-content .paypal_paybtn {margin-top: 44px;}
.sub-buy .sub-content > .agree + .newcheckbox.pay-auto-checkbox { display: flex;}
.sub-buy .sub-content > .agree + .newcheckbox span {line-height: 1.4;}
.sub-buy .sub-content > .agree + .newcheckbox label {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.sub-buy .sub-content > .agree + .newcheckbox label .newcheckboxSvg { margin-right: 10px; margin-top: 2px;}
.sub-buy .stored-card-pay-option {
margin-top: 20px;
margin-bottom: 15px;
text-align: left;
}
.sub-buy .stored-card-pay-option .cl-dashboard-checkbox {
justify-content: flex-start;
width: 313px;
max-width: 100%;
height: auto;
align-items: center;
}
.sub-buy .stored-card-pay-option .cl-dashboard-check-label {
width: 100%;
cursor: pointer;
padding: 10px 0;
height: auto;
}
.sub-buy .stored-card-pay-option .cl-dashboard-check-text { color: #222428; margin-left: 5px; }
.sub-buy .stored-card-pay-option p {
margin: 0 0 0 25px;
font-size: 13px;
line-height: 1.5;
color: #8e9095;
}
.sub-buy .stored-card-summary {
margin: 30px 0 0 0;
width: 100%;
}
.sub-buy .stored-card-summary-title {
margin-bottom: 15px;
font-size: 14px;
line-height: 1.4;
color: #222428;
}
.sub-buy .stored-card-summary-card {
min-height: 117px;
padding: 15px;
border: 1px solid #e5e7e9;
border-radius: 5px;
background-color: #fff;
}
.sub-buy .stored-card-summary-head {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
}
.sub-buy .stored-card-summary-name {
flex: 1 1 auto;
min-width: 0;
font-size: 14px;
line-height: 1.4;
color: #222428;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sub-buy .stored-card-summary-badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 34px;
width: 34px;
height: 18px;
box-sizing: border-box;
border: 1px solid #4789e7;
border-radius: 10px;
font-size: 11px;
line-height: 1;
color: #4789e7;
}
.sub-buy .stored-card-summary-expired-badge {
display: inline-flex;
align-items: center;
gap: 3px;
flex: 0 0 auto;
color: #ee445f;
font-size: 12px;
line-height: 1;
}
.sub-buy .stored-card-summary-expired-icon {
position: relative;
width: 12px;
height: 12px;
border: 1px solid currentColor;
border-radius: 50%;
box-sizing: border-box;
}
.sub-buy .stored-card-summary-expired-icon::before,
.sub-buy .stored-card-summary-expired-icon::after {
content: '';
position: absolute;
left: 50%;
width: 1px;
background-color: currentColor;
transform: translateX(-50%);
}
.sub-buy .stored-card-summary-expired-icon::before {
top: 2px;
height: 5px;
}
.sub-buy .stored-card-summary-expired-icon::after {
bottom: 2px;
height: 1px;
}
.sub-buy .stored-card-summary-number {
display: flex;
align-items: center;
gap: 15px;
font-size: 13px;
margin-top: 10px;
color: #696c71;
}
.sub-buy .stored-card-summary-mask {
display: inline-flex;
align-items: center;
flex: 0 0 29px;
width: 29px;
min-width: 29px;
justify-content: flex-start;
}
.sub-buy .stored-card-summary-mask::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #696c71;
box-shadow: 8px 0 0 #696c71, 16px 0 0 #696c71, 24px 0 0 #696c71;
}
.sub-buy .stored-card-summary-exp {
margin-top: 20px;
font-size: 12px;
line-height: 1.4;
color: #696c71;
}
.sub-buy .stored-card-pay-option.is-expired .stored-card-summary-card {
border-color: #e5e7e9;
background-color: #fafafa;
color: #d2d6db;
}
.sub-buy .stored-card-pay-option.is-expired .stored-card-summary-name,
.sub-buy .stored-card-pay-option.is-expired .stored-card-summary-number,
.sub-buy .stored-card-pay-option.is-expired .stored-card-summary-exp {
color: #d2d6db;
}
.sub-buy .stored-card-pay-option.is-expired .stored-card-summary-mask::before {
background-color: #c7ccd3;
box-shadow: 8px 0 0 #d2d6db, 16px 0 0 #d2d6db, 24px 0 0 #d2d6db;
}
.sub-buy .sub-content > .agree > a { color: #4789e7; }
.sub-buy .sub-content > .btn {
width: 100%;
font-size: 14px;
padding: 13px 0;
color: #fff;
border-radius: 5px;
background-color: #4789e7;
border: none;
}
.sub-buy .sub-content > .btn:hover,
.sub-buy .sub-content > .btn:active,
.sub-buy .sub-content > .btn:focus {
background-color: #4789e7;
}
.sub-buy .stored-card-pay-option.is-expired-selected ~ .btn-pay-btn,
.sub-buy .stored-card-pay-option.is-expired-selected ~ .btn-pay-btn:hover,
.sub-buy .stored-card-pay-option.is-expired-selected ~ .btn-pay-btn:active,
.sub-buy .stored-card-pay-option.is-expired-selected ~ .btn-pay-btn:focus {
border-color: #d2d6db !important;
background-color: #d2d6db !important;
color: #fff !important;
box-shadow: none !important;
outline: none !important;
}
.sub-buy .btn-pay-btn.is-card-unavailable,
.sub-buy .btn-pay-btn.is-card-unavailable:hover,
.sub-buy .btn-pay-btn.is-card-unavailable:active,
.sub-buy .btn-pay-btn.is-card-unavailable:focus {
border-color: #d2d6db !important;
background-color: #d2d6db !important;
color: #fff !important;
box-shadow: none !important;
outline: none !important;
}
.modal-default .modal-dialog.stored-expired-card-notice-modal .stored-expired-card-notice {
text-align: center;
color: #8e9095;
font-size: 14px;
line-height: 1.7;
}
.modal-default .modal-dialog.stored-expired-card-notice-modal .stored-expired-card-notice p {
margin: 0 0 10px;
}
.modal-default .modal-dialog.stored-expired-card-notice-modal .stored-expired-card-notice a {
color: #4789e7;
text-decoration: none;
}
.modal-default .modal-dialog.stored-expired-card-notice-modal .modal-footer {
width: 250px;
margin: 50px auto 0;
padding: 0;
}
.modal-default .modal-dialog.stored-expired-card-notice-modal .modal-footer .btn {
width: 100%;
height: 50px;
margin: 0;
}
/*only - buy page*/
.sub-buy:not(.sub-change) .sub-panel > .plan-grid {
font-size: 13px;
line-height: 1.3;
display: table;
position: relative;
width: 100%;
height: 62px;
padding: 10px 20px;
background-color: #fff;
border: 1px solid #dde1e2;
cursor: pointer;
}
.sub-buy:not(.sub-change) .sub-panel > .plan-grid + .plan-grid { border-top: none; }
.sub-buy:not(.sub-change) .plan-grid > div { display: table-cell; vertical-align: middle; }
.sub-buy:not(.sub-change) .plan-grid > div.plan-priod > .event-price {
padding: 5px 0 5px 28px;
}
.sub-buy:not(.sub-change) .plan-grid > div.plan-priod > .event-price > span {
display: inline-block;
min-width: 66px;
background-color: #4789e7;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
line-height: 1.4;
letter-spacing: -0.39px;
text-align: center;
color: #fff;
}
.sub-buy:not(.sub-change) .plan-grid > div.plan-priod > p.plan-priod12,
.sub-buy:not(.sub-change) .plan-grid > div.plan-priod > p.plan-priod24 {
padding: 4px 0 5px 28px;
color: #4789e7;
letter-spacing: -0.39px;
margin-bottom: 0;
}
.sub-buy:not(.sub-change) .content-box .sub-panel + div.divider { margin-top: 33px; margin-bottom: 17px; }
.sub-buy:not(.sub-change) .content-box .charge-result.total + .clear + div.divider { margin-top: 15px; margin-bottom: 38px; }
.sub-buy #payment-quantity[value="1"] ~ .container .sub-content > .charge-info.discount > .pull-right:before { content:''; }
.sub-buy #payment-quantity[value="1"] ~ .container .billupgrade .sub-content .price .pull-left:after { content:'(1개월)'; display:inline-block; padding-left:4px; }
.sub-buy #payment-quantity[value="12"] ~ .container .billupgrade .sub-content .price .pull-left:after { content:'(12개월)'; display:inline-block; padding-left:4px; }
.sub-buy #payment-quantity[value="24"] ~ .container .billupgrade .sub-content .price .pull-left:after { content:'(24개월)'; display:inline-block; padding-left:4px;}
.sub-buy #payment-quantity[value="1"] ~ .container .billupgrade .sub-content .sub-panel.en ~ .price .pull-left:after { content:'(1mo)'; display:inline-block; padding-left:4px; }
.sub-buy #payment-quantity[value="12"] ~ .container .billupgrade .sub-content .sub-panel.en ~ .price .pull-left:after { content:'(12mo)'; display:inline-block; padding-left:4px; }
.sub-buy #payment-quantity[value="24"] ~ .container .billupgrade .sub-content .sub-panel.en ~ .price .pull-left:after { content:'(24mo)'; display:inline-block; padding-left:4px; }
.sub-buy #payment-quantity[value="12"] ~ .container .billupgrade .sub-content .discount .pull-left:after { content:'(15%)'; display:inline-block; padding-left:4px; }
.sub-buy #payment-quantity[value="24"] ~ .container .billupgrade .sub-content .discount .pull-left:after { content:'(30%)'; display:inline-block; padding-left:4px; }
/*only - change page*/
.sub-change .sub-caption:first-child { margin-top: 0; }
.sub-change .sub-panel.plans > .plan-grid { display: block; }
.sub-change .sub-panel.plans > .plan-grid + .plan-grid { margin-top: 10px; }
.sub-change .plan-grid > .plan-table {
display: table;
width: 100%;
padding: 17px 22px;
background-color: #ffffff;
border: 1px solid #dde1e2;
}
.sub-change .plan-grid > .plan-table.active {
border-color: #4789e7;
}
.sub-change .plan-grid .plan-table-row {
display: table-row;
overflow: hidden;
}
.sub-change .plan-grid .plan-table-row > div {
display: table-cell;
vertical-align: middle;
letter-spacing: -0.39px;
line-height: 1.2;
}
.sub-change .plan-grid .plan-table-row:not(.line):not(.remain-result) + .plan-table-row > div { padding-top: 20px; }
.sub-change .plan-grid .plan-table-row:not(.line):not(.remain-result) + .plan-table-row.line > div { padding-top: 12px; }
.sub-change .plan-grid .plan-table-row.line + .plan-table-row > div { padding-top: 13px; }
.sub-change .plan-grid .plan-table-row.line > div > hr { margin-top: 0; margin-bottom: 0; }
.sub-change .plan-grid .plan-table-row > div.plan-dt { overflow: hidden; width: 110px; }
.sub-change .plan-grid .plan-table-row > div.plan-dd { text-align: right; }
.sub-change .plan-grid .plan-table-row > div.plan-dd > span { display: inline-block; }
.sub-change .plan-grid .plan-table-row > div.plan-dd > span.plan-price-original { font-size: 12px; color: #999999; margin-right: 11px; }
.sub-change .plan-grid .plan-table-row.remain-result,
.sub-change .plan-grid .plan-table-row.upgrade-result { font-size: 16px; }
.sub-change .sub-panel.plans + .divider { margin-top: 32px; margin-bottom: 34px; }
.sub-change .sub-content > .charge-result.total + .clear + .divider { margin-top: 23px; margin-bottom: 40px; }
@media only screen and (max-width:991px) {
.sub-buy .content-box { padding: 64px 0px 104px; }
.sub-billing .sub-content .billing-list { border: 1px solid #eeeff0; overflow-x: auto; }
.sub-billing .sub-content .table { border-top: none; }
.sub-billing .sub-content table tr th:first-child,
.sub-billing .sub-content table tr td:first-child { border-left: none; }
.sub-billing .sub-content table tr th:last-child,
.sub-billing .sub-content table tr td:last-child { border-right: none; }
}
@media only screen and (max-width:768px) {
.sub-buy { padding-top: 55px; }
.sub-buy .content-box { padding: 50px 0px 75px; }
.sub-buy .sub-title > .text > h2 { margin-bottom: 24px; }
.sub-buy .sub-title { margin-bottom: 54.4px; }
.sub-buy .sub-caption { margin-top: 26.4px; margin-bottom: 10.4px; }
.sub-buy .sub-content > .charge-result.total { padding-top: 24px; }
.sub-change .plan-grid .plan-table-row:not(.line):not(.remain-result) + .plan-table-row > div { padding-top: 16px; }
.sub-change .plan-grid .plan-table-row:not(.line):not(.remain-result) + .plan-table-row.line > div { padding-top: 9.6px; }
.sub-change .plan-grid .plan-table-row.line + .plan-table-row > div { padding-top: 10.4px; }
.sub-change .plan-grid .plan-table-row > div.plan-dd > span.plan-price-original { margin-right: 8.8px; }
.sub-change .sub-panel.plans > .plan-grid + .plan-grid { margin-top: 8px; }
.sub-change .sub-panel.plans + .divider { margin-top: 25.6px; margin-bottom: 27.2px; }
.sub-change .sub-content > .charge-result.total + .clear + .divider { margin-top: 18.4px; margin-bottom: 32px; }
}
@media only screen and (max-width:480px) {
.sub-buy { width: 100%; }
.sub-buy .content-box { padding: 40px 15px 50px; }
.sub-buy .content-box > .sub-content { width: 90%; }
}
/**************************************************************************************************/
/**************************************************************************************************/
/*MODAL********************************************************************************************/
/*********** buy, upgrade - card modal START ****************/
/************************************************************/
.cl-buy-pay .table-card {margin:50px auto 0 auto;max-width: 313px;overflow: hidden;}
.cl-buy-pay .table-card .card-infopwd + li .cl-common-form-wrap {margin-bottom: 12px;}
.cl-buy-pay .table-card .cl-common-form-wrap {margin-bottom: 15px;}
.cl-buy-pay .table-card .card-info {width: 48%; float: left; margin-right: 10px;}
.cl-buy-pay .table-card .card-info + div {float: right; width: 50%; padding-left: 10px;}
.cl-common-modal .cl-cmmodal.cl-buy-pay .table-card .card-info-hidden .text-char * { font-family: Tahoma;}
.cl-common-modal .cl-cmmodal.cl-buy-pay .table-card .card-info-hidden .text-char span {margin-right:0px;}
.cl-common-modal .cl-cmmodal.cl-buy-pay .table-card .card-info-hidden .text-char {
position: absolute;
top: 66%;
background-color: #fff;
color:#fff;
font-size: 14px;
padding: 10px 3px 5px;
line-height: 0.4;
transform: translateY(-50%);
}
.cl-buy-pay .table-card .card-info-hidden {/* display: none;*/ }
.cl-buy-pay .table-card .text-charwrap {
position: absolute;
width: 22%;
left: 54px;
}
.cl-buy-pay .table-card .card-info-hidden .text-char.zIndex11 {z-index: 11;}
.cl-buy-pay .table-card .card-info-hidden .text-char .active { color: #000; }
.cl-buy-pay .table-card .card-info-hidden .text-char + .text-char { }
.cl-buy-pay .table-card .card-info-hidden .text-hidden1 { left: 52px; }
.cl-common-modal .cl-cmmodal.cl-buy-pay .table-card .card-info-hidden .text-hidden2 {left: 86px; padding-left: 2px; padding-right:0;}
.cl-buy-pay .table-card input.form-control.card-num { padding-right:0px; z-index: 10; position: relative; }
.cl-buy-pay .table-card input.form-control.card_2digit {width: 59%; display: inline-block;}
.cl-buy-pay .table-card input.form-control.card_2digit + span { margin-left: 15px;}
.cl-buy-pay .table-card input.form-control.card_2digit + span > .fa-circle:first-child {margin-right: 7px;}
.cl-buy-pay .table-card .cl-common-form-group input#card-num { z-index: 20; }
.cl-buy-pay .table-card .pagination {
margin: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
width: 100%;
position: relative;
}
.cl-buy-pay .table-card .pagination > li {float: left;width: 50%;}
.cl-buy-pay .pagination > li > a:hover,
.cl-buy-pay .pagination > li > span:hover,
.cl-buy-pay .pagination > li > a:focus,
.cl-buy-pay .pagination > li > span:focus {
background-color: transparent;
}
.cl-buy-pay .table-card .pagination > li > a {
width: 100%;
text-align: center;
font-size: 14px;
padding:16px 20px;
color: #b5b5b5;
}
.cl-buy-pay .table-card .pagination > li:first-child > a {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.cl-buy-pay .table-card .pagination > li:last-child > a {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.cl-buy-pay .table-card .pagination > li.active > a,
.cl-buy-pay .table-card .pagination > li.active > a:hover,
.cl-buy-pay .table-card .pagination > li.active > a:active,
.cl-buy-pay .table-card .pagination > li.active > a:focus,
.cl-buy-pay .table-card .pagination > li.active > a:visited {
background-color: #fff !important;
color: #4789e7;
border-color: #4789e7;
pointer-events: none;
cursor: default;
}
.cl-buy-pay .table-card .card-infopwd {float: right; width: 48%;}
.modal-dialog.cl-buy-pay .table-card .comp_cardtext {
text-align: left;
margin-bottom: 10px;
margin-top: -8px;
font-size: 14px;
color: #676767;
}
.modal-dialog.cl-buy-pay .table-card .comp_cardtext + .cl-common-form-wrap .cl-common-form-group {
padding-top: 15px;
padding-bottom: 13px;
}
.cl-buy-pay .table-card .card-infopwd .cl-common-form-wrap {width:58%;float: left;}
.cl-buy-pay .table-card .card-infopwd .cl-common-form-wrap + span {line-height: 48px; margin-left: 10px;}
.cl-buy-pay .table-card .card-infopwd .cl-common-form-wrap + span i:first-child {margin-right: 5px;}
.cl-buy-pay .table-card .card-infopwd + li .cl-common-form-wrap {border: none;}
.cl-buy-pay .table-card .card-infopwd + li .cl-common-form-group {padding: 0;}
.cl-buy-pay .table-card li:first-child .cl-common-form-group .cl-common-control-label {z-index: 12;}
.cl-buy-pay .jp-card-container {width:340px; height:210px;font-weight: 600;}
.cl-buy-pay .jp-card-container .jp-card .jp-card-front .jp-card-logo {font-weight: 'Open Sans','Nanum gothic';}
.cl-buy-pay #buy-card { max-width: 313px;border-radius: 3px;}
.modal-default .cl-buy-pay.modal-dialog.cl-modal .modal-footer {margin-top:60px; padding: 0 173px;}
.modal-default .cl-buy-pay.modal-dialog.cl-modal .modal-footer .btn-default.close-button-dialog {display: block;}
.modal-default .modal-dialog.cl-buy-pay .modal-footer button {
padding:21px 0;
max-width: 313px;
border-radius: 3px;
font-size:14px;
}
@media only screen and (max-width:992px) {
.cl-buy-pay .table-card .card-info-hidden .text-char span { margin-right:1px;}
}
@media only screen and (max-width:767px) {
.flat-modal.cl-flat-modal .modal-default .modal-dialog.cl-buy-pay .modal-footer {margin-bottom: 0;}
.flat-modal.cl-flat-modal .modal-default .modal-dialog.cl-buy-pay .modal-footer button {padding:21px 0; margin: 0 auto; }
.cl-buy-pay .table-card .card-info-hidden .text-char span {margin-right: 1px;}
}
@media only screen and (max-width:480px) {
.card-wrapper > .jp-card-container > .jp-card { min-width: 100%; }
.cl-common-modal .cl-cmmodal.cl-buy-pay .table-card .card-info-hidden .text-hidden1 {left: 54px;}
.cl-common-modal .cl-cmmodal.cl-buy-pay .table-card .card-info-hidden .text-hidden2 {left: 89px; padding-right: 2px; padding-left: 1px;}
.cl-common-modal .cl-cmmodal.cl-buy-pay .table-card .card-info-hidden .text-char * {font-family: 'Noto Sans KR',sans-serif;}
}
/*********** buy, upgrade - card modal END ******************/
/************************************************************/
/*about modal::sub page*/
.modal-default .modal-dialog.w480.sub-page .modal-footer { margin-top: 30px; }
.modal-default .modal-dialog.w480.sub-page .modal-body { margin-top: 30px; }
.modal-default .modal-dialog.w480.sub-page .modal-body .modal-title {
font-size: 25px;
text-align: left;
letter-spacing: -0.05em;
padding: 0 25px;
margin-top: 0;
margin-bottom :10px;
color: #2d343e;
}
.modal-default .modal-dialog.w480.sub-page .modal-title div.bottom-text { font-size: 11px; }
.modal-default .modal-dialog.w480.sub-page .modal-title + div,
.modal-default .modal-dialog.w480.sub-page .mplanPopup-content { padding: 0 25px; text-align: left; }
.modal-default .modal-dialog.w480.sub-page .modal-title + div .top-sub-text { color: #2d343e; padding-bottom: 0px; }
.modal-default .modal-dialog.w480.sub-page .modal-title + div .top-sub2-text {padding-bottom: 10px;}
.modal-default .modal-dialog.w480.sub-page .modal-title + div hr.divider { border-color: #e4e8eb; margin: 15px 0; }
.modal-default .modal-dialog.w480.sub-page .modal-title + div ul[class$="-list"] { padding-left: 0; }
.modal-default .modal-dialog.w480.sub-page .modal-title + div ul[class="site-list"] { font-size: 15px; }
.modal-default .modal-dialog.w480.sub-page .site-plan-disconnect .mplanPopup-content { padding : 0;}
/*about domain modal*/
.modal-default .modal-dialog .modal-body .ns-record-modal {
text-align: left;
padding: 0 0 10px 0;
float: left;
width: 100%;
}
.modal-default .modal-dialog .modal-body .ns-record-data {float:left; width: 100%; margin-bottom: 40px;}
.modal-default .modal-dialog .modal-body .ns-record-data:last-child {margin-bottom: 0;}
.modal-default .modal-dialog .modal-body .ns-record-modal span {float: left; width: 100%; margin: 0 0 10px 0;}
.ns-record-modal .t-header,
.ns-record-modal .t-row {
display: table;
width: 100%;
float: left;
font-size: 13px;
}
.ns-record-modal .t-row
.ns-record-modal .t-row ~ h6 { border-top: 1px solid #e5e8eb; margin-top: 0; padding-top: 40px;}
.ns-record-modal .t-header div {
display: table-cell;
text-align: center;
background-color: #f6f7f8;
line-height: 35px;
height: 35px;
}
.ns-record-data .t-row:last-child {border-bottom: 1px solid #eeeff0; }
.ns-record-data .t-row div {
display: table-cell;
text-align: center;
line-height: 35px;
height: 35px;
}
.ns-record-data .t-header div:nth-of-type(1),
.ns-record-data .t-header div:nth-of-type(2),
.ns-record-data .t-row div:nth-of-type(1),
.ns-record-data .t-row div:nth-of-type(2) { width: 28%; word-break: break-all; }
.ns-record-data .t-header div:nth-of-type(3),
.ns-record-data .t-row div:nth-of-type(3) { width: 28%; word-break: break-all; }
/**********************************************************************************/
/* 요금제 이전 / 연결 끊기 / 요금제 연결 modal *************************************/
.error-box .error-icon + .error.site-plan-error {
color:#ee445f;
font-size: 13px;
text-align: left;
font-weight: 400;
float: left;
width: calc(100% - 20px);
clear: initial;
margin: -4px 0 0 6px;
}
.error-box .error-icon {fill:#ee445f; float: left;}
.error-box { float: left; width: 100%; margin-top: 6px;}
.modal-default .modal-dialog.cl-cmmodal.cl-planUpgradeNonSite .modal-content {
padding-bottom: 80px;
}
.cl-exitPlanMove .site-list,
.cl-planMove .site-list {
border-top: 1px solid #eeeff0;
border-bottom: 1px solid #eeeff0;
}
.cl-planMove .site-list li span,
.cl-exitPlanMove .site-list li span { float: left; margin: 0 0 0 14px; color: #b1b3b7;}
.cl-planMove .site-list li.active span,
.cl-exitPlanMove .site-list li.active span {color:#696c71;}
.modal-default .modal-dialog.cl-cmmodal.cl-exitPlanMove .modal-content .modal-title,
.modal-default .modal-dialog.cl-cmmodal.cl-planMove .modal-content .modal-title {}
.cl-planMove .site-list {
padding: 20px 0 0 0;
margin: 30px 0 0 0;
}
.cl-planMove .bottom-text {
font-size: 13px;
text-align: left;
word-break: keep-all;
margin-top: 20px;
float: left;
}
.cl-planMove .plannotice_icon {float: left; width: 12px;}
.cl-planMove .plannotice_txt {float: left; width: calc(100% - 16px); margin-left: 4px;}
.cl-planMove .site-list li { margin-bottom: 18px; }
.cl-planExit .site-plan-disconnect {text-align: left; word-break: keep-all;}
.cl-planExit .site-plan-disconnect .top-sub2-text {
padding-bottom: 30px;
margin-bottom: 30px;
border-bottom: 1px solid #eeeff0;
}
.cl-planExit .site-plan-disconnect .icon { margin-right: 4px; float: left; margin-top: -1px;}
.cl-planExit .site-plan-disconnect .cancel-text { float: left; width: calc(100% - 10px);}
.cl-planExit .site-plan-disconnect .cancel-confirm {
border-top: 1px solid #eeeff0;
padding: 30px 0 0 0;
margin: 30px 0 0 0;
font-size: 14px;
color: #696c71;
float: left;
width: 100%;
text-align: center;
}
.cl-planExit .planPopup-content {text-align: center;}
.cl-exitPlanMove .site-list {
padding: 20px 0 0 0;
margin: 30px 0 0 0;
}
.cl-exitPlanMove .site-list + .bottom-text {
margin-top: 30px;
color: #ee445f;
font-size: 12px;
word-break: keep-all;
text-align: left;
}
.cl-exitPlanMove .site-list li {margin-bottom: 18px;}
.modal-default .modal-dialog.cl-cmmodal.cl-p130.cl-planExitOk .modal-footer{max-width: 240px;}
.modal-default .modal-dialog.cl-cmmodal.cl-p130.cl-planExitOk .modal-content {padding-bottom: 70px;}
.cl-planExitOk p { word-break: keep-all;}
.cl-planCancel .site-plan-cancel .top-sub-text .qna-guide-go:hover { color: #4789e7; }
.cl-planCancel .site-plan-cancel .top-sub-text .qna-guide-go { color: #4789e7; text-decoration: underline; }
.modal-dialog.w450 .coupon-modal { padding: 0 20px;}
.modal-dialog.w450 .coupon-modal table { margin-top: 20px; }
.modal-dialog.w450 .coupon-modal table thead tr th,
.modal-dialog.w450 .coupon-modal table tr td { border-top: 1px solid #dcdcdc; border-bottom: none; }
/* 요금제 변경 modal *************************************/
.modal-default .modal-dialog.cl-cmmodal.cl-planChange .modal-content {padding-bottom: 70px;}
.cl-planChange .modal-body .modal-title {
font-size: 24px;
margin-top: 15px;
margin-bottom: 25px;
padding-left: 0; padding-right: 0;
}
.cl-planChange .play-type {
position: relative;
padding-bottom: 25px;
margin: 0 auto;
}
.cl-planChange .play-type > ul > li {
border: 1px solid #dbdcdf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #222428;
display: inline-block;
float: left;
width: calc(50% - 5px);
padding: 40px 20px;
}
.cl-planChange .play-type .payment-name {
font-size: 24px;
margin-bottom: 20px;
}
.cl-planChange .play-type .payment-plan {
line-height: 1.2;
margin-top: 15px;
margin-bottom: 15px;
}
.cl-planChange .play-type .payment-plan > strong {
font-size: 26px;
font-weight: normal;
letter-spacing: -0.05em;
color: #2d343e;
margin-right: 3px;
}
.cl-planChange .play-type .btn-box > a {
padding: 14px 12px;
display: inline-block;
min-width: 100%;
font-size: 14px;
color: #fff;
background-color: #4789e7;
border: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.cl-planChange .plan-info-header > p {font-size: 16px;color: #4789e7;}
.cl-planChange .plan-info-header .detail-btn > .detail_arrow {
fill: #4789e7;
margin-left: 10px;
position: absolute;
top: 46%;
}
.cl-planChange .plan-info-header.openbox .detail-btn > .detail_arrow {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.cl-planChange .modal-footer button.btn {
width: 48%;
padding: 15px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#plan-info {
display: none;
float: left;
width: 100%;
position: relative;
/* -webkit-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-ms-transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
transition: height 1s ease-in-out; */
}
.plan-info-table {display: none;}
.cl-planChange #plan-info > .plan-info-table {display: block;}
#plan-info > .plan-info-table {
margin: 30px auto 0;
width: 100%;
font-size: 14px;
letter-spacing: -0.03em;
display: inline-block;
}
.plan-info-header.openbox + #plan-info {
float: left;
width: 100%;
}
#plan-info > .plan-info-table > .tb-row {
float: left;
width: 100%;
min-height: 40px;
/* line-height: 1.4;
max-height: 60px; */
}
#plan-info > .plan-info-table > .tb-row .explain-icon {fill: #4789e7; margin-left: 6px; transform: translateY(2px);}
#plan-info > .plan-info-table > .tb-row > div {
display: table-cell;
padding: 10px 5px;
min-height: 40px;
}
#plan-info > .plan-info-table > .tb-row > div i.fa-question-circle { margin-left:5px; }
#plan-info > .plan-info-table > .tb-row:nth-child(1) {
font-size: 16px;
color: #222428;
border-bottom: 1px solid #eeeff0;
}
#plan-info.in > .plan-info-table > .tb-row:nth-child(1) > div {
vertical-align: bottom;
border-bottom: 1px solid #eeeff0;
padding: 0 0 12px 0;
}
#plan-info > .plan-info-table > .tb-row:nth-child(n+2) > div { vertical-align: middle; }
#plan-info > .plan-info-table > .tb-row[disabled] span,
#plan-info > .plan-info-table > .tb-row[disabled] span + .explain-icon { color: #b1b3b7; }
#plan-info > .plan-info-table > .tb-row[disabled] .cm-popover-info + .popover {opacity: 1;}
#plan-info > .plan-info-table > .tb-row > div:nth-child(1) {
width: 100%;
max-width: 170px;
text-align: left;
vertical-align: middle;
padding-right: 0;
line-height: 22px;
display: inline-block;
}
#plan-info > .plan-info-table > .tb-row > div:nth-child(1n+2) {
width: 100%;
max-width: 120px;
text-align: center;
vertical-align: middle;
display: inline-block;
}
#plan-info > .plan-info-table .circle-icon {
fill: #4790e7;
transform: translateY(3px);
}
#plan-info > .plan-info-table .x-icon {
fill: #b1b3b7;
transform: translateY(3px);
}
.cl-planChange .plan-accordion,
.cl-planChange .plan-info-header {float: left; position: relative; width: 100%;}
.cl-planChange .plan-change-wrap .plan-subtitle {
font-size: 14px;
color: #696c71;
margin-bottom: 30px;
}
.cl-planChange .play-type {padding-bottom: 50px;}
.cl-planChange .plan-change-wrap .btn-box {padding: 0;}
.cl-planChange .play-type > ul > li .payment-info {
font-size: 14px;
color: #696c71;
line-height: 1.4;
}
.cl-planChange .play-type > ul > li + li { margin-left: 10px; }
.cl-planChange .play-type .payment-plan { margin: 40px 0 30px 0; color:#696c71; font-size: 14px;}
.cl-planChange .play-type .payment-plan .price-icon { }
.cl-planChange .play-type .payment-plan .price-text { font-size: 24px; }
.cl-planChange .play-type .payment-plan .price-month { }
.cl-planChange .modal-footer button.btn { padding: 23px 15px; }
#plan-info.in > .plan-info-table > .tb-row > div:nth-child(1) > br { display: none!important; }
/* 카드 리스트 모달 *********************************************/
.cl-selectCard .paycard_ul {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
}
.cl-selectCard .paycard_wrap {
border-radius: 5px;
border: 1px solid #dfe3e4;
margin-bottom: 20px;
padding: 10px 15px;
display: flex;
flex: 1 1 100%;
width: 100%;
}
.cl-selectCard .cl-dashboard-circlebox.hand {
position: relative;
cursor: pointer;
}
.cl-selectCard .cl-dashboard-circle-label::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
cursor: pointer;
}
.cl-selectCard .paycard_content {
position: relative;
z-index: 2;
pointer-events: none;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
flex: 1 1 100%;
width: 100%;
align-items: flex-start;
margin-left: 15px;
cursor: hand;
}
.cl-dashboard-circlebox .cl-dashboard-circle-text { font-size: 15px; color: #222428;}
/* 카드 선택 모달 carousel */
.modal-default .modal-dialog.cl-selectCard .modal-content {
padding-bottom: 50px;
}
.modal-default .modal-dialog.cl-selectCard .modal-body {
padding-bottom: 0;
}
.modal-default .modal-dialog.cl-cmmodal.cl-selectCard.cl-p70 .modal-footer {
max-width: 288px;
}
.modal-default .modal-dialog.cl-cmmodal.cl-selectCard.cl-p70 .modal-footer .btn {height: 52px;}
.modal-default .modal-dialog.cl-cmmodal.cl-selectCard.w580 {
width: calc(100% - 30px);
max-width: 580px;
}
.modal-default .modal-dialog.cl-selectCard .modal-title {
margin-bottom: 50px;
font-size: 28px;
font-weight: 400;
color: #222428;
text-align: center;
}
.cl-selectCard .paycard_list_container {
position: relative;
width: 448px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
border-radius: 5px;
background: #f4f5f9;
overflow: visible;
height: 240px;
border: 1px solid #eeeff0;
}
.cl-selectCard .select-card-auto-notice {
margin: 0 0 30px;
text-align: center;
font-size: 14px;
line-height: 1.5;
color: #696c71;
}
.cl-selectCard .select-card-auto-notice + .paycard_list_container {
margin-top: 0;
}
.cl-selectCard .paycard_viewport {
width: 100%;
margin: 0 auto;
overflow: hidden;
box-sizing: border-box;
}
.cl-selectCard .paycard_ul {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 10px;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
transition: transform .26s ease;
will-change: transform;
}
.cl-selectCard .paycard_wrap {
display: block;
flex: 0 0 260px;
width: 260px;
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
height: 166px;
border-radius: 15px;
}
.cl-selectCard .paycard_card {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 20px 15px;
border: 1px solid #e5e7e9;
border-radius: 15px;
background: #fff;
box-sizing: border-box;
color: #696c71;
cursor: pointer;
}
.cl-selectCard .paycard_wrap.selected .paycard_card {
border-style: solid;
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
}
.cl-selectCard .paycard_wrap.expired .paycard_card,
.cl-selectCard .paycard_wrap.expired.selected .paycard_card {
border-color: #e5e7e9;
background-color: #fafafa;
color: #d2d6db;
cursor: default;
border-style: solid;
}
.cl-selectCard .paycard_wrap.expired .cl-dashboard-circlebox {
pointer-events: none;
}
.cl-selectCard .paycard_legacy_wrap .paycard_card,
.cl-selectCard .paycard_legacy_wrap.selected .paycard_card,
.cl-selectCard .paycard_legacy_wrap.active .paycard_card {
background-color: #afbac8;
}
.cl-selectCard .paycard_add_button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 1px dashed #4789e7;
border-radius: 15px;
background: #ffffff80;
color: #8e9095;
cursor: pointer;
font-size:13px;
}
.cl-selectCard .paycard_add_icon {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 28px;
height: 28px;
margin-bottom: 10px;
background-color: #4789e7;
border-radius: 50%;
}
.cl-selectCard .paycard_add_icon::before,
.cl-selectCard .paycard_add_icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 1px;
background-color: #fff;
opacity: 1;
box-shadow: 0 0 0 .01px #fff;
transform: translate(-50%, -0.5px);
}
.cl-selectCard .paycard_add_icon::after {
transform: translate(-50%, -0.5px) rotate(90deg);
}
.cl-selectCard .paycard_add_text {
color: #4789e7;
font-size: 13px;
line-height: 1;
}
.cl-selectCard .paycard_add_wrap.is-disabled .paycard_add_button {
border-color: #d2d6db;
background-color: #f8f9fb;
color: #d2d6db;
cursor: default;
}
.cl-selectCard .paycard_add_wrap.is-disabled .paycard_add_icon {
background-color: #d2d6db;
color: #d2d6db;
}
.cl-selectCard .paycard_add_wrap.is-disabled .paycard_add_text {
color: #d2d6db;
}
.cl-selectCard .paycard_card input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.cl-selectCard .paycard_card_head {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
height: 18px;
}
.cl-selectCard .paycard_radio {
flex: 0 0 14px;
width: 14px;
height: 14px;
border: 1px solid #7daaf2;
border-radius: 50%;
background: #fff;
box-shadow: inset 0 0 0 3px #fff;
}
.cl-selectCard .paycard_wrap.selected .paycard_radio {
background-color: #4789e7;
}
.cl-selectCard .card_nickname {
min-width: 0;
overflow: hidden;
color: #222428;
font-size: 12px;
font-weight: normal;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.cl-selectCard .paycard_badge {
margin-left: auto;
border: 1px solid #4789e7;
border-radius: 10px;
color: #4789e7;
font-size: 11px;
width: auto;
min-width: 80px;
height: 18px;
padding: 0 8px;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.cl-selectCard .paycard_badge.is-en {
width: auto;
min-width: 34px;
padding: 0 8px;
white-space: nowrap;
}
.cl-selectCard .paycard_legacy_wrap .paycard_card_head {
flex-direction: column;
align-items: flex-start;
gap: 15px;
height: auto;
}
.cl-selectCard .paycard_legacy_wrap .cl-dashboard-circlebox {
min-width: 0;
}
.cl-selectCard .paycard_legacy_wrap .cl-dashboard-circle-text {
max-width: 126px;
overflow: hidden;
color: #222428;
font-size: 14px;
font-weight: 500;
line-height: 18px;
text-overflow: ellipsis;
white-space: nowrap;
}
.cl-selectCard .paycard_legacy_badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
height: 18px;
margin-left: 0;
padding: 0;
border-radius: 0;
background: transparent;
color: #ffffff;
font-size: 11px;
white-space: nowrap;
}
.cl-selectCard .paycard_expired_badge {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: auto;
color: #ee445f;
font-size: 12px;
}
.cl-selectCard .paycard_expired_icon {
position: relative;
width: 12px;
height: 12px;
border: 1px solid #ff3f5f;
border-radius: 50%;
box-sizing: border-box;
}
.cl-selectCard .paycard_expired_icon::before {
content: '';
position: absolute;
top: 2px;
left: 50%;
width: 1px;
height: 5px;
background-color: #ff3f5f;
transform: translateX(-50%);
}
.cl-selectCard .paycard_expired_icon::after {
content: '';
position: absolute;
left: 50%;
bottom: 2px;
width: 1px;
height: 1px;
background-color: #ff3f5f;
transform: translateX(-50%);
}
.cl-selectCard .paycard_number {
display: flex;
align-items: center;
gap: 10px;
margin-top: 20px;
color: #696c71;
font-size: 13px;
line-height: 1;
margin-left: 30px;
}
.cl-selectCard .paycard_mask {
display: inline-flex;
align-items: center;
flex: 0 0 29px;
width: 29px;
min-width: 29px;
justify-content: flex-start;
}
.cl-selectCard .paycard_mask::before {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #696c71;
box-shadow: 8px 0 0 #696c71, 16px 0 0 #696c71, 24px 0 0 #696c71;
}
.cl-selectCard .paycard_wrap.expired .cl-dashboard-circle-text,
.cl-selectCard .paycard_wrap.expired .paycard_last,
.cl-selectCard .paycard_wrap.expired .paycard_exp {
color: #d2d6db;
}
.cl-selectCard .paycard_wrap.expired .paycard_mask::before {
background-color: #d2d6db;
box-shadow: 8px 0 0 #d2d6db, 16px 0 0 #d2d6db, 24px 0 0 #d2d6db;
}
.modal-dialog.cl-selectCard .paycard_card {
position: relative;
overflow: hidden;
}
.modal-dialog.cl-selectCard .paycard_wrap.jp-card-identified:not(.expired):not(.paycard_add_wrap) .paycard_card:before {
content: " ";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 15px;
background-color: transparent !important;
opacity: 1;
pointer-events: none;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
transition: all 400ms ease;
background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 15% 80%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 15% 80%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), linear-gradient(-25deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
}
.modal-dialog.cl-selectCard .paycard_card > * {
position: relative;
z-index: 1;
}
.modal-dialog.cl-selectCard .paycard_wrap.jp-card-visa:not(.expired) .paycard_card,
.modal-dialog.cl-selectCard .paycard_wrap.jp-card-visaelectron:not(.expired) .paycard_card {
background-color: #191278;
}
.modal-dialog.cl-selectCard .paycard_wrap.jp-card-mastercard:not(.expired) .paycard_card {
background-color: #0061a8;
}
.modal-dialog.cl-selectCard .paycard_wrap.jp-card-maestro:not(.expired) .paycard_card {
background-color: #174160;
}
.modal-dialog.cl-selectCard .paycard_wrap.jp-card-amex:not(.expired) .paycard_card {
background-color: #a6bbe1;
}
.modal-dialog.cl-selectCard .paycard_wrap.jp-card-discover:not(.expired) .paycard_card {
background-color: #3d392e;
}
.modal-dialog.cl-selectCard .paycard_wrap.jp-card-dinersclub:not(.expired) .paycard_card {
background-color: #8baeae;
}
.modal-dialog.cl-selectCard .paycard_wrap.jp-card-dankort:not(.expired) .paycard_card {
background-color: #0055c7;
}
.modal-dialog.cl-selectCard .paycard_wrap.jp-card-jcb:not(.expired) .paycard_card {
background-color: #f8a61b;
}
.modal-dialog.cl-selectCard .paycard_legacy_wrap[class*="jp-card-"]:not(.expired) .paycard_card,
.modal-dialog.cl-selectCard .paycard_legacy_wrap[class*="jp-card-"]:not(.expired).active .paycard_card,
.modal-dialog.cl-selectCard .paycard_legacy_wrap[class*="jp-card-"]:not(.expired).selected .paycard_card {
background-color: #afbac8;
}
.modal-dialog.cl-selectCard .paycard_legacy_wrap[class*="jp-card-"]:not(.expired) .paycard_card::before {
display: none;
background-image: none;
}
.modal-dialog.cl-selectCard .paycard_wrap[class*="jp-card-"]:not(.expired):not(.paycard_add_wrap) .card_nickname,
.modal-dialog.cl-selectCard .paycard_wrap[class*="jp-card-"]:not(.expired):not(.paycard_add_wrap) .paycard_number,
.modal-dialog.cl-selectCard .paycard_wrap[class*="jp-card-"]:not(.expired):not(.paycard_add_wrap) .paycard_last,
.modal-dialog.cl-selectCard .paycard_wrap[class*="jp-card-"]:not(.expired):not(.paycard_add_wrap) .paycard_exp {
color: #fff;
}
.modal-dialog.cl-selectCard .paycard_wrap[class*="jp-card-"]:not(.expired):not(.paycard_add_wrap) .paycard_badge {
border-color: #fff;
color: #fff;
}
.modal-dialog.cl-selectCard .paycard_wrap[class*="jp-card-"]:not(.expired):not(.paycard_add_wrap) .paycard_mask::before {
background-color: #fff;
box-shadow: 7px 0 0 #fff, 14px 0 0 #fff, 21px 0 0 #fff;
}
.modal-dialog.cl-selectCard .paycard_brand_logo {
position: absolute;
right: 15px;
bottom: 20px;
display: block;
color: #fff;
pointer-events: none;
}
.modal-dialog.cl-selectCard .paycard_brand_visa svg {
display: block;
width: 56px;
height: 18px;
}
.modal-dialog.cl-selectCard .paycard_brand_visaelectron svg {
display: block;
width: 56px;
height: 26px;
}
.modal-dialog.cl-selectCard .paycard_brand_mastercard svg,
.modal-dialog.cl-selectCard .paycard_brand_maestro svg {
display: block;
width: 42px;
height: 26px;
}
.modal-dialog.cl-selectCard .paycard_brand_amex svg {
display: block;
width: 36px;
height: 36px;
}
.modal-dialog.cl-selectCard .paycard_brand_discover svg {
display: block;
width: 50px;
height: 32px;
}
.modal-dialog.cl-selectCard .paycard_brand_dinersclub svg {
display: block;
width: 76px;
height: 20px;
}
.modal-dialog.cl-selectCard .paycard_brand_dankort svg {
display: block;
width: 48px;
height: 29px;
}
.modal-dialog.cl-selectCard .paycard_brand_jcb svg {
display: block;
width: 39px;
height: 30px;
}
.modal-default .modal-dialog.cl-selectCard .paycard_list_container {
width: 380px;
height: 240px;
padding: 26px 0 0;
margin-bottom: 10px;
}
.modal-default .modal-dialog.cl-selectCard .paycard_viewport {
padding-bottom: 15px;
margin-bottom: -15px;
}
.modal-default .modal-dialog.cl-selectCard .paycard_ul {
gap: 10px;
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap {
position: relative;
flex-basis: 260px;
width: 260px;
height: 160px;
z-index: 1;
opacity: .55;
transition: opacity .26s ease;
}
.modal-default .modal-dialog.cl-selectCard .paycard_card {
width: 260px;
height: 160px;
padding: 15px;
border: 0;
border-radius: 15px;
box-shadow: none;
transform: scale(.961538, .9125);
transform-origin: center center;
transition: transform .26s ease;
}
.modal-default .modal-dialog.cl-selectCard .paycard_legacy_wrap .paycard_card {
background-color: #afbac8;
}
.modal-default .modal-dialog.cl-selectCard .paycard_add_button {
transform: scale(.961538, .9125);
transform-origin: center center;
transition: transform .26s ease;
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.active {
z-index: 2;
opacity: 1;
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.active .paycard_card,
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.active .paycard_add_button {
transform: scale(1);
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.active .paycard_card {
box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap:has(+ .paycard_wrap.active) .paycard_card,
.modal-default .modal-dialog.cl-selectCard .paycard_wrap:has(+ .paycard_wrap.active) .paycard_add_button {
transform-origin: right center;
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.active + .paycard_wrap .paycard_card,
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.active + .paycard_wrap .paycard_add_button {
transform-origin: left center;
}
.modal-default .modal-dialog.cl-selectCard .paycard_legacy_wrap .paycard_card,
.modal-default .modal-dialog.cl-selectCard .paycard_legacy_wrap.active .paycard_card,
.modal-default .modal-dialog.cl-selectCard .paycard_legacy_wrap.selected .paycard_card {
background-color: #9ba1aa;
}
.modal-default .modal-dialog.cl-selectCard .paycard_card_head {
gap: 10px;
height: 18px;
}
.modal-default .modal-dialog.cl-selectCard .paycard_legacy_wrap .paycard_card_head {
flex-direction: column;
align-items: flex-start;
gap: 15px;
height: auto;
}
.modal-default .modal-dialog.cl-selectCard .card_nickname {
order: 1;
max-width: 168px;
font-size: 14px;
line-height: 18px;
}
.modal-default .modal-dialog.cl-selectCard .paycard_badge {
order: 2;
flex: 0 0 auto;
width: auto;
min-width: 80px;
max-width: 80px;
height: 18px;
padding: 0 8px;
margin-left: auto;
border-radius: 10px;
font-size: 11px;
white-space: nowrap;
}
.modal-default .modal-dialog.cl-selectCard .paycard_legacy_wrap .card_nickname,
.modal-default .modal-dialog.cl-selectCard .paycard_legacy_wrap .paycard_legacy_badge {
order: initial;
color: #ffffff;
}
.modal-default .modal-dialog.cl-selectCard .paycard_number {
margin-top: 10px;
margin-left: 0;
font-size: 12px;
line-height: 1.6;
}
.modal-default .modal-dialog.cl-selectCard .paycard_exp {
position: absolute;
left: 20px;
bottom: 25px;
margin: 0;
font-size: 12px;
line-height: 1;
}
.modal-default .modal-dialog.cl-selectCard .paycard_brand_logo {
right: 20px;
bottom: 24px;
}
.modal-default .modal-dialog.cl-selectCard .paycard_dots {
margin-top: 14px;
}
.modal-default .modal-dialog.cl-selectCard .paycard_arrow_prev {
left: -51px;
}
.modal-default .modal-dialog.cl-selectCard .paycard_arrow_next {
right: -51px;
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.expired .paycard_card {
border: 0;
color: #fff;
cursor: default;
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.expired.jp-card-visa .paycard_card,
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.expired.jp-card-visaelectron .paycard_card {
background-color: #191278;
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.expired.jp-card-mastercard .paycard_card {
background-color: #0061a8;
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.expired.jp-card-maestro .paycard_card {
background-color: #174160;
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.expired.jp-card-amex .paycard_card {
background-color: #a6bbe1;
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.expired.jp-card-discover .paycard_card {
background-color: #3d392e;
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.expired.jp-card-dinersclub .paycard_card {
background-color: #8baeae;
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.expired.jp-card-dankort .paycard_card {
background-color: #0055c7;
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.expired.jp-card-jcb .paycard_card {
background-color: #f8a61b;
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.expired .paycard_expired_badge {
display: none;
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.expired[class*="jp-card-"] .card_nickname {
color: #fff;
}
.modal-default .modal-dialog.cl-selectCard .paycard_expired_overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 260px;
height: 160px;
margin: 0;
padding: 15px;
border-radius: 15px;
box-sizing: border-box;
pointer-events: none;
}
.modal-default .modal-dialog.cl-selectCard .paycard_expired_overlay::before {
content: "";
position: absolute;
inset: 0;
width: 260px;
height: 160px;
margin: 0;
padding: 0;
opacity: .55;
border-radius: 15px;
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
background-color: #000;
box-sizing: border-box;
pointer-events: none;
}
.modal-default .modal-dialog.cl-selectCard .paycard_expired_overlay_icon {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-right: 4px;
color: #fff;
}
.modal-default .modal-dialog.cl-selectCard .paycard_expired_overlay_icon svg {
display: block;
width: 16px;
height: 16px;
fill: currentColor;
}
.modal-default .modal-dialog.cl-selectCard .paycard_expired_overlay_text {
position: relative;
z-index: 1;
height: 20px;
margin: 0;
font-family: NotoSansCJKKr;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.37;
letter-spacing: normal;
text-align: center;
color: #fff;
white-space: nowrap;
}
.cl-selectCard .paycard_exp {
display: flex;
align-items: center;
gap: 5px;
margin-top: 47px;
color: #696c71;
font-size: 12px;
text-align: left;
margin-left: 30px;
}
.cl-selectCard .paycard_arrow {
position: absolute;
top: 50%;
width: 36px;
height: 36px;
padding: 0;
border: none;
border-radius: 50%;
color: #696c71;
line-height: 1;
transform: translateY(-50%);
transition: color .16s ease, opacity .16s ease, visibility .16s ease, background-color .16s ease;
background-color: #f4f5f9;
border: 1px solid #e5e7e9;
}
.cl-selectCard .paycard_arrow:not(:disabled):hover {
background-color: #EEEFF3;
}
.cl-selectCard .paycard_arrow:disabled {
background-color: #f4f5f9;
opacity: 0;
visibility: hidden;
cursor: default;
pointer-events: none;
}
.cl-selectCard .paycard_arrow:disabled:hover {
background-color: #f4f5f9;
}
.cl-selectCard .paycard_arrow svg {
fill: currentColor;
}
.cl-selectCard .paycard_arrow_prev {
left: -56px;
transform: translateY(-50%) rotate(180deg);
}
.cl-selectCard .paycard_arrow_next {
right: -56px;
}
.cl-selectCard .paycard_dots {
display: flex;
justify-content: center;
margin-top: 20px;
}
.cl-selectCard .paycard_dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
border: none;
background: transparent;
padding: 5px;
}
.cl-selectCard .paycard_dot::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #b4b5b9;
}
.cl-selectCard .paycard_dot.active::before {
background-color: #222428;
}
.plan-inline-card-select {
width: 100%;
margin: 30px 0 15px 0;
}
.plan-inline-card-select.cl-selectCard .paycard_list_container {
width: 313px;
max-width: 100%;
height: 215px;
margin: 0 auto;
padding: 20px 0 10px;
border: 0;
border-radius: 10px;
background: #f4f5f9;
}
.plan-inline-card-select.cl-selectCard .paycard_viewport {
height: 160px;
padding-bottom: 0;
margin-bottom: 0;
overflow: visible;
clip-path: inset(-100vmax 0 -100vmax 0);
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .12));
}
.plan-inline-card-select.cl-selectCard .paycard_list_container:has(.paycard_add_wrap.active) .paycard_viewport,
.plan-inline-card-select.cl-selectCard .paycard_list_container:has(.paycard_add_wrap.drag-preview-active) .paycard_viewport {
filter: none;
}
.plan-inline-card-select.cl-selectCard .paycard_ul {
gap: 10px;
align-items: center;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap {
position: relative;
flex-basis: 260px;
width: 260px;
height: 160px;
z-index: 1;
opacity: .55;
transition: opacity .26s ease;
}
.plan-inline-card-select.cl-selectCard .paycard_card {
position: relative;
overflow: hidden;
border: 0;
border-radius: 15px;
height: 160px;
margin-top: 0;
padding: 15px;
background: #afbac8;
box-shadow: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform .26s ease;
-moz-transition: transform .26s ease;
transition: transform .26s ease;
transform: translateX(var(--paycard-inline-gap-shift, 0px)) scale(.961538, .9125);
transform-origin: center center;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.jp-card-identified .paycard_card:before {
content: " ";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 15px;
background-color: transparent !important;
opacity: 1;
pointer-events: none;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
transition: all 400ms ease;
background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 15% 80%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 15% 80%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), linear-gradient(-25deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
}
.plan-inline-card-select.cl-selectCard .paycard_card > * {
position: relative;
z-index: 1;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.active,
.plan-inline-card-select.cl-selectCard .paycard_add_wrap.active {
opacity: 1;
}
.plan-inline-card-select.cl-selectCard .paycard_add_wrap {
height: 160px;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.active {
z-index: 2;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.active .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_wrap.active .paycard_add_button {
transform: scale(1);
}
.plan-inline-card-select.cl-selectCard .paycard_wrap:has(~ .paycard_wrap.active) .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_wrap:has(~ .paycard_wrap.active) .paycard_add_button {
transform-origin: right center;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.active ~ .paycard_wrap .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_wrap.active ~ .paycard_wrap .paycard_add_button {
transform-origin: left center;
}
.plan-inline-card-select.cl-selectCard .paycard_add_button {
transition: transform .26s ease;
height: 160px;
margin-top: 0;
box-shadow: none !important;
transform: translateX(var(--paycard-inline-gap-shift, 0px)) scale(.961538, .9125);
transform-origin: center center;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.jp-card-visa .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_wrap.jp-card-visaelectron .paycard_card {
background-color: #191278;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.jp-card-mastercard .paycard_card {
background-color: #0061a8;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.jp-card-maestro .paycard_card {
background-color: #174160;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.jp-card-amex .paycard_card {
background-color: #a6bbe1;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.jp-card-discover .paycard_card {
background-color: #3d392e;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.jp-card-dinersclub .paycard_card {
background-color: #8baeae;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.jp-card-dankort .paycard_card {
background-color: #0055c7;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.jp-card-jcb .paycard_card {
background-color: #f8a61b;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.expired .paycard_card {
border: 0;
color: #fff;
cursor: default;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.expired .paycard_expired_badge {
display: none;
}
.plan-inline-card-select.cl-selectCard .paycard_legacy_wrap .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_legacy_wrap.active .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_legacy_wrap.selected .paycard_card {
background-color: #afbac8;
}
.plan-inline-card-select.cl-selectCard .paycard_expired_overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 260px;
height: 160px;
margin: 0;
padding: 0;
border-radius: 15px;
box-sizing: border-box;
pointer-events: none;
}
.plan-inline-card-select.cl-selectCard .paycard_expired_overlay::before {
content: "";
position: absolute;
inset: 0;
width: 260px;
height: 160px;
margin: 0;
padding: 0;
opacity: .55;
border-radius: 15px;
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
background-color: #000;
box-sizing: border-box;
pointer-events: none;
}
.plan-inline-card-select.cl-selectCard .paycard_expired_overlay_icon {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-right: 4px;
color: #fff;
}
.plan-inline-card-select.cl-selectCard .paycard_expired_overlay_icon svg {
display: block;
width: 16px;
height: 16px;
fill: currentColor;
}
.plan-inline-card-select.cl-selectCard .paycard_expired_overlay_text {
position: relative;
z-index: 1;
width: 80px;
height: 20px;
margin: 0;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.37;
letter-spacing: normal;
text-align: center;
color: #fff;
white-space: nowrap;
}
.plan-inline-card-select.cl-selectCard .paycard_card_head {
position: relative;
height: 20px;
}
.plan-inline-card-select.cl-selectCard .paycard_legacy_wrap .paycard_card_head {
flex-direction: column;
align-items: flex-start;
gap: 15px;
height: auto;
}
.plan-inline-card-select.cl-selectCard .card_nickname {
display: block;
flex: 1 1 auto;
width: auto;
max-width: 130px;
height: 20px;
min-width: 0;
overflow: hidden;
font-size: 14px;
font-weight: normal;
line-height: 20px;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.plan-inline-card-select.cl-selectCard .paycard_number {
gap: 10px;
height: 18px;
margin-top: 10px;
margin-left: 0;
font-size: 12px;
font-weight: normal;
line-height: 18px;
}
.plan-inline-card-select.cl-selectCard .paycard_mask {
width: 25px;
min-width: 25px;
}
.plan-inline-card-select.cl-selectCard .paycard_mask::before {
width: 4px;
height: 4px;
box-shadow: 7px 0 0 #696c71, 14px 0 0 #696c71, 21px 0 0 #696c71;
}
.plan-inline-card-select.cl-selectCard .paycard_exp {
position: absolute;
left: 15px;
bottom: 15px;
gap: 10px;
height: 17px;
margin-top: 0;
margin-left: 0;
font-size: 11px;
font-weight: normal;
line-height: 17px;
}
.plan-inline-card-select.cl-selectCard .paycard_exp_label {
flex: 0 0 auto;
width: auto;
min-width: 40px;
white-space: nowrap;
}
.plan-inline-card-select.cl-selectCard .paycard_brand_logo {
position: absolute;
right: 15px;
bottom: 15px;
display: block;
color: #fff;
pointer-events: none;
}
.plan-inline-card-select.cl-selectCard .paycard_brand_visa svg {
display: block;
width: 42px;
height: auto;
}
.plan-inline-card-select.cl-selectCard .paycard_brand_visaelectron svg {
display: block;
width: 42px;
height: auto;
}
.plan-inline-card-select.cl-selectCard .paycard_brand_mastercard svg,
.plan-inline-card-select.cl-selectCard .paycard_brand_maestro svg {
display: block;
width: 42px;
height: 26px;
}
.plan-inline-card-select.cl-selectCard .paycard_brand_amex svg {
display: block;
width: 36px;
height: 36px;
}
.plan-inline-card-select.cl-selectCard .paycard_brand_discover svg {
display: block;
width: 50px;
height: 32px;
}
.plan-inline-card-select.cl-selectCard .paycard_brand_dinersclub svg {
display: block;
width: 76px;
height: 20px;
}
.plan-inline-card-select.cl-selectCard .paycard_brand_dankort svg {
display: block;
width: 48px;
height: 29px;
}
.plan-inline-card-select.cl-selectCard .paycard_brand_jcb svg {
display: block;
width: 39px;
height: 30px;
}
.plan-inline-card-select.cl-selectCard .paycard_badge {
position: absolute;
top: 0px;
right: 0;
width: auto;
min-width: 80px;
max-width: 80px;
height: 18px;
padding: 0 8px;
margin-left: 0;
border-radius: 10px;
font-size: 11px;
white-space: nowrap;
}
.plan-inline-card-select.cl-selectCard .paycard_dots {
margin: 10px auto 0;
filter: none;
transform: none;
}
.plan-inline-card-select.cl-selectCard .paycard_arrow {
top: 45%;
width: 40px;
height: 40px;
background-color: #f8f9fb;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap:not(.expired):not(.paycard_add_wrap) .card_nickname,
.plan-inline-card-select.cl-selectCard .paycard_wrap:not(.expired):not(.paycard_add_wrap) .paycard_number,
.plan-inline-card-select.cl-selectCard .paycard_wrap:not(.expired):not(.paycard_add_wrap) .paycard_last,
.plan-inline-card-select.cl-selectCard .paycard_wrap:not(.expired):not(.paycard_add_wrap) .paycard_exp {
color: #fff;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap:not(.expired):not(.paycard_add_wrap) .paycard_mask::before {
background-color: #fff;
box-shadow: 7px 0 0 #fff, 14px 0 0 #fff, 21px 0 0 #fff;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.active:not(.expired):not(.paycard_add_wrap) .card_nickname,
.plan-inline-card-select.cl-selectCard .paycard_wrap.active:not(.expired):not(.paycard_add_wrap) .paycard_number,
.plan-inline-card-select.cl-selectCard .paycard_wrap.active:not(.expired):not(.paycard_add_wrap) .paycard_last,
.plan-inline-card-select.cl-selectCard .paycard_wrap.active:not(.expired):not(.paycard_add_wrap) .paycard_exp {
color: #fff;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.active:not(.expired):not(.paycard_add_wrap) .paycard_mask::before {
background-color: #fff;
box-shadow: 7px 0 0 #fff, 14px 0 0 #fff, 21px 0 0 #fff;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.active:not(.expired):not(.paycard_add_wrap) .paycard_badge {
border-color: #fff;
color: #fff;
}
.modal-dialog.cl-selectCard .paycard_legacy_wrap .paycard_card,
.modal-dialog.cl-selectCard .paycard_legacy_wrap.active .paycard_card,
.modal-dialog.cl-selectCard .paycard_legacy_wrap.selected .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_legacy_wrap .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_legacy_wrap.active .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_legacy_wrap.selected .paycard_card {
background-color: rgba(0, 0, 0, 0.5);
}
.modal-dialog.cl-selectCard .paycard_legacy_wrap .paycard_card::before,
.plan-inline-card-select.cl-selectCard .paycard_legacy_wrap .paycard_card::before {
content: " ";
display: block;
position: absolute;
inset: 0;
border-radius: 15px;
background-color: transparent !important;
background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.03) 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-linear-gradient(210deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), repeating-radial-gradient(circle at 15% 80%, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), linear-gradient(-25deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
opacity: 1;
pointer-events: none;
}
@media (max-width: 520px) {
.plan-inline-card-select.cl-selectCard .paycard_list_container {
width: 313px;
max-width: 100%;
}
}
.modal-default .modal-dialog.cl-selectCard .modal-footer {
width: 288px;
margin: 30px auto 0;
padding: 0;
}
.modal-default .modal-dialog.cl-selectCard .modal-footer .btn {
width: 100%;
height: 52px;
margin: 0;
}
.modal-default .modal-dialog.cl-selectCard.is-active-expired-card .modal-footer .ok-button-dialog {
border-color: #d2d6db !important;
background-color: #d2d6db !important;
color: #fff !important;
box-shadow: none !important;
cursor: default;
}
.modal-default .modal-dialog.cl-selectCard.is-active-limit-reached-card .modal-footer .ok-button-dialog,
.modal-default .modal-dialog.cl-selectCard .modal-footer .ok-button-dialog:disabled,
.modal-default .modal-dialog.cl-selectCard .modal-footer .ok-button-dialog.is-disabled-visual {
border-color: #d2d6db !important;
background-color: #d2d6db !important;
color: #fff !important;
box-shadow: none !important;
outline: none !important;
opacity: 1 !important;
filter: alpha(opacity=100) !important;
pointer-events: auto !important;
cursor: default;
}
.modal-default .modal-dialog.cl-selectCard .modal-footer .close-button-dialog {
margin-top: 18px;
border: none;
background: transparent !important;
color: #b1b3b7;
}
.modal-default .modal-dialog.expired-card-select-notice-modal .expired-card-select-notice {
text-align: center;
color: #696c71;
font-size: 14px;
line-height: 1.7;
}
@media only screen and (max-width:767px) {
.modal-default .modal-dialog.cl-cmmodal.cl-selectCard.w580 {
width: 100%;
max-width: 100%;
height: 100%;
margin: 0;
padding: 44px 0 0 0;
overflow: hidden;
-webkit-border-top-left-radius: 20px;
-moz-border-top-left-radius: 20px;
border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-top-right-radius: 20px;
border-top-right-radius: 20px;
}
.modal-default .modal-dialog.cl-cmmodal.cl-selectCard.w580 .modal-content {
min-height: 100%;
height: 100%;
overflow: hidden;
overflow-y: auto;
-webkit-border-top-left-radius: 20px;
-moz-border-top-left-radius: 20px;
border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-top-right-radius: 20px;
border-top-right-radius: 20px;
}
.modal-default .modal-dialog.cl-selectCard .modal-content {
overflow: visible;
}
.modal-default .modal-dialog.cl-selectCard .paycard_list_container { height: 225px; padding: 20px 0 10px 0;}
.modal-default .modal-dialog.cl-selectCard .paycard_list_container,
.cl-selectCard .paycard_list_container {
box-sizing: border-box;
width: 100%;
max-width: 100%;
padding-right: 0;
padding-left: 0;
}
.modal-default .modal-dialog.cl-selectCard .paycard_viewport,
.cl-selectCard .paycard_viewport {
width: 100%;
touch-action: pan-y;
-webkit-user-select: none;
user-select: none;
}
.modal-default .modal-dialog.cl-selectCard .paycard_viewport {
padding-bottom: 15px;
margin-bottom: -15px;
}
.modal-default .modal-dialog.cl-selectCard .paycard_ul,
.cl-selectCard .paycard_ul {
gap: 10px;
}
.modal-default .modal-dialog.cl-selectCard .paycard_dots {
margin-top: 10px;
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap,
.cl-selectCard .paycard_wrap {
flex-basis: min(260px, calc(100% - 72px));
width: min(260px, calc(100% - 72px));
}
.modal-default .modal-dialog.cl-selectCard .paycard_card,
.cl-selectCard .paycard_card {
width: 100%;
}
.modal-default .modal-dialog.cl-selectCard .paycard_card,
.modal-default .modal-dialog.cl-selectCard .paycard_add_button {
transform: scale(.961538, .9125);
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap:has(+ .paycard_wrap.active) .paycard_card,
.modal-default .modal-dialog.cl-selectCard .paycard_wrap:has(+ .paycard_wrap.active) .paycard_add_button {
transform-origin: right center;
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.active + .paycard_wrap .paycard_card,
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.active + .paycard_wrap .paycard_add_button {
transform-origin: left center;
}
.modal-default .modal-dialog.cl-selectCard .paycard_list_container.is-drag-preview .paycard_wrap.active.drag-preview-inactive {
z-index: 1;
opacity: .55;
}
.modal-default .modal-dialog.cl-selectCard .paycard_list_container.is-drag-preview .paycard_wrap.active.drag-preview-inactive .paycard_card,
.modal-default .modal-dialog.cl-selectCard .paycard_list_container.is-drag-preview .paycard_wrap.active.drag-preview-inactive .paycard_add_button {
box-shadow: none;
transform: scale(var(--drag-preview-modal-inactive-scale-x, .961538), var(--drag-preview-modal-inactive-scale-y, .9125));
}
.modal-default .modal-dialog.cl-selectCard .paycard_list_container.is-drag-preview .paycard_wrap.drag-preview-active {
z-index: 2;
opacity: 1;
}
.modal-default .modal-dialog.cl-selectCard .paycard_list_container.is-drag-preview .paycard_wrap.drag-preview-active .paycard_card,
.modal-default .modal-dialog.cl-selectCard .paycard_list_container.is-drag-preview .paycard_wrap.drag-preview-active .paycard_add_button {
box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
transform: scale(var(--drag-preview-modal-active-scale-x, 1), var(--drag-preview-modal-active-scale-y, 1));
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap:has(+ .paycard_wrap.drag-preview-active) .paycard_card,
.modal-default .modal-dialog.cl-selectCard .paycard_wrap:has(+ .paycard_wrap.drag-preview-active) .paycard_add_button {
transform-origin: right center;
}
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.drag-preview-active + .paycard_wrap .paycard_card,
.modal-default .modal-dialog.cl-selectCard .paycard_wrap.drag-preview-active + .paycard_wrap .paycard_add_button {
transform-origin: left center;
}
.modal-default .modal-dialog.cl-selectCard .paycard_list_container.is-drag-preview .paycard_wrap.drag-preview-after .paycard_card,
.modal-default .modal-dialog.cl-selectCard .paycard_list_container.is-drag-preview .paycard_wrap.drag-preview-after .paycard_add_button {
transform: translateX(var(--drag-preview-modal-after-shift, 0px)) scale(.961538, .9125);
transform-origin: left center;
}
.modal-default .modal-dialog.cl-selectCard .paycard_list_container.is-drag-preview .paycard_wrap.drag-preview-before .paycard_card,
.modal-default .modal-dialog.cl-selectCard .paycard_list_container.is-drag-preview .paycard_wrap.drag-preview-before .paycard_add_button {
transform: translateX(var(--drag-preview-modal-before-shift, 0px)) scale(.961538, .9125);
transform-origin: right center;
}
.cl-selectCard .paycard_arrow {
display: none;
}
.modal-dialog.cl-planChange .play-type > ul > li {width: 100%; padding: 30px 20px;}
.cl-planChange .play-type .payment-plan {margin-top: 30px;}
.cl-planChange .play-type .payment-plan .price-text,
.cl-planChange .play-type .payment-name {font-size: 20px;}
.modal-dialog.cl-planChange .play-type > ul > li + li {margin: 10px 0 0 0;}
.modal-dialog.cl-planChange .play-type > ul > li + li { }
.modal-dialog.cl-planChange .modal-footer .btn,
.modal-dialog.cl-planChange .modal-footer { margin-bottom: 0; }
#plan-info.in > .plan-info-table { /*display: none;*/
overflow-x: hidden;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
}
@media only screen and (max-width:480px) {
.plan-inline-card-select.cl-selectCard .paycard_list_container {
width: 100%;
max-width: 100%;
min-width: 100%;
}
.plan-inline-card-select.cl-selectCard .paycard_viewport {
width: auto;
}
.plan-inline-card-select.cl-selectCard .paycard_ul {
gap: 10px;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap {
flex-basis: 260px;
width: 260px;
}
#plan-info > .plan-info-table > .tb-row > div:nth-child(1) {
max-width: 100%;
width: 47%;
}
#plan-info > .plan-info-table > .tb-row > div:nth-child(1n+2) {
max-width: 100%;
width: 25%;
}
}
@media only screen and (max-width:767px) {
.plan-inline-card-select.cl-selectCard {
overflow-x: clip;
overflow-y: visible;
}
.plan-inline-card-select.cl-selectCard .paycard_viewport {
height: 160px;
padding-bottom: 0;
margin-bottom: 0;
}
.plan-inline-card-select.cl-selectCard .paycard_ul {
gap: 10px;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap,
.plan-inline-card-select.cl-selectCard .paycard_add_wrap {
flex-basis: 260px;
width: 260px;
height: 160px;
}
.plan-inline-card-select.cl-selectCard .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_add_button {
transform: translateX(var(--paycard-inline-gap-shift, 0px)) scale(.961538, .9125);
transform-origin: center center;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap:not(.active) .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_add_wrap:not(.active) .paycard_add_button {
width: 100%;
height: 160px;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.active .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_add_wrap.active .paycard_add_button {
transform: scale(1);
transform-origin: center center;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap:has(~ .paycard_wrap.active) .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_wrap:has(~ .paycard_wrap.active) .paycard_add_button {
transform-origin: right center;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.active ~ .paycard_wrap .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_wrap.active ~ .paycard_wrap .paycard_add_button {
transform-origin: left center;
}
.plan-inline-card-select.cl-selectCard .paycard_list_container.is-drag-preview .paycard_wrap.active.drag-preview-inactive .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_list_container.is-drag-preview .paycard_add_wrap.active.drag-preview-inactive .paycard_add_button {
transform: scale(var(--drag-preview-inline-inactive-scale-x, .961538), var(--drag-preview-inline-inactive-scale-y, .9125));
}
.plan-inline-card-select.cl-selectCard .paycard_list_container.is-drag-preview .paycard_wrap.drag-preview-active .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_list_container.is-drag-preview .paycard_add_wrap.drag-preview-active .paycard_add_button {
transform: scale(var(--drag-preview-inline-active-scale-x, 1), var(--drag-preview-inline-active-scale-y, 1));
transform-origin: center center;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap:has(~ .paycard_wrap.drag-preview-active) .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_wrap:has(~ .paycard_wrap.drag-preview-active) .paycard_add_button {
transform-origin: right center;
}
.plan-inline-card-select.cl-selectCard .paycard_wrap.drag-preview-active ~ .paycard_wrap .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_wrap.drag-preview-active ~ .paycard_wrap .paycard_add_button {
transform-origin: left center;
}
.plan-inline-card-select.cl-selectCard .paycard_list_container.is-drag-preview .paycard_wrap.drag-preview-after .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_list_container.is-drag-preview .paycard_add_wrap.drag-preview-after .paycard_add_button {
transform: translateX(var(--drag-preview-inline-after-shift, 0px)) scale(.961538, .9125);
}
.plan-inline-card-select.cl-selectCard .paycard_list_container.is-drag-preview .paycard_wrap.drag-preview-before .paycard_card,
.plan-inline-card-select.cl-selectCard .paycard_list_container.is-drag-preview .paycard_add_wrap.drag-preview-before .paycard_add_button {
transform: translateX(var(--drag-preview-inline-before-shift, 0px)) scale(.961538, .9125);
}
.plan-inline-card-select.cl-selectCard .paycard_expired_overlay,
.plan-inline-card-select.cl-selectCard .paycard_expired_overlay::before {
width: 100%;
height: 160px;
padding: 0;
}
}
/*planLK Modal*/
#planLK-modal .modal-dialog {
min-width: 45%;
text-align: left;
}
#planLK-modal .modal-content {
background-color: #fbfbfb;
font-family: 'Noto Sans KR';/*'Open Sans', 'Nanum Gothic';*/
}
#planLK-modal .modal-body {
padding: 0 35px;
}
#planLK-modal .plan-title {
font-family: 'Open Sans', 'Noto Sans KR';
font-size: 23px;
letter-spacing: -0.02em;
color: #212327;
}
#planLK-modal .plan-title h2 {
position: relative;
display: inline-block;
font-size: 52px;
color: #212327;
margin-top: 5px;
margin-bottom: 15px;
}
#planLK-modal .plan-title h2.en {
font-size: 48px;
}
#planLK-modal .plan-title label {
position: absolute;
bottom: -25px; right: 15px;
font-size: 14px;
font-weight: lighter;
text-align: right;
color: #868a90;
}
#planLK-modal .plan-title + hr {
width: 25px;
border-width: 5px;
border-color: #abafb4;
margin: 20px auto 30px 0;
}
#planLK-modal .plan-method {
position: relative;
display: table;
width: 100%;
table-layout: fixed;
margin-top: 20px;
}
#planLK-modal .plan-method .img-box,
#planLK-modal .plan-method .text-box { display: table-row; }
#planLK-modal .plan-method .text-box {
vertical-align: middle;
background-color: #fff;
padding: 5px;
}
#planLK-modal .plan-method .step {
/*display: inline-block;*/
display: table-cell;
width: 29.999%;
vertical-align: middle;
}
#planLK-modal .plan-method .step .img-wrap img { margin: 0 auto 15px; }
#planLK-modal .plan-method .step .text {
background-color: #fff;
vertical-align: middle;
text-align: center;
font-weight: 500;
line-height: 1.4;
min-height: 80px;
padding: 20px 15px;
}
#planLK-modal .plan-method .step1 .text.en,
#planLK-modal .plan-method .step2 .text.en { margin-bottom: 15px; }
#planLK-modal .plan-method .step-divider {
vertical-align: middle;
text-align: center;
display: inline-block;
width: 20px;
height: 100%;
}
#planLK-modal .plan-method .step-divider .img-wrap { position: relative; height: 100%; }
#planLK-modal .plan-method .step-divider .img-wrap img {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
#planLK-modal .plan-notice h5 {
font-size: 18px;
letter-spacing: -0.03em;
color: #212327;
margin-top: 30px;
margin-bottom: 20px;
}
#planLK-modal .plan-notice ol {
-webkit-padding-start: 15px;
font-size: 13px;
color: #606772;
}
@media only screen and (max-width:1199px) {
#planLK-modal .modal-dialog { max-width: 80%; min-width: 80%; }
#planLK-modal .plan-title h2 { font-size: 40px; }
#planLK-modal .plan-title h2.en { font-size: 36px; }
.sub-buy .sub-panel li > div.plan-priod span.plan-priod12-2,
.sub-buy .sub-panel li > div.plan-priod span.plan-priod24-3 { width:155px; letter-spacing: -1px;}
}
@media only screen and (max-width:768px) {
#planLK-modal .modal-dialog { max-width: 90%; }
#planLK-modal .plan-title { font-size: 16px; }
#planLK-modal .plan-title h2 { font-size: 26px; }
#planLK-modal .plan-title h2.en { font-size: 22px; }
#planLK-modal .plan-title label { font-size: 12px; }
#planLK-modal .plan-title + hr { border-top-width: 3px; margin: 10px auto 20px 0 }
#planLK-modal .plan-method .step2 .text { padding: 40px 15px;}
#planLK-modal .plan-method .step1 .text.en,
#planLK-modal .plan-method .step2 .text.en { padding: 20px 15px; }
#planLK-modal .plan-notice h5 { margin-bottom: 10px; font-size: 14px; }
#planLK-modal .plan-notice ol { font-size: 12px; line-height: 1.4 }
}
@media only screen and (max-width:479px) {
#planLK-modal .plan-method .img-box, #planLK-modal .plan-method .text-box { display: table-cell;}
#planLK-modal .plan-method .text-box { padding: 0;}
#planLK-modal .plan-method .step .text { padding-top: 0; padding-bottom: 0; min-height: inherit; }
#planLK-modal .plan-method .step2 .text { padding-top: 10px; padding-bottom: 10px; }
#planLK-modal .plan-method .step1 .text.en,
#planLK-modal .plan-method .step2 .text.en { padding: 10px 15px 0; margin-bottom: 0;}
#planLK-modal .plan-method .step-divider { width: 100%; height: 50px; padding: 15px; vertical-align: top; text-align: center; }
#planLK-modal .plan-method .step-divider .img-wrap img { position: relative; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); top: 0; }
}
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/*BestSite*****************************************************************************************/
/*bestsite - list-admin mode*/
.sub-bestsite.list .search-box { width: 70%; float: right; }
.sub-bestsite.list .search-box select { width: 140px; }
.sub-bestsite.list .search-box .data-count { position: absolute; right: 50px; top: 5px; }
.sub-bestsite.list .site-list .site-item {
padding-top: 10px;
border: 1px solid #eeeeee;
}
.sub-bestsite.list .site-list .site-item:nth-child(3n+1) { clear: both; }
.sub-bestsite.list .site-list .site-item .img-wrap { min-height: 160px; }
.sub-bestsite.list .site-list .site-info { min-height: 300px; padding-top: 20px; }
.sub-bestsite.list .site-list .site-info .sitetype > div { float: right; }
.sub-bestsite.list .site-list .site-info .sitetype span,
.sub-bestsite.list .site-list .site-info .category span {
font-size: 12px;
line-height: 1.6;
padding: 0px 5px;
border: 1px solid #eeeeee;
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
}
.sub-bestsite.list .site-list .site-info .sitetype span:empty { display: none; }
.sub-bestsite.list .site-list .site-info .category span[data-cate*='@'] { outline: 2px dotted #9fea47; }
.sub-bestsite .sub-content .site-list .bestsite-btn-group .btn-bestsite.active { color: #fff; border: 1px solid transparent; }
.sub-bestsite .sub-content .site-list .bestsite-btn-group .btn-bestsite[data-state="0"].active { background-color: #949FAB; }
.sub-bestsite .sub-content .site-list .bestsite-btn-group .btn-bestsite[data-state="1"].active { background-color: #4789E7; }
.sub-bestsite .sub-content .site-list .bestsite-btn-group .btn-bestsite[data-state="2"].active { background-color: red; }
.sub-bestsite.list .site-list .pagination { text-align: center; }
.sub-bestsite.list .site-list .pagination ul li { display: inline-block; margin-right: 7px; }
.sub-bestsite.list .site-list .pagination ul li a.active {color:#428bca;}
.sub-bestsite.list .site-list .pagination ul li a {
font-size: 13px;
font-weight: 400;
color: #b1b3b7;
padding: 0;
border: none;
background-color: transparent;
margin-right: 9px;
}
.modal.bestsiteImg .modal-body ul li {
text-align: left;
position: relative;
}
.modal.bestsiteImg .modal-body ul li + li { margin-top: 10px; }
.modal.bestsiteImg .modal-body ul li strong { font-size: 1.6em; }
.modal.bestsiteImg .modal-body ul .fileinput-button {
position: absolute;
bottom: 0; right: 0;
min-width: 80px; padding: 8px 10px;
}
.modal.bestsiteImg .sitecate span {
display: inline-block;
border: 1px solid #ddd;
padding: 5px 10px;
margin-bottom: 10px;
cursor: pointer;
}
.modal.bestsiteImg .sitecate span.active {
color: #ffffff;
border-color: #EE445F;
background-color: #EE445F;
}
.modal.bestsiteImg .sitecate span[data-cate*='@'] { outline: 2px dotted #9fea47; }
.modal.bestsiteImg .sitetype { margin: 0; }
.modal.bestsiteImg .sitetype span {
margin-top: 5px;
display: inline-block;
border: 1px solid #ddd;
border-radius: 0;
padding: 5px 10px;
cursor: pointer;
}
.modal.bestsiteImg .sitetype span + span { margin-left: 5px; }
.modal.bestsiteImg .sitetype span.active { background-color: #ed9c28; border-color: #ed9c28; }
/*bestsite - apply*/
.sub-bestsite .content-box .sub-title > .text { margin-bottom: 30px; font-size: 15px; color: #2d343e; letter-spacing: -0.04em; }
.sub-bestsite .content-box .sub-title > .text > strong { color: #4789e7; font-weight: 600; }
.sub-bestsite .content-box .sub-title > .text > p { margin-top: 20px; font-size: 12px; color: #797f86; letter-spacing: -0.01em;}
.sub-bestsite .sub-content:before,
.sub-bestsite .sub-content:after { content: ''; display: table; clear: both; }
.sub-bestsite .sub-content .caption h5.up{ font-size: 15px; margin: 0; }
.sub-bestsite .sub-content input { min-width: 220px; }
.sub-bestsite .sub-content input + span { margin-left: 15px; color: #797f86; font-size: 11px; vertical-align: middle; }
.sub-bestsite .sub-content .site-title .text strong { color: #2d343e; text-decoration: underline; }
.sub-bestsite .sub-content .site-list { color: #797f86; font-size: 15px; }
.sub-bestsite .sub-content .site-list li.category { min-height: 110px; }
.sub-bestsite .sub-content .site-list li + li { margin-top: 10px; }
.sub-bestsite .sub-content .site-list li + li.btn-toolbar { margin-bottom: 15px; }
.sub-bestsite .sub-content .site-list li .fa.select-site { font-size: 21px; color: #d2d2d2; margin-right: 10px; cursor:pointer; }
.sub-bestsite .sub-content .site-list li.active .fa.select-site { color:#2d343e; }
/*.sub-bestsite .sub-content .site-list li.disabled .fa.select-site { color:#ebebeb; cursor:no-drop; } 미게시 사이트 disabled 처리*/
.sub-bestsite .sub-content .col-md-12.clear { padding: 30px 0; }
.sub-bestsite .sub-content .col-md-12.clear .dividers { margin: 0; }
.sub-bestsite .sub-content .category-list {
margin-top: 20px; margin-bottom: 20px;
}
.sub-bestsite .sub-content .category-list li {
display: inline-block;
padding: 4px 10px;
border: 1px solid #eeeeee;
margin-right: 7px;
margin-bottom: 5px;
}
.sub-bestsite .sub-content .btn-category {
background-color: #7d8791;
color: #fff;
min-width: 145px;
-moz-border-radius: 0;
border-radius: 0;
font-size: 12px;
}
.sub-bestsite .sub-content .btn-category .fa { margin-right: 7px; }
.sub-bestsite .sub-content .btn-default.dark {
border-color: #3b4350;
background-color: #3b4350;
color: #fff;
min-width: 160px;
padding: 12px 15px;
}
/*bestsite/apply - category modal*/
.bestsite-category .top-sub-text .error { margin-left: 7px; font-size: 0.87em; }
.bestsite-category .pick-cate { margin-top: 10px; margin-bottom: 20px; }
.bestsite-category .pick-cate li {
display: inline-block;
padding: 4px 2px 4px 7px;
border: 1px solid #eeeeee;
font-size: 12px;
margin-right: 5px;
margin-bottom: 5px;
}
.bestsite-category .pick-cate li > img { padding: 5px; cursor: pointer; }
.bestsite-category .category-box {
padding: 20px;
background-color: #fbfbfb;
max-height: 280px;
overflow-y: auto;
}
.bestsite-category .category-box .panel {
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
}
.bestsite-category .category-box .panel-default > .panel-heading {
background-color: transparent;
border: none;
color: #2d343e;
padding: 0;
}
.bestsite-category .category-box .panel-default > .panel-heading > .panel-title > div { font-size: 15px; }
.bestsite-category .category-box .panel-default > .panel-heading > .panel-title > a { font-size: 13px; }
.bestsite-category .category-box .panel-group .panel-heading + .panel-collapse .panel-body {
border-top: none;
border-bottom: 1px solid #e5e8eb;
}
.bestsite-category .category-box .panel-body {
padding: 10px 0 5px;
}
.bestsite-category .category-box .panel-body li {
font-size: 12px;
color: #2d343e;
display: inline-block;
background-color: #fff;
border:1px solid #eeeeee;
padding: 4px 10px;
margin-right: 5px;
margin-bottom: 5px;
cursor: pointer;
}
.bestsite-category .category-box .panel-body li.active {
background-color: #c2dcfc;
border-color: #7da2ce;
}
.bestsite-category .category-input-group {
margin-top: 15px;
}
.bestsite-category .category-input-group .input-label,
.bestsite-category .category-input-group #input-custom-cate,
.bestsite-category .category-input-group .btn-add-custom-cate {
display: inline-block;
float: left;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
vertical-align: middle;
}
.bestsite-category .category-input-group .input-label { margin-right: 10px; line-height: 1.7; }
.bestsite-category .category-input-group #input-custom-cate {
width: 130px;
padding: 2px 12px;
height: 26px;
line-height:
}
.bestsite-category .category-input-group .btn-add-custom-cate,
.bestsite-category .category-input-group .btn-add-custom-cate:hover {
padding: 2px 12px;
min-width: unset;
margin-left: 8px;
background-color: #4789e7;
color: #fff;
line-height: 1.7;
}
.bestsite-category .category-input-group .custom-cate-error { clear: left; padding-top: 5px; color: #CC0000; font-size: 0.87em; }
.modal-dialog.w575.sub-page.bs-apply .modal-body { padding-bottom: 20px! important; }
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/**************************************************************************************************/
/* Custom Site Request ****************************************************************************/
header#nav.intro ~ .sub-custom {
margin-top: 70px;
}
header#nav.intro ~ .sub-custom ~ footer.default.intro {
opacity: 1;
bottom: inherit;
position: relative;
}
.sub-custom .content-box > .sub-title {
padding-top: 20px;
font-weight: 400;
}
.sub-custom .content-box > .sub-title > .text > h2 {
font-family: 'Noto Sans KR';
font-size: 38px;
font-weight: 300;
line-height: 1.2;
letter-spacing: -0.02em;
}
.sub-custom .content-box > .sub-title > .text > hr {
width: 40px;
margin: 35px auto;
border-color: #abafb4;
}
.sub-custom .content-box > .sub-title > .text > p {
font-family: 'Noto Sans KR';
font-size: 15px;
font-weight: 300;
letter-spacing: -0.03em;
color: #878791;
margin-bottom: 0;
}
.sub-custom .content-box > .sub-title > .text > .subnotice {
font-size: 12px;
color: #fe7b8f;
}
.sub-custom .content-box { background-color: inherit; }
.sub-custom .sub-content { font-family: 'Noto Sans KR'; font-size: 13px; color: #2d343e; }
.sub-custom .sub-content .sub-title {
font-size: 18px;
font-weight: 400;
letter-spacing: -0.05em;
color: #2d343e;
margin-top: 80px;
margin-bottom: 5px;
}
.sub-custom .sub-content input[type=text] {
border: none;
border-bottom: 1px solid #c1c1c6;
background-color: #fbfbfb;
padding: 13px 5px;
width: 100%;
}
.sub-custom .sub-content input:-webkit-autofill,
.sub-custom .sub-content textarea:-webkit-autofill,
.sub-custom .sub-content select:-webkit-autofill {
background-color: #fbfbfb;
}
.sub-custom label.error {
color: #ed6b6b;
font-weight: 300;
font-size: 13px;
}
.sub-custom #pj_type + label.error {
-webkit-transform: translateY(-26px);
-moz-transform: translateY(-26px);
-ms-transform: translateY(-26px);
-o-transform: translateY(-26px);
transform: translateY(-26px);
}
.sub-custom .sub-content .note-editor {
border: 1px solid #c1c1c6;
}
.sub-custom .sub-content .note-editor .note-toolbar {
border-bottom: 1px solid #c1c1c6;
}
.sub-custom .sub-content .note-editor .note-resizebar {
border-top: 1px solid #c1c1c6;
}
.sub-custom .sub-content .clear input {
margin-top: 10px;
}
.sub-custom .sub-content .directinput-wrap > input[type=text] {
border: 1px solid #c1c1c6;
background-color: #ffffff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
line-height: 1;
padding: 8px 5px;
}
.sub-custom .project-info {
padding-top: 15px;
}
.sub-custom .select-wrap { position: relative; margin-bottom: 30px; }
.sub-custom .select-wrap select {
font-size: 13px;
color: #2d343e;
border: 1px solid #c1c1c6;
background-color: transparent;
padding: 7px 12px;
height: 36px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.sub-custom .select-wrap select::-ms-expand { display: none; }
.sub-custom .select-wrap:after {
content: '';
position: absolute;
display: inline-block;
top: 50%; right: 25px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
border-top: 6px solid #2d343e;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 0px dotted;
z-index: -1;
}
.sub-custom .project-budget p,
.sub-custom .project-pages p {
margin-bottom: 0;
}
.sub-custom .project-content {
padding-top: 40px;
}
.sub-custom .project-content textarea {
width: 100%;
min-height: 160px;
}
.sub-custom .kcaptcha-wrap:before,
.sub-custom .kcaptcha-wrap:after,
.sub-custom .agree-wrap:before,
.sub-custom .agree-wrap:after {
position: relative;
display: table;
content: '';
clear: both;
}
.sub-custom .sub-content .kcaptcha-wrap.clear input {
margin-top: 0;
padding-top: 10px;
}
.sub-custom .agree-wrap {
text-align: center;
position: relative;
margin-top: 20px;
}
.sub-custom .agree-wrap .check-box {
display: inline-block;
}
.sub-custom .agree-wrap p {
display: inline-block;
}
.sub-custom .agree-wrap a,
.sub-custom .agree-wrap a:hover,
.sub-custom .agree-wrap a:focus {
color: #878791;
}
.sub-custom .agree-wrap label.error {
display: inline-block;
}
.sub-custom .btn-wrap {
margin-top: 40px;
margin-bottom: 100px;
position: relative;
}
.sub-custom .btn.btn-apply,
.sub-custom .btn.btn-golist {
background-color: #2d343e;
color: #fff;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
min-width: 166px;
line-height: 1.4;
padding: 14px 12px;
margin: 0 auto;
}
.sub-custom.sub-customlist .input-group-btn > #sfl {
width: 240px;
}
.sub-custom.sub-customlist .search-box {
position: relative;
}
.sub-custom.sub-customlist .data-count {
position: absolute;
top: 6px; right: 55px;
opacity: 0.7;
}
.sub-custom.sub-customlist .sub-content input[type=text] {
border: 1px solid #cccccc;
}
.sub-custom.sub-customlist .sub-content > .site-item {
padding: 5px 0;
}
.sub-custom.sub-customlist .sub-content > .site-item + .site-item {
border-top: 1px solid #cccccc;
}
.sub-custom.sub-customlist .sub-content > .site-item a {
color: #212326;
text-decoration: none;
}
.sub-custom.sub-customlist .sub-content > .site-item a:hover,
.sub-custom.sub-customlist .sub-content > .site-item a:focus {
color: #EE445F;
}
.sub-custom.sub-customlist .sub-content > .site-item .subject {
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
display: inline-block;
}
.sub-custom.sub-customlist .sub-content > .site-item p {
margin-bottom: 0;
}
.sub-custom.sub-customlist .sub-content > .site-item img {
display: none;
}
.sub-custom.sub-customlist .sub-content > .site-item b {
margin-left: 7px; margin-right: 2px;
}
.sub-custom.sub-customlist .pagination > ul > li {
display: inline-block;
}
.sub-custom.sub-customlist .pagination > ul > li + li {
margin-left: 10px;
}
.sub-custom.sub-customlist .pagination > ul > li > a {
color: #212326;
text-decoration: none;
}
.sub-custom.sub-customlist + #cs-detail-view .pj_content {
max-height: 500px;
overflow-y: auto;
}
.sub-custom.sub-customlist + #cs-detail-view img {
max-width: 100%;
}
@media only screen and (min-width:769px) {
.sub-upgrade .sub-footer .left-box { padding-left: 0; }
.sub-upgrade .sub-footer .right-box { padding-right: 0; }
.sub-bestsite.apply .content-box { padding:50px 0px; }
.sub-bestsite.apply .breadcrumb { margin-top:40px;margin-bottom: 20px; text-align:center; }
.sub-bestsite.apply .sub-content .btn-box { text-align:center; }
.sub-bestsite.apply .breadcrumb li a { font-size: 28px; }
}
@media only screen and (min-width:992px) {
/*.sub-upgrade .sub-content {
padding-left: 40px;
}
.sub-upgrade .sub-content > ul > li {
float: left;
display: inline-block;
width: 24.2%;
}
.sub-upgrade .sub-content > ul > li + li {
margin-left: 7px;
}
.sub-upgrade .plan-function .table {
margin-right: 20px;
width: auto;
}*/
.sub-upgrade .container { width: auto; max-width: 1170px; }
/* betaSM - gabia, SM plan hidden*/
.sub-upgrade.en .sub-content { /*padding-left: 160px;*/ }
.sub-upgrade.en .sub-content > ul > li,
}
@media only screen and (min-width:1200px) {
/* betaSM - gabia, SM plan hidden*/
.sub-upgrade.en .sub-content > ul > li { width: 32%; }
}
@media only screen and (min-width:768px) and (max-width: 991px) {
.sub-page .container { width: auto; margin: 0 5%; }
.sub-page.sub-plan .container,
.sub-page.sub-billing .container { margin: auto 30px; }
}
@media only screen and (max-width:1199px) {
/*.sub-domain.index .sub-title .btn-box, .sub-domain.domaincheck .sub-content .btn-box { width:25%;}
.sub-domain.index .sub-title .text, .sub-domain.add .sub-content .content-input-box {width: 75%;}*/
/* J.20210525.요금제결제관리페이지변경
.sub-plan .plan-list > li { position: relative; }
.sub-plan .plan-site:before,
.sub-plan .plan-site:after, { content: ''; position: relative; display: table; }
.sub-plan .plan-site { display: table-row; }
.sub-plan .plan-site > li.info { display: table-cell;}
.sub-plan .plan-site > li.info > .description .next-date { min-width: 100px; }
.sub-plan .plan-site > li.info > .description .next-str,
.sub-plan .plan-site > li.info > .description .method-str,
.sub-plan .plan-site > li.info > .description .schedule-str { padding-right: 0; color: #797f86; }
.sub-plan .plan-site > li.info > .toolbar .btn,
.sub-plan .plan-site > li.info > .toolbar .btn:hover,
.sub-plan .plan-site > li.info > .toolbar .btn:focus { min-width: 90px; padding: 4px 6px;margin-bottom: 7px;}*/
.sub-custom .content-box { padding: 0; }
.sub-custom .sub-content .sub-title { margin-top: 50px; }
.sub-custom .sub-content input[type=text] { padding: 10px 5px; }
}
@media only screen and (max-width:992px) {
.sub-page { min-height: 60%; }
.sub-page .back-btn { margin-top: 0; }
/* J.20210525.요금제결제관리페이지변경
.sub-plan .plan-site > li.shot img { width: 130px; }
.sub-plan .plan-site > li.info > .summry { margin-bottom: 0; }
.sub-plan .plan-site > li.info > .description { margin-bottom : 10px; font-size: 12px; }
.sub-plan .plan-site > li.info > .description .check-box { padding: 1px 3px; }
.sub-plan .plan-site > li.info > .toolbar .btn,
.sub-plan .plan-site > li.info > .toolbar .btn:hover,
.sub-plan .plan-site > li.info > .toolbar .btn:focus { min-width: initial; padding: 2px 5px; }*/
/* J.20211202.유료인증서
.sub-upgrade .sub-content { padding-left: 0; padding-right: 0; /*16.666666666666664%*}
.sub-upgrade .sub-content.en > ul > li,
.sub-upgrade .sub-content > ul > li { height: auto; padding: 30px 15px; /*width: 23%;* }
.sub-upgrade .sub-content > ul > li + li { margin-top: 15px; }
.sub-upgrade .sub-content.en > ul > li .payment-name,
.sub-upgrade .sub-content > ul > li .payment-name { min-height: inherit; font-size: 15px; margin-bottom: 28px;}
.sub-upgrade .sub-content.en > ul > li .payment-name { margin-bottom: 50px; }
.sub-upgrade .sub-content.en > ul > li:nth-child(1) .payment-name,
.sub-upgrade .sub-content > ul > li:nth-child(1) .payment-name { margin-bottom: 5px; }
.sub-upgrade .sub-content.en > ul > li .payment-info,
.sub-upgrade .sub-content > ul > li .payment-info { line-height: 1.4; font-size: 12px; min-height: 110px; }
.sub-upgrade .sub-content > ul > li .payment-info .planLK-detail-view { padding: 5px 10px; }
.sub-upgrade .sub-content > ul > li .payment-plan strong { font-size: 28px; }
.sub-upgrade .sub-content > ul > li:nth-child(3) .btn-box { min-height: 61px; }
.sub-upgrade .sub-content .btn.btn-primary.btn-apply { max-width: 100%; margin-bottom : 0; padding: 10px 30px;}*/
.sub-upgrade .plan-function > .table { /*display: none;*/
overflow-x: hidden;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.sub-upgrade .plan-function .table > .tb-row:nth-child(1) { /*display: table-row;*/ display: none; }
.sub-upgrade .plan-function .table > .tb-row > div.empty-cell { empty-cells: show; }
.sub-upgrade .plan-function .table > .tb-row > div:nth-child(1) { line-height: 1.4; }
}
@media only screen and (max-width:991px) {
.sub-plan .plan-site > li.shot { height: auto; }
.sub-plan .plan-site > li.info { width: calc(100% - 195px); }
.sub-plan .plan-site > li.info > .plan-more { top:0; transform: none; }
.sub-plan .plan-site > li.info > .plan-btn-box { position: relative; top:auto;transform: none;right:auto; margin-top:20px;display: flex; }
.sub-plan .plan-site > li.info > .plan-btn-box .plan-btn { right:auto; flex: auto;}
.sub-plan .plan-site > li.info > .plan-btn-box .plan-btn:first-child:nth-last-child(1) { right:auto; width:100%; }
.sub-upgrade .sub-content { padding:0px 50px;max-width: 640px; margin: auto; }
.sub-upgrade .sub-content > ul { display: block; }
.sub-upgrade .sub-content > ul > li { /*width: calc(50% - 10px);*/ width:260px;float: left;flex: unset; margin-right: 20px; padding:30px; }
.sub-upgrade .sub-content > ul > li:nth-child(2n+1) { clear: left; }
.sub-upgrade .sub-content > ul > li:nth-child(n+3) { margin-top: 20px; }
.sub-upgrade .sub-content > ul > li:nth-child(2n) {margin-right: auto;}
.sub-upgrade .plan-function.en .table-header .tb-row { grid-template-columns: 14fr repeat(3, 20fr); }
.sub-upgrade .plan-function.en .table > .tb-row > div:nth-child(1n+2) { width:20%; }
}
@media only screen and (max-width:768px) {
.sub-page .back-btn { padding-top: 8px; margin-right: 15px;}
.sub-page .back-btn a,
.sub-page .back-btn a:hover,
.sub-page .back-btn a:focus { font-size: 14px; }
.sub-page .back-btn a:before { font-size: 16px; }
.sub-page .breadcrumb + .content-box { padding: 25px 15px; }
.sub-page .breadcrumb li a { font-size: 25px; }
.sub-page .breadcrumb li a > img.fa { margin-right: 8px; }
.sub-page > .container > .row > .col-xs-12 { padding: 0; }
.sub-page .sub-title .text h2 { font-size: 25px; }
header.intro ~ .sub-upgrade .plan-function .table-header { top:57px; }
.sub-upgrade .plan-function .table > .tb-row:nth-child(1) > div { padding-left: 0; padding-right: 0; }
/*
.sub-upgrade .plan-function .table > .tb-row > div:nth-child(1) { width: 25%; }
.sub-upgrade .sub-content > ul > li .payment-info { line-height: 1.4; font-size: 12px; min-height: 130px; }
*/
.sub-upgrade + .plan-qna .upgrade-support .panel { margin-bottom: 10px;}
.sub-upgrade + .plan-qna .upgrade-support .panel-title a,
.sub-upgrade + .plan-qna .upgrade-support .panel-title a:hover,
.sub-upgrade + .plan-qna .upgrade-support .panel-title a:focus { font-size: 12px;}
.sub-upgrade + .plan-qna .upgrade-support .panel-collapse { padding-top: 3px; line-height: 1.4; font-size: 11px; }
.sub-bestsite .sub-content input { min-width: 100%; }
.sub-bestsite.apply .content-box .sub-title > .text { margin-bottom: 15px; }
.sub-bestsite.apply .sub-content .col-md-12.clear { padding: 15px 0; }
.sub-bestsite.apply .caption { padding: 0; }
.sub-bestsite.apply .sub-content .caption h5.up { margin-bottom: 15px; }
.sub-bestsite.apply .sub-content .site-list li + li { margin-top: 7px; }
.sub-bestsite.apply .breadcrumb { text-align: center; padding:0px;margin-top: 20px;margin-bottom: 25px; }
.sub-bestsite.apply .breadcrumb li a { font-size: 24px; }
.sub-bestsite.apply .sub-content .btn-box { text-align: center; }
.sub-bestsite.apply .breadcrumb + .content-box { margin-top: 0px; }
.modal-default .modal-dialog.w575.bs-apply { width: 80%! important; }
.sub-custom .content-box > .sub-title > .text > h2 { font-size: 35px; }
.sub-custom .content-box > .sub-title > .text > p { font-size: 13px; }
}
@media only screen and (max-width:767px) {
.sub-upgrade .sub-content.en > ul > li,
.sub-upgrade .sub-content > ul > li { width: 100%; max-width: 440px; padding: 25px 30px; display: block;border-radius: 8px; height: auto;margin: auto; float: unset; }
.sub-upgrade .sub-content > ul > li + li { margin-left: auto; margin-top: 20px !important; }
.sub-upgrade .sub-content.en > ul > li .payment-name,
.sub-upgrade .sub-content > ul > li .payment-name { margin-bottom: 15px; font-size: 20px; }
.sub-upgrade .sub-content.en > ul > li .payment-info,
.sub-upgrade .sub-content > ul > li .payment-info { min-height: inherit; margin-bottom: 35px; font-size: 14px; color:#696c71; }
.sub-upgrade .sub-content > ul > li:nth-child(3) .btn-box { min-height: inherit; }
.sub-upgrade .sub-content > ul > li:nth-child(1) .payment-plan,
.sub-upgrade .sub-content > ul > li:nth-child(3) .payment-plan { padding-top: 0; }
.sub-upgrade .sub-content > ul > li .payment-plan { min-height: auto; }
.sub-upgrade .sub-content > ul > li:nth-child(4) .payment-plan { padding-top: 0px; }
.sub-upgrade .sub-content.plan-type { padding:0px 15px; }
.sub-upgrade .sub-content > ul > li .btn-box { position: relative; bottom: unset; padding: 35px 15px 0px 15px; }
.sub-upgrade .plan-function.en .table-header .tb-row { grid-template-columns: 130px repeat(3, 20fr); }
.sub-upgrade .plan-function.en .table { width: 100%; table-layout: fixed; }
.sub-upgrade .plan-function.en .table > .tb-row > div:nth-child(1) { width: 130px; min-width: 130px; max-width: 130px; }
.sub-upgrade .plan-function.en .table > .tb-row > div:nth-child(1n+2) { width:auto; }
}
@media only screen and (max-width:640px) {
.sub-domain.index .sub-title .text { width: 100%; float: none; display: block;}
.sub-domain.index .sub-title .text + .btn-box { width: auto; float: right; margin-bottom: 30px; }
.sub-plan .plan-site > li.shot img { width: 100%; }
.sub-plan .plan-site > li.info > .description > span:nth-child(odd):before { content: ''; display: relative; display: block; }
.sub-custom .content-box > .sub-title { padding: 0 15px; }
.sub-custom .content-box > .sub-title > .text > h2 { font-size: 27px; }
.sub-custom .content-box > .sub-title > .text > hr { margin: 17px auto; }
.sub-custom > .container > .row > .col-xs-12 { padding: 0; }
.sub-upgrade .plan-function:not(.en) .table-header .tb-row { grid-template-columns: 120px repeat(4, 11fr); }
.sub-upgrade .plan-function:not(.en) .table { width: 100%; table-layout: fixed; }
.sub-upgrade .plan-function:not(.en) .table > .tb-row > div:nth-child(1) { width: 120px; min-width: 120px; max-width: 120px; }
.sub-upgrade .plan-function:not(.en) .table > .tb-row > div:nth-child(1n+2) { width:auto; }
}
@media only screen and (max-width:480px) {
.sub-page.sub-plan.paymentslist {display: block;}
.sub-page .sub-title .text h2,
.sub-page .breadcrumb li a { font-size: 22px; }
.sub-page .back-btn { float: none; padding: 0; position: absolute; right: 15px; margin-top: -30px;}
.sub-upgrade .plan-function .table-header .tb-row { grid-template-columns: 100px repeat(4, 11fr); }
.sub-upgrade .plan-function.en .table-header .tb-row { grid-template-columns: 100px repeat(3, 20fr); }
.sub-upgrade .plan-function .table > .tb-row > div:nth-child(1) { width: 100px; min-width: 100px; max-width: 100px; }
.sub-upgrade .plan-function.en .table > .tb-row > div:nth-child(1) { width: 100px; min-width: 100px; max-width: 100px; }
}
#loading { position: fixed; display:none !important;}
.LINK { background-color:#EE445F !important; border-color:#EE445F!important; }
.link-info {color:#EE445F; font-weight: 600; padding-left:15px;}
.payments strong { color:#3c4451; background-color:#ccc; padding:5px 10px;}
.payments a { background-color:#ddd; padding:5px 10px;}
.fl-left {float:left;}
.display-block { display:block; margin-top:5px; padding: 5px 10px; line-height: inherit; }
/*.plan-change { background-color:#3C4451 !important; color:#fff !important; } J.20210525.요금제결제관리페이지변경*/
.plan-change:hover,.plan-change:focus { text-decoration: none !important; }
/* betaSM - SM Plan Cancel */
.plan-beta-cancel { background-color:#3C4451 !important; color:#fff !important; }
.plan-beta-cancel:hover,.plan-beta-cancel:focus { text-decoration: none !important; }
/*mobile menu billing.html*/
@media only screen and (max-width:767px) {
.sub .mobile-title {
display: block;
position: fixed;
z-index: 9999;
}
.sub-page.sub-billing .cards_mng .content-box {padding: 75px 15px 50px;}
.sub.sub-plan,
.sub.sub-billing {
position: fixed;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 1010;
}
.sub.sub-plan .mobile-title #popup-title.en,
.sub.sub-billing #popup-title.en { letter-spacing: -0.8px; }
.sub-page.sub-plan .container,
.sub-page.sub-billing .container { margin-top: 54px; min-height: calc(100vh - 54px); background-color: transparent; }
.sub-page.sub-plan .plan-mng-box,
.sub-page.sub-billing .content-box { min-height: calc(100vh - 54px); }
.sub-page .plan-wrapper .breadcrumb,
.sub.sub-billing .billingtitle {display: none;}
.sub-page .plan-tab { padding-left: 15px; position: fixed;width: 100%;background-color: #eef0f4;z-index: 2; display: flex;overflow-x: auto; overflow-y: hidden; }
.sub-page .cards_mng .plan-tab { scrollbar-width: none; -ms-overflow-style: none; padding-right: 15px;}
.sub-page .cards_mng .plan-tab::-webkit-scrollbar { display: none; }
.sub-page .plan-tab li { font-size: 14px; color:#b1b3b7; flex-shrink: 0;line-height: 40px; }
.sub-page .plan-tab li:first-child { margin-left: 0;margin-right: 0px; }
.sub-page .plan-tab li.active:after { content:''; display:block; width:100%; height:3px; background-color:#4789e7; }
.sub-page .plan-tab li a { padding: 13px 10px;min-width: unset; }
.sub-page .plan-tab li.active a { color:#222428; }
.sub-page.sub-plan .plan-mng-box { background-color: #fff; padding: 44px 15px 50px; }
.sub-plan .plan-site { display:block; }
.sub-plan .plan-list > li { padding: 15px 15px 20px; }
.sub-plan .plan-site > li.shot { margin-bottom: 15px; display: none; }
.sub-plan .plan-site > li.shot img { width: 60%; margin: 0 auto 0 0; }
.sub-plan .plan-site > li,
.sub-plan .plan-site > li.info { display: block; padding: 0; width: 100%;}
.sub-plan .plan-site > li.info > .description .method { padding-right: 0; }
.sub-plan .plan-site > li.info > .description > span:nth-child(odd):not(.schedule):before { content: ''; display: relative; display: block; }
.sub-plan .plan-site > li.info > .toolbar .btn,
.sub-plan .plan-site > li.info > .toolbar .btn:hover,
.sub-plan .plan-site > li.info > .toolbar .btn:focus { width: 110px; margin-bottom: 3px; }
.sub-plan .plan-site > li.info > .toolbar .btn + .btn { margin-left: 0;}
.sub-plan .plan-site > li.info > .description .next-str { color:#b1b3b7;/*margin-bottom:13px;*/ }
.sub-plan .remain-list-box li { padding:15px;position: relative; }
.sub-plan .remain-list-box .remain-list .plan-name,
.sub-plan .remain-list-box .remain-list .plan-date { width:100%; display: block; padding:0; }
.sub-plan .remain-list-box .remain-list .plan-name { margin-bottom:8px; }
.sub-plan .remain-list-box .remain-list .plan-name span { padding:0; }
.sub-plan .remain-list-box .remain-list .plan-conn { position: absolute; top: 50%; transform: translateY(-50%); right: 15px; }
.sub-plan .content-title { font-size: 16px; }
.sub-plan .plan-list .content-title { padding-top:20px; }
.plan-switch {
width: 40px;
height: 20px;
border-radius: 10px;
margin-right:8px !important;
}
.plan-switch-label:before, .plan-switch-label:after{
position: absolute;
top: 45%;
margin-top: -.4em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.plan-switch-input:checked ~ .plan-switch-handle{
left: 22px;
}
.plan-switch-handle{
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 8px;
}
.plan-switch.active .plan-switch-input:checked ~ .plan-switch-handle{
left: 22px;
}
.sub-billing .sub-content #site-select .dropdown-backdrop { display:none; }
}
@media only screen and (max-width:768px) {
/*mypage mobile*/
.sub-page.sub-billing .breadcrumb + .content-box {margin-top:20px;}
.sub-page .breadcrumb + .content-box {margin-top:41px;}
.sub-page.sub-billing .content-box { padding: 64px 15px 50px; }
/*plan mobile*/
.mobile-detail-popup.planmain .mobile-popup-nav > .mpopupsub-nav {display: block;}
.mobile-detail-popup.planmain .tab-content .m-popupcontents {margin-top:2px; }
.planmain .mobile-popup-contents#planview {background-color: inherit;}
.planmain .mobile-popup-contents#planremain .setting-box {padding:13px;}
.mobile-detail-popup.planmain .m-popupcontents .setting-box {padding:0;}
.planmain .mobile-popup-contents#planremain .table > tbody > tr {color:#222428;}
.planmain .mobile-popup-contents#planremain .table > tbody > tr.plremaintr { border-bottom: 1px solid #dddddd;}
.planmain .mobile-popup-contents#planremain .table > tbody > tr.plremaintr > th { padding-bottom: 20px;padding-left: 8px;text-align: center; font-size:13px;font-weight: 500;}
.planmain .mobile-popup-contents#planremain .table > tbody > tr > th,
.planmain .mobile-popup-contents#planremain .table > tbody > tr > td {border-top: none;}
.planmain .mobile-popup-contents#planremain .table > tbody > tr.plremaintr-contents {font-size:12px;}
.planmain .mobile-popup-contents#planremain .table > tbody > tr.plremaintr-contents td {vertical-align: middle;}
.planmain .mobile-popup-contents#planremain .table > tbody > tr:nth-child(2) td {padding-top:19px;}
.planmain .mobile-popup-contents#planremain .table .exit-plan-move {width: 100%; border-radius: 1px;border-color: #dbdde2;}
.planmain .m-popupcontents {height:100%; overflow: auto;}
.planmain .m-popupcontents .mplanlist {
display: inline-block;
width:100%;
padding:13px 15px 11px 15px;
background-color: #fff;
margin-bottom: 10px;
}
.planmain .m-popupcontents .mshot {
width: 62px;
max-width: 62px;
margin: 0;
float: left;
position: relative;
}
.planmain .m-popupcontents .mshot > div > img {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 3% 3% 0;
width: 100%;
}
.planmain .m-popupcontents .mplaninfo-top {width:100%; display: inline-block;padding-bottom: 11px; border-bottom: 1px solid #e0e0e0;}
.planmain .m-popupcontents .mplaninfo-top .mplaninfo {float: left; width:78%; padding:0 0 0 10px;}
.planmain .m-popupcontents .mplaninfo-top {margin-bottom: 8px;}
.planmain .m-popupcontents .mplaninfo-bottom .description * {font-size:16px; color:#222228; font-weight:600;}
.planmain .m-popupcontents .mplaninfo-bottom .description {margin-bottom: 15px;}
.planmain .m-popupcontents .mplaninfo-bottom .description label {margin-bottom: 0;}
.planmain .m-popupcontents .mplaninfo-bottom .description li {padding-bottom:13px;}
.planmain .m-popupcontents .mplaninfo-bottom .description li:last-child {padding-bottom:0;}
.planmain .m-popupcontents .mplaninfo-bottom .description span {float:right;}
.planmain .m-popupcontents .mplaninfo-bottom .toolbar {}
.planmain .m-popupcontents .mplaninfo-bottom .toolbar a {
padding:6px 8px;
width:calc(33.333% - 2.7px);
float: left;
display: inline-block;
border-radius: 1px;
border-color:#dbdde2;
color: #222428;
margin: 0 4px 11px 0;
}
.planmain .m-popupcontents .mplaninfo-bottom .toolbar a:nth-child(3n) {margin-right: 0px;}
.planmain .m-popupcontents .mplaninfo-bottom .toolbar a:nth-child(n+4) {/* margin-bottom: 0px; */}
.planmain .m-popupcontents .mplaninfo-bottom .toolbar a.planupgradebtn {
width: 100%;
padding: 6px 8px;
background-color: #458ae8;
color: #fff;
font-size: 12px;
font-weight: 500;
border: none;
}
.planmain .m-popupcontents .mplaninfo-top .mplaninfo .next-str {margin-right: 9px;}
.planmain .m-popupcontents .mplaninfo-top .mplaninfo .next-str , .planmain .m-popupcontents .mplaninfo-top .mplaninfo .next-date {font-size:12px; color:#888888;float: left;margin-top: -4px;}
.planmain .m-popupcontents .mplaninfo-top .msiteplan-title { }
.planmain .m-popupcontents .mplaninfo-top .msiteplan-title .cl_icon_home {font-size:18px; margin-right:5px; float: left; margin-top: 3px;}
.planmain .m-popupcontents .mplaninfo-top .msiteplan-title .summry {
font-size:19px;
margin-right: 11px;
display: inline-block;
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
max-width: 60%;
overflow: hidden;
}
.planmain .m-popupcontents .mplaninfo-top .msiteplan-title .plantype::before {
content: "";
width:1px;
height:14px;
background-color:#222428;
position: absolute;
top: 4px;
left: 0;
}
.planmain .m-popupcontents .mplaninfo-top .msiteplan-title .plantype {
font-size: 12px;
color: #4789e7;
position: absolute;
padding-left: 11px;
line-height: 1.2;
padding-top: 3px;
}
/*pay-switch :: onoff icon*/
.pay_auto_btn .switch {
position: relative;
display: inline-block !important;
vertical-align: top !important;
width: 57px !important;
height: 20px !important;
padding: 3px !important;
border-radius: 18px !important;
cursor: pointer !important;
}
.pay_auto_btn .switch-input{
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.planmain .m-popupcontents .mplaninfo-bottom .description .pay_auto_btn .switch-label{
width: 52px;
position: relative;
display: block;
height: inherit;
font-size: 12px;
font-weight: normal;
text-transform: uppercase;
background: #949FAB;
border-radius: inherit;
font-family: 'open sans';
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
-webkit-transition-property: opacity background;
-moz-transition-property: opacity background;
-o-transition-property: opacity background;
transition-property: opacity background;
}
.pay_auto_btn .switch-label:before, .switch-label:after{
font-size:;
position: absolute;
top: 45%;
margin-top: -.4em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.pay_auto_btn .switch-input:checked ~ .switch-label:after {
content: "on";
opacity: 1;
}
.pay_auto_btn .switch-label:before{
content: 'Off';
right: 8px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.5);
}
.pay_auto_btn .switch-label:after{
content: '';
left: 10px;
color: white;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.planmain .m-popupcontents .mplaninfo-bottom .description .pay_auto_btn .switch-input:checked ~ .switch-label {
background: #4789E7;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.pay_auto_btn .switch-input:checked ~ .switch-handle{
left: 36px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
.pay_auto_btn .switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.pay_auto_btn .switch-input:checked ~ .switch-label:after{
content: "on";
opacity: 1;
}
.pay_auto_btn .switch-handle{
position: absolute;
top: 4px;
left: 4px;
width: 18px;
height: 18px;
background: white;
border-radius: 10px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4) !important;
background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);
background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);
background-image: -o-linear-gradient(top, white 40%, #f0f0f0);
background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
.pay_auto_btn .switch-handle:before{
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -8px 0 0 -8px;
width: 15px;
height: 15px;
background: #f9f9f9;
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
background-image: -webkit-linear-gradient(top, #eeeeee, white);
background-image: -moz-linear-gradient(top, #eeeeee, white);
background-image: -o-linear-gradient(top, #eeeeee, white);
background-image: linear-gradient(to bottom, #eeeeee, white);
}
.planmain .m-popupcontents .mplaninfo-top .mshot .img-wrapper .over-box.none-site {
font-size: 10px;
position: absolute;
top: 36%;
left: 50%;
width: 90%;
text-align: center;
background-color: #fff;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: 'Noto sans kr';
line-height: 1.3;
height: auto;
overflow: hidden;
color: #959ca2;
}
.modal-default .modal-dialog.mplanPopup * {font-family: 'Noto Sans KR',sans-serif;}
.modal-default .modal-dialog.mplanPopup {
max-width: 100%;
padding: 0px;
height: 100%;
}
.modal-default .modal-dialog.mplanPopup .modal-body {
height: auto;
overflow-y: scroll;
max-height: calc(100% - 61px);
}
.modal-default .modal-dialog.sub-page.mplanPopup .modal-content {height:100%;padding: 0;background-color: #f3f3f3;}
.modal-default .modal-dialog.sub-page.mplanPopup button.close {display: none;}
.modal-default .modal-dialog.sub-page.mplanPopup .modal-body .modal-title {
margin:0;
padding:23px 0 20px 0;
color: #222228;
font-size: 24px;
font-weight: bold;
}
.modal-default .modal-dialog.mplanPopup .top-sub-text {font-size:14px; color:#222428;}
.modal-default .modal-dialog.mplanPopup .top-sub2-text { margin-top: 20px;}
.modal-default .modal-dialog.mplanPopup .divider {display: none;}
.modal-default .modal-dialog.mplan-move .site-plan-move .bottom-text {
padding: 0 28px;
text-align: left;
color: #222428;
font-size: 14px;
margin-bottom: 30px;
}
.modal-default .modal-dialog.mplanPopup .mplanPopup-content { padding: 30px 26px; background-color: #fff; margin: 30px 0;}
.modal-default .modal-dialog.mplanPopup.mplan-exit .mplanPopup-content,
.modal-default .modal-dialog.mplanPopup.mplan-cancel .mplanPopup-content {height: auto; padding: 50px 0;font-size: 16px;}
.modal-default .modal-dialog.mplanPopup .mplanPopup-content li { width: 100%; display: inline-block; margin-bottom: 26px;}
.modal-default .modal-dialog.mplanPopup .mplanPopup-content li:last-child {margin-bottom: 0px;}
.modal-default .modal-dialog.mplanPopup .mplanPopup-content li label { font-size: 16px; float: left;margin-bottom: 0;font-weight: 400;}
.modal-default .modal-dialog.mplanPopup .mplanPopup-content li.active label {color: #4888e9;;}
.modal-default .modal-dialog.mplan-move .mplanPopup-content .m-select-site {}
.modal-default .modal-dialog.mplanPopup .mplanPopup-content .cl-icon { float: right; font-size:20px;top: 2px;}
.modal-default .modal-dialog.mplanPopup .mplanPopup-content .cl_icon_checked04 { position: absolute;top: 0; left: 0; color:#4888e9;}
.modal-default .modal-dialog.mplanPopup .mplanPopup-content .cl_icon_unchecked04 { position: relative;color:#a1a7af; }
.modal-default .modal-dialog.mplanPopup .modal-footer {
bottom: 0;
position: absolute;
margin: 0;
width: 100%;
border-top:1px solid #f3f3f3;
}
.modal-default .modal-dialog.mplanPopup .modal-footer button {
margin: 0;
min-width: 50%;
float: left;
padding: 22px 0;
font-size: 16px;
}
.modal-default .modal-dialog.mplanPopup .modal-footer button.close-button-dialog { color: #3c4451; background-color: #ffffff !important;}
.modal-default .modal-dialog.mplanPopup .modal-footer button.ok-button-dialog { color: #fff; background-color: #3c4451; margin-left: 0; background-color: #3c4451 !important;}
/*결제 관리 billing*/
/* J.20210525.요금제결제관리페이지변경
.sub.sub-billing {display: none;}
.sub.sub-billing .billingtitle {display: none;}*/
.billmanage .mobile-popup-contents {background-color: #f0f0f0;}
.billmanage .msite-select {padding: 15px 28px;}
.billmanage .msite-select .dropdown-backdrop {
position: unset;
top: unset;
right: unset;
border: unset;
left: unset;
z-index: unset;
}
.billmanage .msite-select .site-name {font-size:14px; color:#222428; margin-right: 10px;}
.billmanage .msite-select .btn-group.open .dropdown-toggle {box-shadow: none;}
.billmanage .msite-select span.cl_icon_dropdown02 {font-size: 10px; color: #222428;}
.billmanage .mobile-popup-contents .setting-box {background-color: inherit; padding: 0px;}
.billmanage .mobile-popup-contents .setting-box .empty-data {text-align: center;}
.billmanage .mobile-popup-contents .mbillcontents {background-color: #fff; padding: 28px;margin-bottom: 20px;}
.billmanage .mobile-popup-contents .mbillcontents li {
font-size: 14px;
color: #42464c;
letter-spacing: 0.05em;
margin-bottom: 7px;
}
.billmanage .mobile-popup-contents .mbillcontents li p {
display: inline-block;
color:#222428;
}
.billmanage .mobile-popup-contents .mbillcontents li span {
float:right;
}
}
@media only screen and (max-width:379px) {
.planmain .m-popupcontents .mplaninfo-bottom .toolbar a:nth-child(3) {margin: 0 4px 11px 0;}
.planmain .m-popupcontents .mplaninfo-bottom .toolbar a:nth-child(n+4) {margin: 0 4px 11px 0;}
.planmain .m-popupcontents .mplaninfo-bottom .toolbar a {
width:calc(50% - 2.7px);
}
.planmain .m-popupcontents .mplaninfo-bottom .toolbar a:nth-child(3n) {margin-right: 4px;}
.planmain .m-popupcontents .mplaninfo-bottom .toolbar a:nth-child(2n) {margin-right: 0px;}
}
/*domain-add 992px~*/
@media only screen and (max-width: 991px) {
.sub-domain.index .list-item > li {flex-direction: column; margin-top: 25px;}
.sub-domain.index .list-item > li >div:nth-child(1){}
.sub-domain.index .list-item > li >div:nth-child(2){max-width: 100%; padding:0 0 20px 0;}
.sub-domain.domaincheck .content-box{padding: 0; margin: 0;}
.sub-domain.domaincheck.index .content-box .sub-content { padding-top:15px; }
.sub-domain.domaincheck > .container > .row > .col-xs-12 {padding: 0 30px;}
.sub-domain.domaincheck .sub-content .info-text{font-size: 13px;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv > div > div{flex-direction: column; align-items: flex-start;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv > div > div:last-child{margin-left: 30px;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserver,
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserip{width: 100%;}
/*.sub-domain.add .sub-content .content-input-box .check-domain-form {margin-right: 5px;}
.sub-domain.index .sub-title .text, .sub-domain.domaincheck .sub-content .content-input-box { width:69.5%; }
.sub-domain.index .sub-title .btn-box, .sub-domain.domaincheck .sub-content .btn-box { padding: 0;width:30%;}
.sub-domain.domaincheck .sub-content .check-domain { padding:16px 10px; }
.sub-domain .btn.btn-default.dark {line-height: 16px;}
.sub.sub-page.sub-domain.domaincheck .container,
.sub.sub-page.sub-domain.index .container {width:auto !important;}
.sub-domain.domaincheck.index .sub-title.dmnotice-wrap .text {width:100%;margin-bottom: 20px; float: left; width: 94%;}
.sub-domain.domaincheck.index .sub-title.dmnotice-wrap .btn-box {float:none;}
.sub-domain.domaincheck .content-box .sub-title {padding: 0 72px;}
.sub-domain.domaincheck.index .content-box .sub-content {margin:0 72px 50px 72px;}
.sub-domain.index .list-title {display: block; margin-bottom: 15px;}
.sub-domain.domaincheck .content-box .domain_mail.domain-3rd.dmnotice-wrap {padding:0 72px 50px 72px;display: inline-block; position: relative;}
.sub-domain.domaincheck .domain_mail.dmnotice-wrap p {margin-left: 41px;overflow: hidden;width: 94%;}
.sub-domain.domaincheck .sub-title > .text.domainnotice h3 {margin-top:0px; line-height: 1.3;margin: 3px 0 9px 11px;}
.sub-domain.domaincheck .sub-title > .text.domainnotice h5 {margin-left: 10px;}
.sub-domain.index .list-item > li > a {padding-left:0;}
.sub-domain.domaincheck .content-box .domain_mail.domain-3rd {padding: 50px 72px;margin-top: 0;}*/
.sub-domain .connect-stap li.first .stap,
.sub-domain .connect-stap li.second .stap { max-width: 110px;text-align: left; }
.sub-domain.domaincheck .content-box .sub-content .stap-3 .hidden-xs { display: none !important; }
}
@media only screen and (max-width:767px) {
.sub-domain .connect-stap li { display: block; }
.sub-domain .connect-stap li.first .stap,
.sub-domain .connect-stap li.second .stap,
.sub-domain .connect-stap li.last .stap { max-width: auto; }
.sub.sub-page.sub-domain.domaincheck .breadcrumb{margin-bottom: 10px;}
.sub.sub-page.sub-domain.domaincheck .breadcrumb li a{font-size: 18px;}
.sub.sub-page.sub-domain.domaincheck .breadcrumb li:first-child {max-width: 180px;display: inline-block;white-space: nowrap;overflow: hidden; text-overflow: ellipsis;}
.sub.sub-page.sub-domain.domaincheck .breadcrumb li svg { transform: translateY(4px); }
.sub-domain.index .list-item > li >div:nth-child(2){ padding:0; }
.sub-domain.index .list-item > li > div > p { margin:0; }
.sub-domain .connect-stap li {font-size:14px; width: auto; height: 52px; line-height: 52px; padding: 0 0 0 15px; text-align: right;}
.sub-domain .connect-stap li .number,
.sub-domain .connect-stap li .complete {margin: 0; width: 28px; height: 28px; line-height: 28px; font-size: 16px;}
.sub-domain .connect-stap li .stap{display: none;}
.sub-domain .connect-stap li.active{text-align: left;}
.sub-domain .connect-stap li.active .number{margin-right: 10px;}
.sub-domain .connect-stap li.active .stap{display: inline;}
.sub-domain .connect-stap li.active.last,
.sub-domain .connect-stap li.active + li{flex: 1;}
.sub-domain .connect-stap li.complete .stap{display: none;}
.sub-domain .connect-stap li:last-child{padding: 0 15px;}
.sub-domain .connect-stap li span svg{width: 18px;}
.sub-domain .connect-stap li { border-bottom: 2px solid #eeeff0 !important; }
/*
.sub-domain .connect-stap li.first.active,
.sub-domain .connect-stap li.second.active { flex:1; }
.sub-domain .connect-stap li.second { flex:1.8 !important; }
.sub-domain .connect-stap li.active + li.last { flex:0.5; }
.sub-domain .connect-stap li.first.complete,
.sub-domain .connect-stap li.second.complete { flex:unset; }
*/
.sub-domain.domaincheck > .container > .row > .col-xs-12 {padding: 0;}
.sub-domain.domaincheck .content-box .sub-content .stap .stap-title{margin: 25px 0 40px;font-size: 20px; text-align: left;word-break: keep-all;}
.sub-domain.domaincheck .content-box .sub-content .stap-1 .stap-title{margin-bottom: 40px;}
.sub-domain.domaincheck .content-box .sub-content .stap-3 h3.stap-title { text-align: center;margin-bottom: 30px; }
.sub-domain.domaincheck .content-box .sub-content .stap-3 h3.stap-title svg{width:58px !important; height:58px !important;}
.sub-domain.domaincheck .content-box .sub-content .stap h5.stap-title {font-size: 17px;margin-top: 70px;}
.sub-domain.domaincheck .content-box .sub-content .stap .stap-desc { margin-bottom: 35px; }
.sub-domain.domaincheck .content-box .sub-content .stap .stap-desc.domain-complete { padding:20px 15px;font-size: 14px; }
.sub-domain.domaincheck .sub-content .stap-1 .info-text{text-align: left;padding-left: 18px;}
.sub-domain.domaincheck .sub-content .stap-1 .info-text > svg {transform: unset;position: absolute;top: 5px;left: 0;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv > div{flex-direction: column; border-bottom: 1px solid #eeeff0; margin-bottom: 20px; padding-bottom: 20px;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv > div:last-child{border-bottom:none; margin-bottom: 0; padding-bottom: 0;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv > div > div:last-child{margin-left: 0;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .ipaddress-wrap,
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nameserver-wrap{width: 100%;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserip,
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserver{width: 100%;}
.sub-domain.domaincheck .sub-content .popup-btn-wrap .btn,
.connect-mx-record-modal .popup-btn-wrap .btn{width: calc(50% - 10px);}
.connect-mx-record-modal .modal-title {margin-top: 30px !important;}
.sub-domain.domaincheck .sub-content .stap-2 .info-text{/*padding: 15px 15px 15px 33px; margin: 25px 0 50px 0;*/padding-bottom: 0px;}
.sub-domain.domaincheck .domain-btn { margin-bottom: 35px; }
.sub-domain.domaincheck .sub-content .stap-2 .info-text > svg{left: 15px; top: 19px;}
.sub-domain.domaincheck .breadcrumb + .content-box {padding-bottom: 15px;}
.sub-domain.domaincheck.index .breadcrumb + .content-box{padding-bottom: 60px;}
.sub-page .breadcrumb {
margin-top: 0px;
padding: 0 0 0 16px;
margin-bottom: 20px;
}
.sub-domain.domaincheck .sub-title > .text h3 {margin-top:20px;padding-left: 0;}
.sub-domain.domaincheck .sub-title > .text h5 {padding-left: 0;}
.sub-domain.domaincheck .sub-content, .sub-domain.domaincheck .sub-title > .text, .sub-domain.domaincheck .ns-info {padding-left:0;}
.sub-domain.domaincheck .content-box .sub-title > .text:before,
.sub-domain.domaincheck .content-box .ns-info > .info:before,
.sub-domain.domaincheck .content-box .sub-title.domain-2nd > .text:before,
.sub-domain.domaincheck .content-box .sub-title.domain-3rd > .text:before {
left: 50%;
transform: translateX(-50%);
position: relative;
margin-top: 8px;
}
.sub-domain .info-content > .ns-config-wrap > span { padding: 0 24px; height: 40px; line-height: 40px;}
/*.sub-domain.domaincheck .content-box .sub-title,*/
.sub-domain.domaincheck .content-box .sub-content {padding:0 15px; margin-top: 15px;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv{margin-bottom: 0px;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserver {margin-right: 0;margin-bottom: 10px;float: right;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserver span,
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserip span {width:100%;height:36px;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserver span,
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserip span {
margin-left:0px;
}
.sub-domain.domaincheck .domain_mail.domain-3rd {padding:0;margin-top:50px;}
.sub-domain.domaincheck .domain_mail p {margin-left:0;}
.sub-domain.domaincheck .sub-content .domainconnect-input { max-width: 100%; }
.sub-domain.domaincheck .sub-content .input-group-addon { padding-left: 15px; font-size:16px;}
/*.sub-domain .ns-info:not(.dmnotice-wrap) ul > li > span:nth-child(1):after { content: ' ,';}*/
/*.sub-domain .ns-info:not(.dmnotice-wrap) ul > li > span + span { display: block; }*/
.sub-domain .ns-info ul > li{flex-direction: column; margin-bottom: 15px;}
.sub-domain .ns-info ul > li > div{word-break: break-all;}
.sub-domain .ns-info ul > li .display-ip {margin-top: 10px;}
.sub-domain .ns-info ul > li > div > label { }
.sub-domain .ns-info ul > li > div + div label{padding: 0 22px 0 0;}
/*.sub-domain .ns-info:not(.dmnotice-wrap) ul > li > span + span label { display: none; }*/
/*.sub-domain .ns-info:not(.dmnotice-wrap) ul > li > span + span { padding-left: 70px; }*/
/*.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv > div.nmserverNumber {margin-bottom: 0; height: 36px; display: table;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv > div.nmserverNumber > span {vertical-align: middle; display: table-cell;}*/
.sub-domain.domaincheck .domain_mail i.fa-exclamation-circle {float:none; left:50%; position: relative;transform: translateX(-50%);}
.sub-domain.domaincheck .domain_mail h3.domain_mtitle {line-height:1.3;margin:23px 0;display: block;position: relative; clear: both;float: left;width: 100%;}
.sub-domain.domaincheck .domain_mail p {float:left;width:100%;}
.sub-domain.domaincheck .domain_mail p,
.sub-domain.domaincheck .sub-content .domain-ctinfo .punnycodeInfo {line-height:1.5;}
.sub-domain.domaincheck .domain-dash {margin: 14px 0 49px 0; padding: 0;}
.sub.sub-page.sub-domain.domaincheck {padding-bottom: 40px;}
/*.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserip {margin-bottom:30px;}*/
/*.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserip,
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserver {float:right;}*/
/*.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmSeverinfo-wrap div:nth-child(2n-1) {float: left;position: relative; display: inline-block;width:70px;clear: both;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmSeverinfo-wrap div:nth-child(4n-3) > span {line-height: 1.4;}
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmSeverinfo-wrap div:nth-child(2n-1) > span {
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: right;
}*/
.sub-domain.domaincheck .sub-content .domain-ctinfo.errorMargin {margin-top:50px;}
/*.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmSeverinfo-wrap .nmserverNumber {margin-bottom: 10px;}*/
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserver + div > span {right:0;}
.sub-domain.domaincheck .domain-dash .domain-suc {
height: 40px;
padding: 0;
vertical-align: middle;
display: table-cell;
margin: 0 auto;
}
.sub-domain.domaincheck .sub-content .input-group-addon {padding:10px 0 10px 20px;}
.sub-domain.domaincheck .sub-content .input-group-addon + .form-control {padding: 10px 25px 10px 10px;box-shadow: none;}
.sub-domain.index .sub-title .btn-box, .sub-domain.domaincheck .sub-content .btn-box {
padding: 0;
height: 36px;
display: inline-block;
}
.sub-domain .btn.btn-default.dark {
height: 36px;
display: table-cell;
vertical-align: middle;
padding: 0;
}
.sub-domain.domaincheck .sub-content .content-input-box label.error {font-size:12px; line-height: 1.2; }
/*domain*/
.sub-domain.domaincheck.index .content-box .sub-title {
padding: 30px 15px;
flex-direction: column;
overflow: hidden;
margin-bottom: 0px;
}
.sub-domain.domaincheck.index .content-box .sub-content {padding: 5px 0 30px 0; margin: 0 15px;}
.sub-domain .sub-title.dmnotice-wrap .btn.btn-default.dark {
line-height: 1;
box-sizing: border-box;
padding: 12px 15px 15px;
width: 154px;
}
.sub-domain.domaincheck.index .sub-title.dmnotice-wrap .btn-box {margin-top: 15px; text-align: right; margin-bottom: 0;}
.sub-domain.domaincheck.index .sub-title.dmnotice-wrap .text,
.sub-domain.domaincheck .dmnotice-wrap svg {float:none;}
.sub-domain.domaincheck svg:first-child {margin-top: 0;}
.sub-domain.domaincheck.index .sub-title.dmnotice-wrap .text {margin: 0px;width: 100%;}
.sub-domain.domaincheck .sub-title > .text.domainnotice h3 {margin: 0 0 9px 0;}
.sub-domain.domaincheck .sub-title > .text.domainnotice h5,
.sub-domain.domaincheck .domain_mail.dmnotice-wrap p {margin-left: 0;width:100%;}
.sub-domain.domaincheck .content-box .domain_mail.domain-3rd {padding:40px 0 10px 0; margin: 0 15px}
.sub-domain.domaincheck .domain_mail.domain-3rd.dmnotice-wrap > div {padding: 0;}
.sub-domain.domaincheck.index .ns-info.dmnotice-wrap ul > li span {display: inline-block;}
.sub-domain.domaincheck.index .ns-info.dmnotice-wrap ul > li span > label,
.sub-domain.domaincheck.index .ns-info.dmnotice-wrap ul > li span .domain-ipinfo {width:68px;}
.sub-domain.domaincheck .domain_mail svg{position: static; display: block; margin: 0 auto;}
.sub-domain.domaincheck.index[data-lang='en'] .ns-info.dmnotice-wrap ul > li span > label,
.sub-domain.domaincheck.index[data-lang='en'] .ns-info.dmnotice-wrap ul > li span .domain-ipinfo {width:96px;}
.sub-domain.domaincheck.index .ns-info.dmnotice-wrap ul > li span > label {width: 68px;text-align: right;padding:0;margin-right: 22px;line-height: 1.3;letter-spacing: -0.3px;}
.sub-domain.domaincheck.index .ns-info.dmnotice-wrap ul > li span .domain-ipinfo {margin-top: 6px;}
.sub-domain.domaincheck.index .ns-info.dmnotice-wrap ul > li span > label + span {display: inline-block; }
.sub-domain.domaincheck .domain_mail.dmnotice-wrap h3.domain_mtitle {margin: 15px 0;width:100%;font-size: 16px;}
.sub-domain.index .user-domain-wrap .list-item > li > div > a { margin:0px; }
}
@media only screen and (max-width:620px) {
.sub-domain.domaincheck.index .ns-info.dmnotice-wrap ul > li span > label,
.sub-domain.domaincheck.index .ns-info.dmnotice-wrap ul > li span .domain-ipinfo {width:68px;}
.sub-domain.domaincheck.index .ns-info.dmnotice-wrap ul > li > span {width: 100%;}
}
@media only screen and (max-width:481px) {
/*.sub-domain.domaincheck .breadcrumb + .content-box {
padding:15px;
}*/
.sub-domain.domaincheck.index .ns-info.dmnotice-wrap ul > li span > label { width: 70px !important; margin-right: 15px;}
.sub-domain.domaincheck .sub-content .check-domain {padding:9px 10px;}
.sub-domain.domaincheck .sub-content .domain-ctinfo {margin-top:40px;}
.sub-domain.domaincheck.index[data-lang='en'] .ns-info.dmnotice-wrap ul > li span > label + span {vertical-align: middle;}
.sub-domain.domaincheck.index[data-lang='en'] .ns-info.dmnotice-wrap ul > li span > label {float: left;}
/*.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserip,
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserver {width:77%;}*/
}
/*@media only screen and (max-width:360px) {
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserip,
.sub-domain.domaincheck .sub-content .domain-ctinfo .dom-namesv .nmserver {width:75%;}
}*/
/*switch :: onoff icon*/
/*.switch {
position: relative;
display: inline-block !important;
vertical-align: top !important;
width: 40px !important;
height: 20px !important;
padding: 3px !important;
border-radius: 18px !important;
cursor: pointer !important;
}*/
.switch-input{
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.switch-label{
width: 52px;
position: relative;
display: block;
height: inherit;
font-size: 12px;
font-weight: normal;
text-transform: uppercase;
background: #949FAB;
border-radius: inherit;
font-family: 'open sans';
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
-webkit-transition-property: opacity background;
-moz-transition-property: opacity background;
-o-transition-property: opacity background;
transition-property: opacity background;
}
.switch-label:before, .switch-label:after{
position: absolute;
top: 45%;
margin-top: -.4em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.switch-label:before{
content: 'Off';
right: 8px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.5);
}
.switch-label:after{
content: '';
left: 10px;
color: white;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #4789E7;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-handle{
left: 36px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after{
content: "on";
opacity: 1;
}
.switch-handle{
position: absolute;
top: 4px;
left: 4px;
width: 18px;
height: 18px;
background: white;
border-radius: 10px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4) !important;
background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);
background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);
background-image: -o-linear-gradient(top, white 40%, #f0f0f0);
background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
.switch-handle:before{
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -8px 0 0 -8px;
width: 15px;
height: 15px;
background: #f9f9f9;
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
background-image: -webkit-linear-gradient(top, #eeeeee, white);
background-image: -moz-linear-gradient(top, #eeeeee, white);
background-image: -o-linear-gradient(top, #eeeeee, white);
background-image: linear-gradient(to bottom, #eeeeee, white);
}
.simple-switch {
position: relative;
display: inline-block;
vertical-align: top;
width: 46px;
height: 20px;
padding: 3px;
border-radius: 18px;
cursor: pointer !important;
}
label.simple-switch { margin:0; }
.simple-switch-label {
position: relative;
display: block;
height: inherit;
background: #939faa;
border-radius: inherit;
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
-webkit-transition-property: opacity background;
-moz-transition-property: opacity background;
-o-transition-property: opacity background;
transition-property: opacity background;
}
.simple-switch-label:before, .simple-switch-label:after{
position: absolute;
top: 45%;
margin-top: -.4em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.simple-switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.simple-switch-input:checked ~ .simple-switch-label {
background: #4789E7;
}
.simple-switch-input:checked ~ .simple-switch-handle{
left: 24px;
}
.simple-switch-handle{
top: 4px;
left: 4px;
width: 18px;
height: 18px;
position: absolute;
background: #fff;
border-radius: 10px;
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}