body { overflow:auto; } 
/* body * { font-family: 'Raleway', 'Nanum Gothic'; } */

body .modal { overflow: hidden; overflow-y:hidden; }
/* body.modal-open { overflow: auto;} */
.signupForm h1 { font-size: 30px; font-weight: bold; text-transform: uppercase; line-height: 1.3; color:#2e3034; text-align: center; margin-top:70px; margin-bottom:23px;}
.signupForm p { font-size: 14px; line-height: 1.8; letter-spacing: -0.03em; color:#878791; text-align: center; margin-bottom: 0; }
.row div a div.bar {  font-size:14px; line-height: 2.4; letter-spacing: 0.05em; text-decoration: none;  text-transform: uppercase; color:#8a8d92; text-align: center; margin-top:5px; margin-bottom:40px; }

.row div a { text-decoration: none; }

.row div a .imgbox { position: relative; width: 100%; border:1px solid #e7e7e7;}
.row div a .imgbox .overbox { opacity: 0; position: absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(8,10,12,0.6)}
.row div a .imgbox .overbox span  { 
	position: inherit;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	padding: 12px 60px;
	font-size:14px;
	letter-spacing: -0.28px;
	text-transform: uppercase;
	color:#252525;
	background-color: #ffffff;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid #dadce0;
	border-radius: 10px;
}
/*.row div a .imgbox:hover .overbox { opacity: 1; transition:0.8s ease 0s; -webkit-transition:0.8s ease 0s; }*/

.template-list, .template-cate-list { margin: 50px 0px 55px 0px; }

.template-cate-list .catebox { text-align: center; }
.template-cate-list .catebox .cate { font-size: 14px; padding: 0px 15px; border: 1px solid #dadce0; background-color: white; border-radius: 30px; color: #222428; cursor: pointer; white-space: nowrap; margin-right: 10px; margin-bottom: 15px; display: inline-block; line-height: 38px; }
.template-cate-list .catebox .cate:hover { border: 1px solid #4789e7; color: #4789e7; }
.template-cate-list .catebox .cate.active { border: 1px solid #4789e7; color: #4789e7; }

body { background-color: #f3f4f9! important; }

html:has(body.cl-redesign-scroll-page)::-webkit-scrollbar,
body.cl-redesign-scroll-page::-webkit-scrollbar,
body.cl-redesign-scroll-page *::-webkit-scrollbar,
html:has(.cl-template-brandbar)::-webkit-scrollbar,
html:has(.cl-template-brandbar) body::-webkit-scrollbar,
html:has(.cl-template-brandbar) body *::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}

html:has(body.cl-redesign-scroll-page)::-webkit-scrollbar-thumb,
body.cl-redesign-scroll-page::-webkit-scrollbar-thumb,
body.cl-redesign-scroll-page *::-webkit-scrollbar-thumb,
html:has(.cl-template-brandbar)::-webkit-scrollbar-thumb,
html:has(.cl-template-brandbar) body::-webkit-scrollbar-thumb,
html:has(.cl-template-brandbar) body *::-webkit-scrollbar-thumb {
	background: #D1D3D5;
	border: 2px solid transparent;
	border-radius: 6px;
	background-clip: padding-box;
}

html:has(body.cl-redesign-scroll-page)::-webkit-scrollbar-thumb:hover,
body.cl-redesign-scroll-page::-webkit-scrollbar-thumb:hover,
body.cl-redesign-scroll-page *::-webkit-scrollbar-thumb:hover,
html:has(.cl-template-brandbar)::-webkit-scrollbar-thumb:hover,
html:has(.cl-template-brandbar) body::-webkit-scrollbar-thumb:hover,
html:has(.cl-template-brandbar) body *::-webkit-scrollbar-thumb:hover {
	background: #D1D3D5;
}

html:has(body.cl-redesign-scroll-page)::-webkit-scrollbar-track,
body.cl-redesign-scroll-page::-webkit-scrollbar-track,
body.cl-redesign-scroll-page *::-webkit-scrollbar-track,
html:has(.cl-template-brandbar)::-webkit-scrollbar-track,
html:has(.cl-template-brandbar) body::-webkit-scrollbar-track,
html:has(.cl-template-brandbar) body *::-webkit-scrollbar-track {
	background: transparent;
}

html:has(body.cl-redesign-scroll-page)::-webkit-scrollbar-button,
body.cl-redesign-scroll-page::-webkit-scrollbar-button,
body.cl-redesign-scroll-page *::-webkit-scrollbar-button,
html:has(.cl-template-brandbar)::-webkit-scrollbar-button,
html:has(.cl-template-brandbar) body::-webkit-scrollbar-button,
html:has(.cl-template-brandbar) body *::-webkit-scrollbar-button {
	display: none;
}

html:has(body.cl-redesign-scroll-page),
body.cl-redesign-scroll-page,
body.cl-redesign-scroll-page *,
html:has(.cl-template-brandbar),
html:has(.cl-template-brandbar) body,
html:has(.cl-template-brandbar) body * {
	scrollbar-width: thin;
	scrollbar-color: #D1D3D5 transparent;
}

/*사이트 미개설 회원 Modal*/
#template-guide { background-color:rgba(31,34,41,0.9); }
#template-guide .modal-content { background-color: #1f252d; color:#fff; border-radius:0; }
#template-guide .modal-content div { border:none;}
#template-guide .modal-header > img { margin-top:77px; margin-bottom: 22px; }
#template-guide .modal-header .modal-title { font-weight: 300; font-size: 36px; line-height: 2.2; letter-spacing: 0.035em; margin-top: 10px;}
#template-guide .modal-header p { font-weight: 400; font-size: 14px; line-height: 1.8; letter-spacing: -0.025em; color:#9aa2ac; }

#template-guide .modal-body .content-box ul { text-align: center; margin-top:30px; margin-bottom: 50px; }
#template-guide .modal-body .content-box ul li:first-child { margin-left: 0; }
#template-guide .modal-body .content-box ul li { display: inline-block; width:14%; vertical-align: text-top; margin-left:55px}
#template-guide .step-num { font-size: 16px; letter-spacing: 0.12em; }
#template-guide .step-info { font-size:15px; line-height: 1.8; letter-spacing: -0.025em; color:#e7e7e7; margin-top: 28px;}
#template-guide .content-box { position: relative; text-align: center;}
#template-guide .content-box > img { position: absolute; top:5px; left:12%;  }
#template-guide .modal-footer { padding:0; }
#template-guide .modal-footer .btn { font-size:15px; color:#000; font-weight:600; letter-spacing:0.1em; width: 100%; border-radius: 0; padding:18px 12px; background-color: #f9f9f9; }
#template-guide .modal-footer .btn i { margin-left:30px; font-weight: 900; }
.template-list .admin-controller {
	position: absolute;
	top: 5px;
	right: 5px;
	color: #fff;
	font-size: 20px;
}
.flat-modal.cl-common-modal + .modal-backdrop.fade.in {z-index: 1041;}
.modal-default .modal-dialog.cl-templateSelect * {font-family: 'Noto Sans kr', 'Noto Sans',sans-serif;}
.modal-default .modal-dialog.cl-templateSelect .br-text {
	display: block;
	margin-top: 30px;
}
.template-list .admin-controller a { color:#fff; }
#template-site {
	background: rgba(0, 0, 0, 0.85);
	z-index: 1400;
}

#template-site.is-preview-loading {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

#template-site .modal-dialog {
	padding-top: 55px;
	padding-bottom: 55px;
	width: 82%;
	height: 100%;
}
#template-site .modal-dialog .template-top {
	position: relative;
	float: left;
	width: 100%;
    margin-bottom: 25px;
}

#template-site .modal-dialog .modal-content {
	position:relative;
	height: 86.6%;
	overflow: hidden;
	/*float: left;*/
	border-radius: 0px;
	/*width: 100%;
	-webkit-transition: width 1s;
	transition: width 1s;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;*/
	margin: 25px auto 0 auto;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
	border: 1px solid rgba(219,220,223,0.25);
}
#template-site .modal-dialog .modal-content .load-template {
	display: none;
	width: 100%;
    height: 100%;
    position: absolute;
    background-color: #fff;
    z-index: 99;
}

#template-site .modal-dialog .template-select {
	position: relative;
	float: left;
	margin-left: 30px;
	padding: 0px 34.5px 4px;
    background-color: #fc4663;
    color: #fff;
    font-size: 12px;
    letter-spacing: 2px;
    cursor: pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    /*max-width: 160px;
    width: 100%;*/
    float: right;
	line-height: 32px;
}
#template-site .modal-dialog .template-mode.active {color:#fff;}
#template-site .modal-dialog .template-mode.active .template-mode-svg {fill: #fff;}
#template-site .modal-dialog .template-mode.active span {color: #fff;}
#template-site .modal-dialog .template-mode span {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.2em;
	color: #666666;
}
#template-site .modal-dialog .template-mode {    
    float: left;
    margin-right: 50px;
}
#template-site .modal-dialog .template-mode:last-child{margin-right: 0;}
#template-site .modal-dialog .template-mode .template-mode-svg {
	fill: #666666;
    margin-right: 10px;
    vertical-align: middle;
    width: 32px;
    height: 32px;
}

