.imp-dialog { background: url(https://storage.googleapis.com/i.addblock.net/preloader2.gif) center center no-repeat; } 
/*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 (max-width:768px) {
	.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 .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: 11.666666666666664%; 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.gabia-mode .sub-content > ul > li[data-plan="SM"] { display: none; }
/*.sub-upgrade.en .plan-function .table > .tb-row > div:nth-child(1),*/
.sub-upgrade.gabia-mode .plan-function .table > .tb-row > div:nth-child(1) { width: 20%; }
.sub-upgrade.en .plan-function .table > .tb-row > div:nth-child(4),
.sub-upgrade.gabia-mode .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 { 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) li:first-of-type { width: 100%; max-width: 430px; display: block; margin: 5px auto 10px auto;}
	.sub-payment-state .sub-content .btn-box:has(.cancel) li:nth-of-type(2) { margin-left: 0!important; width: calc((100% - 10px)/2); max-width: 210px; margin-right:7px; }
	.sub-payment-state .sub-content .btn-box:has(.cancel) li:last-of-type { margin-left: 0!important; width: calc((100% - 10px)/2); max-width: 210px; }
	.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;}
}

@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:50px;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: 22px; color: #222428; }
.sub-page .plan-wrapper .breadcrumb li p { color:#696c71; margin-top: 8px; font-size: 13px; }

.sub-page .plan-tab	{ list-style: none;padding:0; 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; line-height: 45px; color:#b1b3b7; margin-right:8px; }
.sub-page .plan-tab li:first-child { margin-left: 30px; }
.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: 0px 15px;min-width: 98px; }
.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.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 > .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 rgb(0 0 0 / 15%);
    right: 12px;
    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 { padding:8px 0; }
.sub-plan .plan-site > li.info .plan-more .plan-more-box li { text-align:left;padding: 8px 15px 9px; line-height: normal;font-weight: 300; 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; border-top: 1px solid #eff0f4; }
.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: center;
    color: #9d9fa4;
    background-color: #f7f8f9;
    border: 1px solid #eff0f4;
    font-weight: 300;
    padding: 10px 0px 11px;
    vertical-align: middle;
}
.sub-billing .sub-content table tr th + th,
.sub-plan .sub-content .plan-escape tr th + th { border-left: 1px solid #fff; }
.sub-billing .sub-content table tr td,
.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 #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);
}

/**************************************************************************************************/
/**************************************************************************************************/
/*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: 12px; 
	color: #a1a7af; 
	line-height: 1.3; 
	letter-spacing: -0.05em; 
	padding: 15px 5px 15px;
}
/* .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 .sub-content > .agree > a { color: #4789e7; }
.sub-buy .sub-content > .btn {
	width: 100%;
	font-size: 13px;
	letter-spacing: -0.65px;
	padding:  16px 12px;
	color: #fff;
	background-color: #2d343e;
	border: none;
}
.sub-buy .sub-content > .btn:hover,
.sub-buy .sub-content > .btn:active,
.sub-buy .sub-content > .btn:focus {
	background-color: #3c4451;
}





/*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; }



/*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-buy .sub-content > .agree { padding-top: 12px; padding-bottom: 35.2px; }

	.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 {text-align: left;}
.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; }


@media only screen and (max-width:767px) {
	.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-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%;
	}
}



/*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.gabia-mode .sub-content { padding-left: 130px; }
	.sub-upgrade.en .sub-content > ul > li,
	.sub-upgrade.gabia-mode .sub-content > ul > li { width: 32%; }
}
@media only screen and (min-width:1200px) {
	/* betaSM - gabia, SM plan hidden*/
	.sub-upgrade.en .sub-content > ul > li { width: 32%; }
	.sub-upgrade.gabia-mode .sub-content > ul > li { width: 27.999%; }
}
@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; }
	.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 > .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; }

	.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; }
}
@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; }
}
@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;}
}

#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.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 { position: fixed;width: 100%;background-color: #eef0f4;z-index: 2; display: flex;overflow-x: auto; overflow-y: hidden; }
	.sub-page .plan-tab li { font-size: 14px; color:#b1b3b7; margin-left: 15px;flex-shrink: 0;line-height: 40px; }
	.sub-page .plan-tab li:first-child { margin-left: 15px;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: 0px 6px;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;
}