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

/*사이트 미개설 회원 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);
}
#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;
}


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