#template-site .modal-dialog .template-mode > .fa { display: inline-block; margin-right:10px; }
#template-site .modal-dialog .template-mode > .fa.active,
#template-site .modal-dialog .template-mode.active > .fa { display: none; }
#template-site .modal-dialog .template-mode.active > .fa.active { display: inline-block; }

#template-site .modal-dialog .template-title{
	float: left;
    color: #fff;
    font-weight: 100;
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    vertical-align: middle;
    line-height: 36px;
}

#template-site .template-close button.close span {
  color: #fff;
  font-size: 53px;
  right: 16px;
  position: absolute;
  top: 0px;	
}

#template-site .modal-dialog .modal-content iframe {
	position: relative;
	width:100%;
	height:100%;
	border:none;
	opacity: 1;
	visibility: visible;
	transition: opacity .12s ease;
}

#template-site.is-preview-loading .modal-dialog .modal-content iframe {
	opacity: 0;
	visibility: hidden;
}


#template-site .modal-dialog .template-right {position: absolute; right: 0;}
#template-site .template-right .template-lang-change {float: left; position: relative; right: unset; top: unset;}
#template-site .modal-dialog .template-mode-wrap {
	position: relative;
    max-width: 460px;
    overflow: hidden;
	margin: 0 auto;
    display: inherit;
    width: 100%;
    float: none;
}

@media only screen and (max-width: 1199px) {   /* 992px ~ 1199px *****************************************************/
	#template-site .template-right .template-lang-change { position: absolute;  right: 0; top:61px;}
	#template-site .modal-dialog .template-mode-wrap {
 		float: left;
	    display: inline-block;
	    margin-top: 30px;
	    margin-bottom: 29px;
	    max-width: 100%;
	}
	#template-site .modal-dialog .template-mode {margin-right: 20px;}
	#template-site .modal-dialog .template-top {margin-bottom: 0; }
	/*#template-site .modal-dialog .modal-content {margin-top: 29px;}*/
} 

@media only screen and (max-width: 991px) {    /* 768px ~ 991px *****************************************************/
	#template-site .template-right .template-lang-change { top: 56px;}
	#template-site .modal-dialog .template-mode-wrap {margin-top: 25px; margin-bottom: 24px;}
	/*#template-site .modal-dialog .modal-content {margin-top: 24px;}*/
	#template-site .modal-dialog .modal-content {height: 88.5%;}
	.template-cate-list .catebox br { display: none; }
} 

@media only screen and (max-width: 767px) {    /* 481px ~ 767px *****************************************************/
	#template-site .template-right .template-lang-change {top: 47px;}
	#template-site .modal-dialog .template-mode-wrap {margin-top: 19px; margin-bottom: 19px;}
	/*#template-site .modal-dialog .modal-content {margin-top: 19px;}*/
	#template-site .modal-dialog .template-title {line-height: 32px;}
	#template-site .modal-dialog .template-select {padding: 4.5px 24px;}
} 

@media only screen and (max-width: 480px) {    /* 480px 이하  *******************************************************/
	#template-site .modal-dialog .template-title {
		float: left;
	    overflow: hidden;
	    position: relative;
	    width: 100%;
	    margin-bottom: 15px;
	}
	#template-site .modal-dialog .template-select {
		max-width: 100%;
	    width: 100%;
	    text-align: center;
	    margin: 0;
	    float: none;
	    padding: 10px 0;
	}
	#template-site .modal-dialog .template-right {float: left; width: 100%;  position: relative;}
	#template-site .modal-dialog .template-mode-wrap {width: auto; margin-bottom: 20px;}
	#template-site .template-right .template-lang-change {top: 58px;}
	/*#template-site .modal-dialog .modal-content { margin-top: 20px;}*/
	#template-site .modal-dialog .modal-content {height: 81.4%;}
} 

/*@media only screen and (min-width: 481px) {
	
	#template-site .modal-dialog .template-mode {margin-right: 20px;}
	#template-site .template-right .template-lang-change {
		position: absolute;
		right: 0;top: 56px;
	}
	#template-site .modal-dialog .template-select {
		width: auto;
	    padding: 4px 24px;
	    height: 32px;
	    margin-left: 0;
	    float: none;
	    position: absolute;
	    right: 0;
	}
	#template-site .modal-dialog .template-mode-wrap {margin-bottom: 15px;}
}

@media only screen and (min-width: 768px) {
	#template-site .modal-dialog .template-mode-wrap {
		margin-bottom: 23px;
	}
	#template-site .template-right .template-lang-change {top: 56px;}
	#template-site .modal-dialog .template-select {width: auto; padding: 8px 34px;height: 36px;}
}

@media only screen and (max-width: 1199px) {
		
	#template-site .template-right .template-lang-change {top: 61px;}
	#template-site .modal-dialog .template-right {width: auto;}
	#template-site .modal-dialog .template-mode-wrap {
	    float: left;
	    display: inline-block;
	    margin-bottom: 30px;
	    top: 2px;
	}
	#template-site .modal-dialog .template-mode {margin-right: 20px;}
}

@media only screen and (min-width: 1217px) {
	#template-site .modal-dialog .template-right {position: absolute; right: 0;}
	#template-site .template-right .template-lang-change {float: left; position: relative; right: unset; top: unset;}
	#template-site .modal-dialog .template-mode-wrap {
		margin: 0 auto 25px auto;
	    display: inherit;
	    width: 100%;
	    float: none;
	}
	#template-site .modal-dialog .template-select {
		position: relative;
		float: left;
		margin-left: 30px;
		width: calc(100% - 140px);
	}
} 

@media only screen and (max-width: 480px) {
	#template-site .modal-dialog .template-right {
	    float: left;
    	width: 100%;
	}
	#template-site .modal-dialog .template-select {
		max-width: 100%;
	    width: 100%;
	    text-align: center;
	    margin: 0;
	    float: none;
	    height: 43px;
	    padding: 9px 24px;
	    margin-top: 3px;
	}
	#template-site .template-right .template-lang-change {position: absolute; top: 99px; right: 0;}
	#template-site .modal-dialog .template-top {margin-bottom: 18px;}
}
*/
.icon-new-template { 
	position:absolute;
	top:0;
	left:-8px;
}



/* user template css ****************/
/*사이트 미개설 회원 Modal*/
/*#template-guide[data-mblevel="user"] { background-color:rgba(31,34,41,0.9); }
#template-guide[data-mblevel="user"] .modal-content { background-color: #1f252d; color:#fff; border-radius:0; }
#template-guide[data-mblevel="user"] .modal-content div { border:none;}
#template-guide[data-mblevel="user"] .modal-header > img { margin-top:77px; margin-bottom: 22px; }
#template-guide[data-mblevel="user"] .modal-header .modal-title { font-weight: 300; font-size: 36px; line-height: 2.2; letter-spacing: 0.035em; margin-top: 10px;}
#template-guide[data-mblevel="user"] .modal-header p { font-weight: 400; font-size: 14px; line-height: 1.8; letter-spacing: -0.025em; color:#9aa2ac; }

#template-guide[data-mblevel="user"] .modal-body .content-box ul { text-align: center; margin-top:30px; margin-bottom: 50px; }
#template-guide[data-mblevel="user"] .modal-body .content-box ul li:first-child { margin-left: 0; }
#template-guide[data-mblevel="user"] .modal-body .content-box ul li { display: inline-block; width:14%; vertical-align: text-top; margin-left:55px}
#template-guide[data-mblevel="user"] .step-num { font-size: 16px; letter-spacing: 0.12em; }
#template-guide[data-mblevel="user"] .step-info { font-size:15px; line-height: 1.8; letter-spacing: -0.025em; color:#e7e7e7; margin-top: 28px;}
#template-guide[data-mblevel="user"] .content-box { position: relative; text-align: center;}
#template-guide[data-mblevel="user"] .content-box > img { position: absolute; top:5px; left:12%;  }
#template-guide[data-mblevel="user"] .modal-footer { padding:0; }
#template-guide[data-mblevel="user"] .modal-footer .btn { font-size:15px; color:#000; font-weight:600; letter-spacing:0.1em; width: 100%; border-radius: 0; padding:18px 12px; background-color: #f9f9f9; }
#template-guide[data-mblevel="user"] .modal-footer .btn i { margin-left:30px; font-weight: 900; }
.template-list .admin-controller {
	position: absolute;
	top: 5px;
	right: 5px;
	color: #fff;
	font-size: 20px;
}
.flat-modal.cl-common-modal + .modal-backdrop.fade.in {z-index: 1041;}
.modal-default .modal-dialog.cl-templateSelect * {font-family: 'Noto Sans kr', 'Noto Sans',sans-serif;}
.modal-default .modal-dialog.cl-templateSelect .br-text {
	display: block;
	margin-top: 30px;
}
.template-list .admin-controller a { color:#fff; }
#template-site[data-mblevel="user"] {
	background: rgba(0, 0, 0, 0.85);
}
#template-site[data-mblevel="user"] .modal-dialog {
	padding-top: 120px;
	padding-bottom: 55px;
	width: 82%;
	height: 100%;
}
#template-site[data-mblevel="user"] .modal-dialog .modal-content {
	position:relative;
	height:100%;
	border-radius: 0px;
}
#template-site[data-mblevel="user"] .modal-dialog .modal-content .load-template {
	display: none;
	width: 100%;
    height: 100%;
    position: absolute;
    background-color: #fff;
    z-index: 99;
}

#template-site[data-mblevel="user"] .modal-dialog .template-select {
  	position: absolute;
  	top: 55px;
  	right: 10px;
  	background-color: #fc4663;
  	color: #fff;
  	padding: 10px 40px;
  	font-size: 11px;
  	letter-spacing: 2px;
  	cursor:pointer;
}
#template-site[data-mblevel="user"] .modal-dialog .template-mode.active {
	color:#fff; 
}

#template-site[data-mblevel="user"] .modal-dialog .template-mode {
  	position: absolute;
  	top: 55px;
  	padding: 15px 10px 0 10px;
  	font-size: 11px;
  	font-weight: 600;
  	letter-spacing: 0.2em;
  	color: #666666;
  	cursor:pointer;
}
#template-site[data-mblevel="user"] .modal-dialog .template-mode > .fa { display: inline-block; margin-right: 5px; }
#template-site[data-mblevel="user"] .modal-dialog .template-mode > .fa.active,
#template-site[data-mblevel="user"] .modal-dialog .template-mode.active > .fa { display: none; }
#template-site[data-mblevel="user"] .modal-dialog .template-mode.active > .fa.active { display: inline-block; }

#template-site[data-mblevel="user"] .modal-dialog .template-title{
	position: absolute;
	top:65px;
	left:10px;
	color: #fff;
	font-weight: 100;
	font-size: 18px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

#template-site[data-mblevel="user"] .template-close button.close span {
  color: #fff;
  font-size: 53px;
  right: 16px;
  position: absolute;
  top: 0px;	
}

#template-site[data-mblevel="user"] .modal-dialog .modal-content iframe {
	position: relative;
	width:100%;
	height:100%;
	border:none;
}

#template-site[data-mblevel="user"] .modal-dialog .modal-content {
	margin: 0 auto;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
}

@media screen and (min-width: 1200px) {
	#template-guide[data-mblevel="user"] .modal-dialog { width:1200px; padding-top:10%; }

	#template-site[data-mblevel="user"] .modal-dialog .template-mode {
	  -webkit-transform:translateX(-50%);
	  -moz-transform:translateX(-50%);
	  -ms-transform:translateX(-50%);
	  -o-transform:translateX(-50%);
	  transform:translateX(-50%);
	}
	#template-site[data-mblevel="user"] .modal-dialog .template-mobile { right: 25%;}
	#template-site[data-mblevel="user"] .modal-dialog .template-tablet { right: 38%;}
	#template-site[data-mblevel="user"] .modal-dialog .template-desktop {  right: 50%;}
} 
@media screen and (min-width: 1420px) {
	#template-site[data-mblevel="user"] .modal-dialog .template-mobile {  right: 32%;}
	#template-site[data-mblevel="user"] .modal-dialog .template-tablet {  right: 41%;}
	#template-site[data-mblevel="user"] .modal-dialog .template-desktop {  right: 50%;}
}
@media only screen and (min-width: 992px) and (max-width: 1199px){

	#template-guide[data-mblevel="user"] .modal-dialog { width:950px; padding-top:10%; }
	#template-guide[data-mblevel="user"] .content-box > img {  max-width:95%;  left:2%;  }
	#template-guide[data-mblevel="user"] .modal-body .content-box ul li { width:18%; }

	#template-site .modal-dialog .template-mode {
	  -webkit-transform:translateX(-50%);
	  -moz-transform:translateX(-50%);
	  -ms-transform:translateX(-50%);
	  -o-transform:translateX(-50%);
	  transform:translateX(-50%);
	}
	#template-site[data-mblevel="user"] .modal-dialog .template-mode > .fa { margin-right: 0; }
	#template-site[data-mblevel="user"] .modal-dialog .template-mobile {  right: 22%;}
	#template-site[data-mblevel="user"][data-mblevel="user"] .modal-dialog .template-tablet {  right: 36%;}
	#template-site[data-mblevel="user"] .modal-dialog .template-desktop {  right: 49%;}
 }

@media screen and (max-width: 991px) {
	#template-site[data-mblevel="user"] .modal-dialog .template-mode { top:80px; padding: 8px 15px 0 5px; }
	#template-site[data-mblevel="user"] .modal-dialog .template-mode .fa { margin-right: 0; }
	#template-site[data-mblevel="user"] .modal-dialog .template-mobile {  left: 100px;}
	#template-site[data-mblevel="user"] .modal-dialog .template-tablet {  left: 0;}
	#template-site[data-mblevel="user"] .modal-dialog .template-desktop {  display:none;}
	#template-site[data-mblevel="user"] .modal-dialog .template-title { top:55px; }
	#template-site[data-mblevel="user"] .modal-dialog .template-select { padding:17px 30px; }


}

@media only screen and (min-width: 769px) and (max-width: 991px){
	.row div a .imgbox .overbox span {  padding:8px 10px; font-size: 8px; letter-spacing: 0.08em;}

	#template-guide[data-mblevel="user"] .modal-header > img { margin-top:50px; margin-bottom:15px;  }
	#template-guide[data-mblevel="user"] .modal-dialog { width:750px; padding-top:15%; }
	#template-guide[data-mblevel="user"] .content-box > img {  max-width:100%; top:10px; left:0;  }
	#template-guide[data-mblevel="user"] .modal-body .content-box ul { margin-top: 0; margin-bottom: 15px; }
	#template-guide[data-mblevel="user"] .modal-body .content-box ul li { width:20%; margin-left:20px}
	#template-guide[data-mblevel="user"] .step-info { font-size: 13px; margin-top: 15px; }
}

@media  only screen and (max-width: 768px){
	.row div a div.bar { margin-bottom: 20px; } 
	.signupForm h1 { margin-top: 60px; font-size: 25px; }
	.row div a .imgbox .overbox span { padding:8px 10px; letter-spacing: 0.12em; font-size: 8px;}

	#template-guide[data-mblevel="user"] .modal-header > img { margin-top:35px; margin-bottom: 10px; }
	#template-guide[data-mblevel="user"] .modal-header .modal-title { font-size: 28px; }
	#template-guide[data-mblevel="user"] .modal-header p { font-size: 13px; }
	#template-guide[data-mblevel="user"] .content-box > img {  max-width:90%; top:10px; left:5%; height: 25px;}
	#template-guide[data-mblevel="user"] .modal-body .content-box ul { margin-top: 0; margin-bottom: 15px; }
	#template-guide[data-mblevel="user"] .modal-body .content-box ul li { width:21%; margin-left:0; padding:0 5px;}
	#template-guide[data-mblevel="user"] .step-num { font-size: 13px; }
	#template-guide[data-mblevel="user"] .step-info { font-size: 11px; margin-top: 15px; }
	#template-guide[data-mblevel="user"] .modal-footer { margin-top:0; }
	#template-guide[data-mblevel="user"] .modal-footer .btn { font-size: 13px; padding:8px 12px;}

	#template-site[data-mblevel="user"] .modal-dialog .template-select { padding:5px 15px; }

	#template-site[data-mblevel="user"] .modal-dialog .template-mobile {  left: 0;}
	#template-site[data-mblevel="user"] .modal-dialog .template-tablet {  display:none; }

}

@media  only screen and (max-width: 479px){
	.signupForm h1 { font-size: 22px; line-height: 1.4;}
	.signupForm p { font-size: 12px; }
	#template-guide[data-mblevel="user"] .modal-header .modal-title { line-height: 1.2; margin-bottom:15px; }

	#template-site[data-mblevel="user"] .modal-dialog { padding-top:170px; }
	#template-site[data-mblevel="user"] .modal-dialog .template-mode { top: 135px;}
	#template-site[data-mblevel="user"] .modal-dialog .template-select { left:10px; top:95px; text-align: center; padding:10px 15px; }
}

@media  only screen and (max-width: 320px){
	#template-guide[data-mblevel="user"] .modal-content { margin-top:10px; max-width: 100%; }
	#template-guide[data-mblevel="user"] .modal-header > img { margin-top:15px; margin-bottom:10px; }
	#template-guide[data-mblevel="user"] .content-box > img {  max-width:90%; top:10px; left:5%; height: 35px;}
	#template-guide[data-mblevel="user"] .modal-header .modal-title { font-size: 22px; }
	#template-guide[data-mblevel="user"] .modal-header p { line-height: 1.4; font-size: 12px;}
	#template-guide[data-mblevel="user"] .step-num { line-height: 1; }
}

.icon-new-template { 
	position:absolute;
	top:0;
	left:-8px;
}*/

/* Template page v2 brand bar */
@property --cl-template-bar-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 135deg;
}

#nav.cl-template-old-head {
	display: none !important;
}

.cl-template-brandbar {
	--cl-template-bar-angle: 135deg;
	position: fixed;
	top: 0;
	left: max(0px, calc(50% - 960px));
	right: max(0px, calc(50% - 960px));
	z-index: 1200;
	height: 56px;
	padding: 0 24px;
	background: linear-gradient(90deg, #13B059 0%, #00C4CB 52%, #2E8BF0 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	color: #fff;
	font-family: 'Pretendard','Apple SD Gothic Neo','Malgun Gothic',-apple-system,BlinkMacSystemFont,sans-serif;
}

.cl-template-brandbar::before {
	display: none;
}

@keyframes clTemplateBarSpectrum {
	0% { background-position: 0% 50%; --cl-template-bar-angle: 120deg; }
	100% { background-position: 100% 50%; --cl-template-bar-angle: 150deg; }
}

@media (prefers-reduced-motion: reduce) {
	.cl-template-brandbar::before {
		animation: none;
	}
}

.cl-template-brandbar-spacer {
	height: 56px;
}

.cl-template-brandbar-logo,
.cl-template-brandbar-nav,
.cl-template-brandbar-right {
	position: relative;
	z-index: 1;
}

.cl-template-brandbar-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.cl-template-brandbar-logo img,
.cl-template-brandbar-logo .logo-svg {
	display: block;
	width: auto;
	height: 30px;
}

.cl-template-brandbar-nav {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 56px;
	font-size: 14.5px;
	font-weight: 500;
}

.cl-template-brandbar-nav a,
.cl-template-brandbar-nav a:hover,
.cl-template-brandbar-nav a:focus {
	color: rgba(255,255,255,.9);
	text-decoration: none;
	white-space: nowrap;
	background: transparent;
}

.cl-template-brandbar-nav a:hover,
.cl-template-brandbar-nav a.active {
	color: #fff;
}

.cl-template-brandbar-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	min-width: 160px;
	color: rgba(255,255,255,.9);
	font-size: 14px;
}

.cl-template-brandbar-bell {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: rgba(255,255,255,.9);
	text-decoration: none;
}

.cl-template-brandbar-bell:hover,
.cl-template-brandbar-bell:focus {
	color: #fff;
	text-decoration: none;
}

.cl-template-brandbar-bell svg {
	width: 20px;
	height: 20px;
	display: block;
}

.cl-template-brandbar-badge {
	position: absolute;
	top: 1px;
	right: 1px;
	min-width: 15px;
	height: 15px;
	padding: 0 4px;
	border-radius: 999px;
	background: #E5484D;
	color: #fff;
	font-size: 9px;
	line-height: 15px;
	text-align: center;
}

.cl-template-user-dropdown.btn-group {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
}

.cl-template-user-trigger,
.cl-template-user-trigger:hover,
.cl-template-user-trigger:focus,
.cl-template-user-trigger:active,
.cl-template-login-link,
.cl-template-login-link:hover,
.cl-template-login-link:focus {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 160px;
	padding: 0;
	color: #fff;
	background: transparent;
	text-decoration: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.cl-template-brandbar .cl-template-user-dropdown.open > .cl-template-user-trigger,
.cl-template-brandbar .cl-template-user-dropdown.open > .cl-template-user-trigger:hover,
.cl-template-brandbar .cl-template-user-dropdown.open > .cl-template-user-trigger:focus,
.cl-template-brandbar .cl-template-user-trigger:active,
.cl-template-brandbar .cl-template-user-trigger:focus-visible,
.cl-template-brandbar .cl-template-user-trigger[aria-expanded="true"] {
	color: #fff;
	background: transparent !important;
	border: 0 !important;
	outline: 0;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}

.cl-template-user-trigger .name-text {
	display: inline-block;
	max-width: 128px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}

.cl-template-user-trigger .caret-red {
	color: #fff;
	font-size: 11px;
	line-height: 1;
}

.cl-template-user-trigger .cl-template-user-caret {
	flex: none;
	color: currentColor;
}

.cl-template-brandbar .cl-template-user-menu.dropdown-menu {
	top: 36px;
	right: 0;
	left: auto;
	width: 220px;
	min-width: 220px;
	margin: 0;
	padding: 8px;
	border: 1px solid #E5E7EB;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(20,24,32,.18);
}

.cl-template-brandbar .cl-template-user-menu.dropdown-menu::before {
	content: '';
	position: absolute;
	top: -4px;
	right: 19px;
	width: 8px;
	height: 8px;
	background: #fff;
	border-top: 1px solid #E5E7EB;
	border-left: 1px solid #E5E7EB;
	transform: rotate(45deg);
}

.cl-template-brandbar .cl-template-user-menu.dropdown-menu li a,
.cl-template-brandbar .cl-template-user-menu.dropdown-menu li a:hover,
.cl-template-brandbar .cl-template-user-menu.dropdown-menu li a:focus {
	display: block;
	width: 100%;
	padding: 11px 12px;
	border-radius: 8px;
	color: #2F343B;
	background: transparent;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

.cl-template-brandbar .cl-template-user-menu.dropdown-menu li a:hover,
.cl-template-brandbar .cl-template-user-menu.dropdown-menu li a:focus {
	background: #F3FCF7;
	color: #13B059;
}

.cl-template-brandbar .cl-template-user-menu.dropdown-menu li.cl-template-user-divider,
.cl-template-brandbar .cl-template-user-menu.dropdown-menu li.cl-source-user-menu-divider {
	display: block;
	height: 1px;
	margin: 6px 4px;
	padding: 0;
	overflow: hidden;
	background: #E5E7EB;
	border: 0;
	list-style: none;
}

.cl-template-brandbar .cl-template-user-menu.dropdown-menu li.cl-source-user-menu-policy-divider {
	margin-top: 8px;
	margin-bottom: 7px;
}

.cl-template-brandbar .cl-template-user-lang,
.cl-template-brandbar .cl-template-user-lang.cl-source-user-menu-lang {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 11px 12px;
	border: 0;
	color: #2F343B;
	font-size: 14px;
	font-weight: 500;
}

.cl-template-brandbar .cl-template-user-lang .cl-source-user-menu-lang-label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.cl-template-brandbar .cl-template-user-lang .cl-source-user-menu-lang-options {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 13px;
	font-weight: 700;
}

.cl-template-brandbar .cl-template-user-menu.dropdown-menu .cl-template-user-lang .cl-source-user-menu-lang-options a,
.cl-template-brandbar .cl-template-user-menu.dropdown-menu .cl-template-user-lang .cl-source-user-menu-lang-options a:hover,
.cl-template-brandbar .cl-template-user-menu.dropdown-menu .cl-template-user-lang .cl-source-user-menu-lang-options a:focus,
.cl-template-brandbar .cl-template-user-lang .cl-source-user-menu-lang-options span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 3px 8px;
	border-radius: 6px;
	color: #B4B8BF;
	background: transparent;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color .12s, color .12s;
}

.cl-template-brandbar .cl-template-user-menu.dropdown-menu .cl-template-user-lang .cl-source-user-menu-lang-options a:hover,
.cl-template-brandbar .cl-template-user-menu.dropdown-menu .cl-template-user-lang .cl-source-user-menu-lang-options a:focus {
	background: #F1F2F5;
	color: #B4B8BF;
	outline: none;
}

.cl-template-brandbar .cl-template-user-menu.dropdown-menu .cl-template-user-lang .cl-source-user-menu-lang-options a.active {
	color: #2E8BF0;
	background: transparent;
}

.cl-template-brandbar .cl-template-user-lang .cl-source-user-menu-lang-options .sep {
	padding: 0;
	color: #E5E7EB;
	font-weight: 400;
	line-height: 1;
}

.cl-template-brandbar .cl-template-user-policy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 2px 4px 3px;
	color: #C0C4CC;
	font-size: 11px;
	font-weight: 500;
	line-height: 16px;
	white-space: nowrap;
}

.cl-template-brandbar .cl-template-user-menu.dropdown-menu .cl-template-user-policy a,
.cl-template-brandbar .cl-template-user-menu.dropdown-menu .cl-template-user-policy a:hover,
.cl-template-brandbar .cl-template-user-menu.dropdown-menu .cl-template-user-policy a:focus {
	display: inline;
	width: auto;
	padding: 0;
	color: #B6BBC4;
	background: transparent;
	font-size: 11px;
	font-weight: 500;
	text-decoration: none;
}

.cl-template-brandbar .cl-template-user-menu.dropdown-menu .cl-template-user-policy a:hover,
.cl-template-brandbar .cl-template-user-menu.dropdown-menu .cl-template-user-policy a:focus {
	color: #13B059;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu.dropdown-menu {
	top: calc(100% + 10px);
	right: 0;
	left: auto;
	width: 220px;
	min-width: 220px;
	margin: 0;
	padding: 8px;
	border: 1px solid #E5E7EB;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(20,24,32,.18);
	z-index: 1300;
	text-align: left;
	box-sizing: border-box;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu.dropdown-menu::before {
	content: '';
	position: absolute;
	top: -4px;
	right: 19px;
	width: 6px;
	height: 6px;
	background: #fff;
	border-top: 1px solid #E5E7EB;
	border-left: 1px solid #E5E7EB;
	transform: rotate(45deg);
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-item,
.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-item:hover,
.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-item:focus {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 11px 12px;
	border-radius: 8px;
	color: #222428;
	background: transparent;
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-sizing: border-box;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-item:hover,
.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-item:focus {
	background: #E8F2FD;
	color: #2E8BF0;
	outline: none;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .menu-icon {
	flex: none;
	width: 19px;
	height: 19px;
	color: #8A8F98;
	fill: currentColor;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .menu-icon.stroke {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-item:hover .menu-icon,
.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-item:focus .menu-icon {
	color: #2E8BF0;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-divider {
	display: block;
	height: 1px;
	margin: 6px 4px;
	padding: 0;
	background: #E5E7EB;
	border: 0;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-policy-divider {
	margin-top: 8px;
	margin-bottom: 7px;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-lang {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 12px;
	color: #222428;
	font-size: 14px;
	font-weight: 500;
	box-sizing: border-box;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-lang-label {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-lang-options {
	display: flex;
	align-items: center;
	gap: 2px;
	font-size: 13px;
	font-weight: 700;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-lang-options a,
.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-lang-options a:hover,
.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-lang-options a:focus,
.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-lang-options span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 3px 8px;
	border-radius: 6px;
	color: #B4B8BF;
	background: transparent;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color .12s, color .12s;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-lang-options a:hover,
.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-lang-options a:focus {
	background: #F1F2F5;
	color: #B4B8BF;
	outline: none;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-lang-options a.active {
	color: #2E8BF0;
	background: transparent;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-lang-options .sep {
	padding: 0;
	color: #E5E7EB;
	font-weight: 400;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-policy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 2px 4px 3px;
	color: #C0C4CC;
	font-size: 11px;
	font-weight: 500;
	line-height: 16px;
	white-space: nowrap;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-policy-dot {
	color: #D3D6DC;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-policy a,
.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-policy a:hover,
.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-policy a:focus {
	display: inline;
	width: auto;
	padding: 0;
	color: #B6BBC4;
	background: transparent;
	font-size: 11px;
	font-weight: 500;
	line-height: 16px;
	text-decoration: none;
}

.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-policy a:hover,
.cl-template-brandbar .cl-template-user-menu.cl-source-user-menu .cl-source-user-menu-policy a:focus {
	color: #13B059;
	outline: none;
}

@media (max-width: 900px) {
	.cl-template-brandbar {
		padding: 0 14px;
	}

	.cl-template-brandbar-nav {
		display: none;
	}

	.cl-template-brandbar-right {
		min-width: 0;
	}
}

#info-process.cl-info-process {
	position: fixed !important;
	inset: 0 !important;
	z-index: 10000000000 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100vw !important;
	height: 100vh !important;
	padding: 20px !important;
	background: rgba(20, 24, 32, .24) !important;
	box-sizing: border-box !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transition: opacity .12s ease !important;
}

#info-process.cl-info-process.show {
	opacity: 1 !important;
	pointer-events: auto !important;
}

#info-process.cl-info-process .cl-info-process-box {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 14px !important;
	width: 300px !important;
	height: 112px !important;
	max-width: calc(100vw - 48px) !important;
	padding: 24px 28px 22px !important;
	background: #fff !important;
	border: 1px solid #E5E7EB !important;
	border-radius: 14px !important;
	box-shadow: 0 18px 45px rgba(20, 24, 32, .18) !important;
	box-sizing: border-box !important;
	color: #25282D !important;
	font-family: "Noto Sans KR", sans-serif !important;
	text-align: center !important;
}

#info-process.cl-info-process .cl-info-process-spinner {
	display: block !important;
	width: 30px !important;
	height: 30px !important;
	border: 3px solid #CDEFDD !important;
	border-top-color: #13B059 !important;
	border-radius: 50% !important;
	animation: cl-template-process-spin .7s linear infinite !important;
}

#info-process.cl-info-process .cl-info-process-check-icon {
	display: block !important;
	width: 30px !important;
	height: 30px !important;
	margin: 0 !important;
	overflow: visible !important;
	color: #13B059 !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2.8 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	animation: cl-template-process-check-pop .24s ease-out .05s both !important;
}

#info-process.cl-info-process .cl-info-process-check-icon path {
	stroke: currentColor !important;
	stroke-dasharray: 24 !important;
	animation: cl-template-process-check-draw .28s ease-out .08s both !important;
}

#info-process.cl-info-process p {
	margin: 0 !important;
	padding: 0 !important;
	color: #8A8F98 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
}

@keyframes cl-template-process-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes cl-template-process-check-pop {
	0% {
		opacity: 1;
		transform: scale(.65);
	}
	70% {
		opacity: 1;
		transform: scale(1.12);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes cl-template-process-check-draw {
	from {
		stroke-dashoffset: 24;
	}
	to {
		stroke-dashoffset: 0;
	}
}