:root {
	--main-color1: #6d71f9;
	--main-color2: #54c1fb;
	--main-color3: #272848;
	--main-color4: #eff0f8;
	--main-color5: #ffffff;
}

.mo{
	display: none;
}
.pc{
	display: inherit;
}


* {
	font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
	color:var(--normal-text);
	font-weight: normal;
	color:var(--main-color3);
	letter-spacing: -0.01em;
	line-height: 1.75em;
	-moz-font-feature-settings:'ss01','ss02','ss03','ss05','ss07','ss08','calt';
	-webkit-font-feature-settings:'ss01','ss02','ss03','ss05','ss07','ss08','calt';
	font-feature-settings:'ss01','ss02','ss03','ss05','ss07','ss08','calt';
}
html,body{
	
	font-size:18px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

.clear::after{
	content:"";
	display:block;
	clear:both;
}

*:focus {
    outline: 0;
	background:transparent;
	-webkit-tap-highlight-color: transparent;

}
.half {
	width:50% ;
}
.full {
	width:100% ;
}
input::placeholder {
	font-size:14px;
	color:#b4b9ca;
	line-height: 36px;
	padding-top:10px;
}

h3{
	font-weight:normal;
}
html,body{
	margin:0;
	padding:0;
	background:#fff;
	
}
body{

	overflow-x: hidden;
}
.blind {
	font-size:15px;
	letter-spacing:2px;
}
table{
	border-collapse: collapse;
	width:100%;
}


input:focus,select:focus,textarea:focus{
    outline: 0;

	transition-property:all !important;transition-duration:.2s !important
}

.square {
	width: 50%;
  }
  
  .square:after {
	content: "";
	display: block;
	padding-bottom: 100%;
  }
.hidden-scroll {
	-ms-overflow-style: none !important; /* IE and Edge */
	scrollbar-width: none !important; /* Firefox */
}
.hidden-scroll::-webkit-scrollbar {
	display: none !important;
	width: 0;  /* Remove scrollbar space */
	height: 0;
	background: transparent;  /* Optional: just make scrollbar invisible */
	-webkit-appearance: none;
}


.hidden {height:100vh; overflow:hidden !important; touch-action:none;}
.ellipsis {
    display: block;
    text-decoration: none;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; 
}

.ellipsis-multi{
display:-webkit-box !important; 
word-wrap:break-word; 
-webkit-line-clamp:6; 
-webkit-box-orient:vertical; 
overflow:hidden; 
text-overflow:ellipsis; 
}
h1,h2,h3,h4,h5,h6{
	margin:0;
	padding:0;
}
a {text-decoration:none;}
ul {padding:0;margin:0}
li {list-style:none;padding:0;margin:0}
.ani{
	transition-property:all !important;
	transition-duration:.2s !important
}
.ani-1s{transition-property:all;transition-duration:1s}
.center {text-align:center}
.highlight {
	position: relative;
	z-index:1;
}
button{margin:0;padding:0;border:0;background:transparent}
.highlight::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40%;
	background-color: #bfffa1;
	z-index: -1;
}




.gb-box{
    max-width:500px;
    margin:0 auto;
    background-color: #f5f5f5;
    position: relative;
}

.top-wrap{
    position: fixed;
    left:0;
    top:0;
    height:60px;
    width:100%;
    z-index: 10;
}
.gb-box .top{
    height:60px;
    position: relative;
    background:#fff;
    width:100%;
    max-width:500px;
    margin:0 auto;
    border-bottom:1px solid #eee;
}


.gb-box .top .content-title{
    font-family: 'Pretendard-Regular', 'Malgun Gothic','맑은고딕', sans-serif;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size:18px;
    font-weight: bold;
}

.top button{
    height: 60px;
    width: 46px;
    vertical-align: top;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 10px;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor:pointer;

}

.top button i{

    display: block;
    width: 100%;
    height: 100%;
    background-image: url(/assets/img/svg/ic-24-arrow-perv.svg);
    background-repeat: no-repeat;
    background-position: -5px center;
    background-size: 46px;
}
.write-gb {
    background:#3f3f3f;
    border:0;
    color:#fff;
    border-radius: 8px;;
    width:100%;
    text-align:center;
    padding:15px 0;
}

.write-gb {
    margin-top:0px;
	font-family:'Pretendard-Regular', 'Malgun Gothic','맑은고딕', sans-serif;
	margin-top:15px;
}

.top .write{
    right:10px;
    left:auto;
}
.top .write i{
    background-image: url(/assets/img/svg/ic-24-write.svg);
    background-repeat: no-repeat;
    background-position: 0px center;
    background-size: 46px;

}

.gb-box .contents {
    padding:12px;
    padding-top:72px;
}
.dynamic-wrap{
    position:fixed;
    left:0;top:0;
    background:transparent;
    width:100%;
    height:100%;
    z-index:1000;
    display:none;

}



.header-wrap{
	max-width:1600px;
	height:700px;
	margin:120px auto 0;
	position: relative;
	z-index:0;
	background : linear-gradient( to right, var(--main-color1), var(--main-color2) );
	border-radius: 40px 40px 40px 400px;
}

.inner-wrap{
	max-width:1280px;
	margin:0 auto;
	height:700px;
}

.inner-wrap .left{
	float:left;
	width:50%;
	padding-left:60px;
	padding-top:113px;
}
.inner-wrap .left a{
	display: inline-block;
	padding:10px;
	margin-right:5px;
	border-radius: 25px;
	border:1px solid transparent;
	min-width:224px;
	text-align:center;
	margin-top:50px;
}
.inner-wrap .left a i{
	color: #fff;
    background: transparent;
    font-weight: normal;
    vertical-align: -3px;
    margin-right: 4px;

}
.inner-wrap .left .btn1,
.inner-wrap .left .btn1 i{
	background:#fff;
	color:var(--main-color1);
}
.inner-wrap .left .btn2{
	color:#fff;
	background:transparent;
	border-color:#fff;
}

.inner-wrap .left h1{
	font-size:70px;
	color:#fff;
	font-weight:700;
	line-height: 130%;
}
.inner-wrap .left h1 span{
	font-size:inherit;
	color:inherit;
	line-height: inherit;
	font-weight:200;
}
.inner-wrap .left p{
	color:#fff;
	font-size:20px;

}
.inner-wrap .right{
	float:right;
	width:50%;
}
.inner-wrap .right img{
    width: 106%;
    transform: translateX(51px);
    padding-top: 96px;
}
header{
	width:100%;
	box-shadow: 0 10px 20px 0 rgb(0 0 0 / 5%);
	position: fixed;
	left:0;
	top:0;
	right: 0;
	z-index:100;
	background:#fff;
}
footer{
	width:100%;
	border-top:1px solid #e1e2ea;
}
.header-box{
	max-width:1280px;
	margin:0 auto;
	color:var(--main-color3);
	position: relative;
	height:90px;
	padding:25px 15px;
}
.header-box .logo{
	width:150px;
	float:left;
	display: block;
}
.header-box .logo img {
	width:140px;
	height:auto;
}

.header-box .right{
	float:right;
	color:inherit;
	width:150px;
	text-align:right;
	margin-top: 3px;
}
.header-box .right a{
	color:inherit;
}
.header-box .right a,
.header-box .right span{
	font-size:16px;
}
nav > div{
	float:left;
	margin-top: 3px;
	width:calc(100% - 300px);
}
nav > div > ul{
	margin:0 auto;
	width:100%;
	text-align:center;
}
nav > div > ul > li{
	display: inline-block;
	padding:0 15px;
	margin:0 15px;
}
nav > div > ul > li > a{
	font-weight:700;
	font-size:20px;
	color:var(--main-color3);
}

section{
	width:100%;
	padding:100px 0;
}
section .box{
	max-width:1280px;
	margin:0 auto;
	padding:0 15px;
}
section .box .left{
	position: relative;
	float:left;
	width:calc(50% - 5px);
}

section .box h4{
	color:var(--main-color1);
	font-weight:700;
	margin-bottom:15px;
	display: inline-block;
	position: relative;
	border-bottom:2px solid var(--main-color2);
	line-height:100%;
}

section .box  h3 {
	font-size:48px;
	font-weight: 700;
	color:var(--main-color3);
	line-height: 125%;
	margin:30px 0;
}

section .box p{
	color:var(--main-color3);
	font-size:20px;
	margin-top:20px;
}
.bg {
	background:#f1f2fa;
}

.title{
	width:100%;
	border-top:1px solid #eff0f8;
	background:#f1f2fa;
	padding:64px 0;
	margin-top:90px;
}
.title > div{
	height:auto;
	max-width:1280px;
	margin:0 auto;
	padding:0 auto;
	text-align:center;
}
.title > div > h3{
	font-weight:700;
	color:var(--main-color3);
	font-size:40px;
}
section .box .right{
	float:right;
	width:calc(50% - 5px);
	text-align: center;
	position: relative;
	padding:30px 0;
}
.intro-ani,
.intro-ani h4,
.intro-ani h3,
.intro-ani p {
	text-align:left !important;
}

.box .left .ani-gif{
	height:347px;
	width:auto;
	transform: scale(150%,150%);
	border-radius: 15px;
	box-shadow: 15px 15px 30px 0 rgba(29, 26, 51, 0.35);
	position: absolute;
	left:100px;
	top: 30px;
}
.ani-dec img:nth-child(1){
	z-index: 3;
}
.ani-dec img:nth-child(2){
	z-index: 2;
	transform: scale(100%,100%) translate(110%,0) !important;
}
.ani-dec img:nth-child(3){
	z-index: 1;
	transform: scale(80%,80%) translate(235%,0) !important;
}

.easy-create img{
	position: absolute;
    right: 116px;
    width: 682px;
    top: -38px;
}

.easy-create > div{
	float:left;
	width:calc(50% - 17px);
	margin-top:-50px;
	margin-bottom:-50px;

}
.easy-create > div:first-child{
	margin-right:34px;
	margin-top:50px;
}
.easy-create > div > span{
	display: block;
	background:#f1f2fa;	
	height:320px;
	border-radius:22px;
	padding:34px;
	text-align: left;
}
.easy-create > div > span h5{
	font-weight:700;
	color:var(--main-color3);
	font-size:24px;
	text-align:left;
}
.easy-create > div > span p{
	color:var(--main-color3);
	text-align:left;
}
.easy-create > div > span:first-child{
	margin-bottom:34px;

}
.easy-create i {
    background: linear-gradient( to right bottom, var(--main-color2),var(--main-color1) );
    color: #fff;
    font-size: 26px;
    font-weight: lighter;
    padding-top: 5px;
    width: 56px;
    height: 56px;
    text-align: center;
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 33px;
	box-shadow: 5px 5px 10px 0 rgba(0, 78, 194, 0.2);
}
.rounded-btn{
	display: inline-block;
    padding: 10px;
    margin-right: 5px;
    border-radius: 25px;
    min-width: 224px;
    text-align: center;
    margin-top: 50px;
	background: linear-gradient( to right bottom, var(--main-color2),var(--main-color1) );
	box-shadow: 5px 5px 10px 0 rgba(0, 78, 194, 0.2);
	color:#fff;
}
.rounded-btn i {
	color:#fff;
	vertical-align: -3px;
	margin-right:4px;
}
.rsvp img{
	position: absolute;
    right: 116px;
    width: 682px;
    top: -167px

}
.content{

	padding:40px 0;
	margin-top:90px;
}
.content > .box{
	
    padding: 40px 15px;
}
.item-list{
	float:left;
	width:calc(50% - 50px);
	margin-right:50px;
	margin-bottom:50px;
	box-shadow:15px 15px 30px 0 rgba(0, 0, 0, 0.15);
	border-radius:25px;
	overflow: hidden;
	position: relative;
}
.item-list:nth-child(2n){
	margin-right:0;
}
.item-list .image{
	width: 100%;
	height:400px;
	position: relative;
	background:#f1f2fa;
	background-image: url(/assets/img/web/item_01.jpg);
	background-size: cover;
	background-position: center center;
	padding:10px 20px;
	display: block;
}
.item-list .txt-area{
	padding:44px;
	display: block;
}
.item-list .item-name{
	font-size:20px;
	font-weight:400;
	display: block;
    line-height: 140%;
}
.price-old{
	color:#b1b2ba;
	text-decoration: line-through;
	
}
.price-new,
.won-unit{
	font-weight:700;
	font-size:22px;
	color:var(--main-color3);
}
.won-unit{
	font-weight: 400;
}
.discount {
	font-weight:700;
	font-size:22px;
	color:#ff5833
}
.item-list > .image > span{
	font-size:14px;
	background:var(--main-color2);
	color:#fff;
	display: inline-block;
	line-height: 100%;
	padding:5px;
	border-radius:7px;
	position: relative;
}
.item-list > .image > .item-sale{
	font-weight:700;
	background-color: #ff5833;
	color:#fff;
	
}

.go-sample {
	position: absolute;
    right: 44px;
    bottom: 44px;
	width:152px;
	transform: scale(75%);
	transform-origin: right bottom;
	color:var(--main-color1);
	background:#fff;
	border:1.34px solid var(--main-color1);
}
.go-sample i {
	color:var(--main-color2)
}

.copyright {
	text-align:center;
	color:var(--main-color3);
	padding:30px 0;
	

}

.myinfo-wrap{
	padding: 0;
}
.myinfo-menu{
	float:left;
	width:240px;
	min-height:400px;

}
.myinfo-content{
	float:right;
	width:calc(100% - 300px);
	min-height:400px;
	border-radius: 25px;
	box-shadow: 15px 15px 50px 0 rgb(0 0 0 / 10%);
	padding:50px;

}
.profile-box{
	margin-top:40px;
}
.profile-thumbnail {
	width:64px;
	height:64px;
	margin:0 auto;
	background-color: #f1f2fa;
	position: relative;
	float:left;
	background-size: cover;
	background-image: url(/assets/img/no-profile.png);

}
.profile-txt {
	float:left;
	margin-left:20px;
}
.profile-txt > span{
	display: block;
}
.profile-txt .name{
	color:var(--main-color3);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 110%;
	margin-top:12px;
}
.profile-txt .name > .hw{
	font-size:14px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 110%;
	color:var(--main-color3);
}
.profile-txt .email,
.help-txt,
.help-txt strong{
	font-size:13px !important;
	line-height: 110% !important;
	margin-top:6px !important;
	color:  rgba(0,0,0,.5) !important;
	font-weight: 400 !important;
}
.help-txt strong{
	font-weight: 700 !important;
	color:rgba(0,0,0,.66) !important;
}
.profile-thumbnail::before{
	content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: url(/assets/img/guestbook/sc_img_120.png);
    background-size: 100% 100%;
}

.profile-btn{
    color: var(--main-color1);
    background: #fff;
    border: 1.34px solid var(--main-color1);
	width:100%;
	margin:0;
	font-size:16px;
	padding: 6px;
	margin-top:20px;
}
.profile-btn i{
    color: var(--main-color1);

}
.profile-menu h5{
	
	padding:40px 20px 5px;
	display: block;
	font-size:14px;
	font-weight: 700;
	
}

.profile-menu li{
	border-bottom:1px solid #f1f2fa;
}
.profile-menu li a{
	padding:5px 20px;
	display: block;
	font-size:18px;
	font-size: 16px;
}

.myinfo-content h2,
.wizard-box h2{
	font-size:22px;
	font-weight: 700;
	line-height: 100%;
	position: relative;
}

.card-item{
    width: 100%;
    float: left;
    /* margin-bottom: 40px; */
    /* background: #f1f2fa; */
    /* border-radius: 25px; */
    border-bottom: 1px solid rgba(0,0,0,.1);
    padding: 47px 0;
}

.card-item:last-child{
	border-bottom:0;
}

.item-img {
	width:140px;
	height:140px;
	background:#fff;
	border-radius: 14px;
	background-size: cover;
	background-position: center center;
	position: relative;
	padding: 5px 9px;
	float:left;
}
.label-tutorial {
	background-color: #fff;
	color:var(--main-color3);
	font-size:14px;
	font-weight: 700;
	display: inline-block;
    line-height: 100%;
    padding: 5px;
    border-radius: 5px;
    position: relative;
}
.card-content{
	float:right;
	width:calc(100% - 180px);
	position: relative;
	height:140px;
}

.card-content h5{
	font-weight:700;
	display: inline-block;
}
.card-content h5 i{
	color:#e66f6f;
	vertical-align: -3px;
}
.card-content h5 + a,
.card-content h5 + a i{
	color:#a1a2aa;
	font-size:14px;
}
.card-content h5 + a i{
	vertical-align: -3px;
}
.bot-btn-list{
	width:100%;
	border:1px solid rgba(0, 0, 0, 0.15);
	background-color: #fff;
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	border-radius: 14px;
    height: 36px;
}
.bot-btn-list li {
	width:calc(100% / 5);
	text-align:center;
	float:left;
	border-right:1px solid rgba(0, 0, 0, 0.15);
	display: block;
	height:100%;
}
.bot-btn-list li:last-child{
	border-right:0;
}

.bot-btn-list li a{
	font-size: 14px;
    width: 100%;
    line-height: 100%;
    padding: 5px 0;
    display: block;
	
}
.bot-btn-list li a i{
	font-size:14px;
	display: inline-block;
	vertical-align: -2px;
	color:var(--main-color1);
	

}
.card-txt {
    margin-top: 10px;
    line-height: 120%;
	font-size:16px;
}
.card-txt span{
	display: block;
}
.card-txt .act-btn{
	font-size:13px;
	background:var(--main-color1);
	color:#fff;
}
.label-live {
	color:#dc143c
}
.card-more {
	position: absolute;
	right:0px;
	top:0;
	width:40px;
	height:40px;
	z-index: 2;
	text-align: center;
}
.card-more > button{
	
	cursor:pointer;
}
.card-controll-wrap{
	background:#fff;
	border-radius:10px;	
	position: absolute;
	right:8px;
	top:8px;
	width:150px;
	box-shadow: 15px 15px 30px 0 rgba(0, 0, 0, 0.15);
	display: none;
}
.card-controll-wrap li{
	display: block;
}
.card-controll-wrap a{
    font-size: 13px;
    width: 100%;
    padding: 10px 20px 9px;
    display: block;
	text-align: left;
}
.card-controll-wrap a i{
	font-size:13px;
	vertical-align: -2px;
	margin-right:3px;
}
.card-all {
	margin-top:10px;
}

.card-notice{
	background:#f4f5fa;
	font-size:13px;
	padding: 20px 26px;
	border-radius: 14px;
}
.card-notice h5{
	font-size:15px;
	font-weight:700;
	margin-top:20px;
	margin-bottom: 2px;
}
.card-notice h5:first-child{
	margin-top:0;
}
.card-notice div span{
	font-size:13px;
	display: block;
}

.card-notice-left {
	float:left;
	width:calc(50% - 15px);
	margin-right:30px;
}
.add-card{
	display: block;
	border:1px solid var(--main-color1);
	border-radius: 14px;
	text-align:Center;
	height:80px;
	line-height: 80px;
	color:var(--main-color1);
	margin-bottom:30px;
}
.add-card i {
	color:var(--main-color1);
	vertical-align: -3px;

}
.edit-row-4{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 15px;
	margin-bottom:15px;
}
.edit-row-3{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 15px;
	margin-bottom:15px;
}
.edit-row-4 > div,
.edit-row-3 > div{
	background:#f1f2fa;
	border-radius:15px;
}
.edit-row-1,
.edit-row-3{
	margin-bottom:15px;
}

.txt-view > div {
	padding:15px;
}
.txt-view i {
	background: linear-gradient( to right bottom, var(--main-color2),var(--main-color1) );
    color: #fff;
    font-size: 26px;
    font-weight: lighter;
    padding-top: 5px;
    width: 56px;
    height: 56px;
    text-align: center;
    border-radius: 10px;
    display: block;
    box-shadow: 5px 5px 10px 0 rgb(0 78 194 / 20%);
	float:left;
	
}
.txt-view .txt{
	color:var(--main-color1);
	font-size:12px;
	float:right;
	width:calc(100% - 76px);
	text-align: left;
	margin-top: 4px;
}
.txt-view .num{
	color:var(--main-color3);
	font-size:22px;
	font-weight: 900;
	float:right;
	line-height: 100%;
	width:calc(100% - 76px);
	text-align: left;
}
.txt-view .num .unit {
	margin-left:4px;
}


h5{
	font-weight: 700;
}
.stat-table{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.stat-table > div{
	border-bottom:1px solid var(--main-color5);
	min-height:60px;
	text-align:center;
}
.stat-table > .txt{
	border-bottom:0;
	font-size:14px;
	min-height: auto;
	padding:10px 0 15px;
}
.bar-base{
	position: relative;
}
.bar-base .bar1,
.bar-base .bar2{
	position:absolute;
	bottom: 0;
	width:17px;
	right:calc(50% + 4px);
	background: linear-gradient( to bottom, var(--main-color2),var(--main-color1) );
	border-radius: 18px 18px 0 0;
	min-height:9px;

}.bar-base .bar2{
	left:calc(50% + 4px);
	background: #bbb;
}
.bar-base .bar1 span,
.bar-base .bar2 span{
	text-align:center;
	font-size:9px;
	position: absolute;
	top:-20px;
	left:50%;
	transform: translateX(-50%);
}
.visit-area {
	display: grid;
	grid-template-columns: auto 273.344px;
	grid-gap: 15px;
}
.visit-area > div{
	
	padding:10px 16px;
	background:#f1f2fa;
	border-radius:15px;
	position: relative;
}
.visit-area > div > .cate{
    position: absolute;
    right: 15px;
    top: 15px;
	font-size:14px;
}
.visit-area > div > .cate .bar1,
.visit-area > div > .cate .bar2{
    height: 17px;
    width: 17px;
    border-radius: 50%;
    background: #bbb;
    display: inline-block;
    vertical-align: -3px;
    margin-right: 5px;
    margin-left: 1em;
}
.visit-area > div > .cate .bar1{
	background: linear-gradient( to bottom, var(--main-color2),var(--main-color1) );
}

.pie-chart2 {
	display:block;
	position:relative;
	width: 150px;
	height: 150px;
	
    margin: 30px auto;
    border-radius: 50%;
    margin-bottom: 36px;
  }
.pie-chart2::before {
    content: "";
    width: 10px;
    height: 18px;
    background-color: #6d71f9;
    left: calc(50% - 9px);
    top: 0;
    display: block;
    position: absolute;
    border-radius: 9px 0 0 9px;
}
.piec2-end {
    content: "";
    width:150px;
    height: 150px;
    left: 0;
    top: 0;

    display: block;
    position: absolute;
	z-index: 100;


}
.piec2-end::before {
    content: "";
    width: 10px;
    height: 18px;
    background-color: #54c1fb;
    left: 50%;
    top: 0;
    display: block;
    position: absolute;
    border-radius: 0 9px 9px 0;
}

.pie-chart2  .center{
	position:absolute;
	width:114px; 
	height: 114px;
	background :#f1f2fa;
	border-radius: 50%;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	font-weight: 700;
	font-size:30px;
	color:var(--main-color1);
	line-height: 110%;

	padding-top: 30px;
}
.pie-chart2  .center > div{
	color:#bbb;
	font-size:12px;    
	margin-top: -12px;
}
.col-grp {
	display: grid;
	grid-template-columns: 50px auto 50px;
	margin-top:10px;
	
}
.col-grp > div{
	font-size:12px;
	font-weight: 700;
}
.col-grp > div:last-child{
	text-align:right;
}
.col-grp > div:first-child{
	font-weight: 400;
}
.col-grp > div > .gauge{
	background:#ddd;
	width:calc(100% - 10px);
	height:17px;
	margin:0 auto;
	border-radius: 8.5px;
	overflow: hidden;
}
.col-grp > div > .gauge .bar{
	height:17%;
	background : linear-gradient( to right, var(--main-color2),var(--main-color1) );
	height:17px;
	border-radius: 0 8.5px 8.5px 0;
	min-width:17px;
}
.edit-row-3 > div{
	padding: 10px 16px;
	height:340px;
}
.gb-area{
	background: #f1f2fa;
	padding: 10px 16px;
	border-radius: 15px;
}

.gb-area > div > div{
	display: grid;
	grid-template-columns: 86px 80px auto 40px;
	grid-gap:15px;
	height:50px;
	line-height:50px;
	border-bottom:1px dotted rgb(0 0 0 / 20%);
}
.gb-area > div > h5{
	margin-bottom:15px;
}
.gb-area > div > div > div{
	line-height:50px;
	font-size:14px;
}
.gb-area > div > div .date > span{
	font-size:11px;
	background:var(--main-color1);
	color:#fff;
	font-weight: 700;
	text-align: center;
	display: block;
    line-height: 100%;
	padding: 5px 0px;
    border-radius: 4px;
	margin-top: 15px;
}
.gb-area > div > div .name {
	text-align: center;
}
.gb-area > div > div .setting{
	text-align:center;
}
.gb-area > div > div .setting i{
	color:#aaa;
}

.card-all .unit{
	color:var(--main-color1)
}
.myinfo-content > h2 > a{
	position: absolute;
	right:0;
}
.myinfo-content > h2 > a,
.myinfo-content > h2 > a i {
	color:#a1a2aa;
	font-size:15px;
}
.myinfo-content > h2 > a i {
	vertical-align: -3px;
}

.inp-area > div{
	width:calc(50% - 30px);
	float:left;

	margin-right:60px;
}
.full-width > div{
	width:100%;

}
.inp-area > div:last-child{
	margin-right:0;
}
.inp-area > div input,
.inp-area > div textarea {
	width:100%;
	height:40px;
	background-color: #f5f5f5;
	border:0;
	font-size:16px;
	padding:8px 14px;
	border-radius: 5px;
}
.inp-area > div textarea{
	height: auto;
	line-height: 1.75em;
}
.inp-area > div > div{
	line-height: 40px;
	padding:20px 0;
	display: grid;
	grid-template-columns: 110px 1fr;
	border-bottom:1px solid #e5e6e0;
}
.inp-area > div > div > div > span,
.wizard-box > .wizard-inp > .in-tit span{
    font-size: 16px;
    font-weight: 700;
    display: block;
    margin-top: 10px;
    line-height: 135%;
}
.radio-box{
	display: inline-block !important;
	margin-right:1em;
	margin-top:8px !important;
}
.inp-area .input-1char{
	width:40px;
}
.inp-area .input-2char{
	width:60px;
}
.inp-area .input-3char{
	width:80px;
}
.inp-area .input-4char{
	width:100px;
}.inp-area .input-mid{
	width:320px;
}
.inp-area .input-smid{
	width:160px;
}
input[type="checkbox"],
input[type="radio"] {
	display:none;
}
input[type="checkbox"]+label,
input[type="radio"]+label{
	font-size:15px;
}
input[type="checkbox"]+label::before,
input[type="radio"]+label::before{
	content:"\eb81";
	font-family: 'remixicon' !important;
	font-size:18px;
	color:#aaaaaa;
	vertical-align: -4px;
	margin-right:2px;
}
input[type="checkbox"]:checked + label::before,
input[type="radio"]:checked + label::before{
	content:"\eb80";
	color:var(--main-color1);
}
.bgm-list i{
    vertical-align: -4px;
    font-size: 18px;
	margin-left:4px;
	color:var(--main-color1);
}


.filebox input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip:rect(0,0,0,0);
	border: 0;
}

.filebox input[type=file]+label {
	cursor: pointer;
	position: relative;
	width:120px;
	height:120px;
	display: block;
}
.filebox input[type=file]+label::after{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 36px;
    height: 36px;
    content: "\eb2e";
    font-family: 'remixicon' !important;
    background-color: #fff;
    color: #929292;
    border: 1px solid #e5e5e5;
    text-align: center;
    border-radius: 50%;
    font-size: 20px;
    display: block;
    padding-top: 0px;    
	padding-left: 0px;
    line-height: 36px;
}

/* named upload */
.filebox .upload-name {
	display: inline-block;
	padding: .5em .75em;
	font-size: inherit;
	font-family: inherit;
	line-height: normal;
	vertical-align: middle;
	background-color: #f5f5f5;
  border: 1px solid #ebebeb;
  border-bottom-color: #e2e2e2;
  border-radius: .25em;
  -webkit-appearance: none; /* 네이티브 외형 감추기 */
  -moz-appearance: none;
  appearance: none;
}

/* imaged preview */
.filebox .upload-display {
	margin-bottom: 5px;
}


.filebox .upload-thumb-wrap {
	display: block;
	padding: 2px;
	border: 1px solid #ddd;
	border-radius: 50%;
	background-color: #fff;
	width:120px;
	height:120px;
	margin-top:10px;
	background-size: cover;
	background-position: center center;
	background-color: #eee;

}

.filebox .upload-display img {
	display: block;
	max-width: 100%;
	width: 100% \9;
	height: auto;
}

.filebox.bs3-primary input[type=file]+label {
  background-color: #fff;
	border-color: var(--main-color1);
	font-size:15px;
	height:40px;
	text-align: center;
	width:100%;
	color: var(--main-color1);
	padding: 10px;
	font-weight:700;
}	
.filebox.bs3-primary input[type=file]+label i {
	vertical-align: -3px;
	color: var(--main-color3);
}

.required::after{
    content: "";
    width: 6px;
    height: 6px;
    background-color: #ff5757;
    display: inline-block;
    vertical-align: 8px;
    margin-left: 2px;
    border-radius: 3px;
}

.btn-group {
	height:40px;
	text-align:right;
	margin:20px 0 10px;
}
.btn-group button,
.basic-btn{
	border:1px solid var(--main-color1);
	color:var(--main-color1);
	background-color: #fff;
	height:40px;
	min-width:150px;
	margin-left:5px;
	font-size:15px;
	font-weight:700;
	border-radius: 5px;
	padding: 11px;
}
.basic-btn{
	padding: 11px 20px;
	min-width:auto;
}
.btn-group button[type=submit]{
	border:1px solid linear-gradient( to right bottom, var(--main-color2),var(--main-color1) );
	color:#fff;
	background: linear-gradient( to right bottom, var(--main-color2),var(--main-color1) );

}
.top-space{
	margin-top:10px;
}
.myinfo-content h2.mid-insert {
    margin-top: 55px;
}

.is-use li {
	background:#f1f2fa;
	width:100%;
	display: block;
	padding:5px 14px;
	margin-bottom:10px;
	border:1px solid transparent;
	position: relative;
	/* height: 45px; */
	border-radius: 15px;
}
.is-use li i {
	cursor:grab;
	vertical-align: -4px;
	color:var(--main-color1);
	margin-right:10px;
}
.is-use .inner{
	
    font-size: 16px;
    font-weight: 700;
}

.grabbing i {
	cursor: grabbing !important;
}


.ui-sortable-handle::after {
	content:"";
	position: absolute;
	left:0;
	top:0;
	height:100%;
	width:calc(100% - 120px);
}
.is-use{
	padding:20px 0;
}

.toggle + label{
	right:0;
	top:0;
	background-color: #ccc;
	border:4px solid #ccc;
	display: inline-block;
	width:98px;
	height:28px;
	z-index:1;
	padding: 0 10px;
	border-radius: 20px;
	position: relative;
}
.toggle + label::before{
	position: absolute;
	content:"" !important;
	height:20px;
	left:0;
	width:40px;
	background:#ffffff;
	border-radius: 20px;
	margin:0 !important;
	transition-property:all !important;
	transition-duration:.2s !important;
}

.toggle:checked + label::before{
	top:0;
	left:40px;
	width:50px;
	content:"";
	background-color: #fff;

}
.toggle:checked + label{
	background-color: var(--main-color1);
	border:4px solid  var(--main-color1);;
}
.toggle + label > span {
	font-size:13px;
	font-weight:bold;
	height:28px;
	padding-top: 0px;
	float:left;
	color:#fff;
}
.toggle:checked + label > span {
	color: #fff;
}
.toggle + label > span:last-child{
	float:right
}

.itemBoxHighlight{
	height:45px;
	border:1px dashed var(--main-color1) !important;
	background-color: #fff !important;
}
.itemBoxHighlight::before{
	content:"여기에 위치합니다.";
	font-size:13px;
	color:var(--main-color1);
}

.setting-page + label{
    position: absolute;
    right: 8px;
    top: 8px;
    display: block;
}

.margin-bttom10{
	margin-bottom:10px;
}

.upload-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 15px;
	margin-bottom:15px;
}

.full-width div {
	position: relative;
}

.full-width div .setting-page + label {
	display: block;
	position: relative;
	left:0;
	right:auto;
	top: 4px;
}
.inner-btn-box{
	width: 108px;
	height:40px;
	border-radius: 5px;
	position:absolute !important;
	left:330px;
	top:0;
}
.inner-btn-box > button{
	height:40px;    
	padding: 11px 4px;
	font-size:15px;
	font-weight: 700;
	float:left;
	width:50%;
	border-radius: 0 5px 5px 0;
	color:#6d71f9;
	cursor: pointer;
}
.inner-btn-box > button:disabled {
	opacity: .3;
	cursor:no-drop;
}
.inner-btn-box > button::before{
	content:"\EA10";
	font-family: 'remixicon' !important;
	font-weight: 400;
	vertical-align: -2px;
	margin-right:2px;
}
.inner-btn-box > button:first-child{
	border-right:0;
	border-radius: 5px 0 0 5px;
}
.inner-btn-box > button:first-child::before{
	content:"\EE56";
	font-family: 'remixicon' !important;

}

.insert {
    padding: 20px 30px;
    display: block;
    width: 600px;
    margin: 5vh auto;
    height: 90vh;
    border: 1px solid #dbdbdb;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.insert .file-list {
    height: 200px;
    overflow: auto;
    border: 1px solid #989898;
    padding: 10px;
}
.insert .file-list .filebox p {
    font-size: 14px;
    margin-top: 10px;
    display: inline-block;
}
.insert .file-list .filebox .delete i{
    color: #ff5353;
    margin-left: 5px;
}

.file-list {
    background-color: #f5f5f5;
    display: block;
    width: 100%;
    min-height: 100px;
    padding: 15px;
    line-height: 100%;
    max-height: 360px;
    margin: 5px 0 6px;
    border-radius: 5px;
    overflow: auto;
}
.multiple-upload-btn {

		border: 1px solid var(--main-color1);
		color: var(--main-color1);
		background-color: #fff;
		height: 40px;
		width:100%;
		font-size: 15px;
		font-weight: 700;
		border-radius: 5px;
		cursor: pointer;
		padding: 11px;
		display: block;    
		line-height: 1em;
		text-align: center;
	
}
.multiple-upload-btn i {
	vertical-align: -3px;
	line-height: 100%;
	margin-right:4px;
	color:#999;
}
.file-box {
    float: left;
    width: calc(50% - 8px);
    margin-right: 15px;
    border: 1px solid #ececec;
    box-shadow: 10px 10px 20px 0 rgb(0 0 0 / 10%);
    padding: 15px;
    height: 80px;
    border-radius: 7px;
    margin-bottom: 15px;
	background: #fff;
}
.file-box:nth-child(even){
	margin-right:0;
}
.file-box:last-child,
.file-box:nth-last-child(2){
	margin-bottom:0;
}



.file-box div.preview-multiple {
    width: 50px;
    height: 50px;
    border: 1px solid #ececec;
    border-radius: 3px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    float: left;
}
.file-box .preview-multiple:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.file-name {
    font-weight: 700;
    margin: 0;
    padding: 0;
    margin: 0;
    padding: 0;
    font-weight: 700;
    font-size: 14px;
    display: block;
    width: calc(100% - 50px);
    padding-left: 14px;
    float: left;
    margin-top: 2px;
    padding-right: 40px;
    height: 29px;
    overflow: hidden;
    width: calc(100% - 60px);
}
.file-info-box{
    width: calc(100% - 50px);
    padding-left: 14px;
	padding-right: 40px;
    float: left;
    line-height: 100%;

}
.file-box .delete{

    position: absolute;
    right: 16px;
    top: 24px;
	cursor: pointer;


}
.file-box .delete i {
	color:#aaa;
}
.file-info-box > span{
	font-size:11px;
	color:#aaa;
}
.inp-area > div .multiple-input,
.step div .multiple-input{
	position: static;
	top:0px;
	z-index: 10;
	overflow: auto;
	height:40px;
	border:1px solid red;
	opacity: .1;
}
.hidden-btn {
	position: absolute !important;
	top:0;
	left:0;
	text-align:center;
	line-height: 110%;
	z-index: 0;
}
.muliple-sw{
	display: none;
}
.gallery-list{
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 31.4%;
	border:1px solid #dde;

	
}
.gallery-list:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.del-photo{
	font-family: 'remixicon' !important;
	position: absolute;
	right:-10px;
	top:-10px;
	width:36px;
	height:36px;
	cursor: pointer;

}
.del-photo::before{
	content:"\eb98";
	position: absolute;
	right:0;
	top:0;
	width:36px;
	height:36px;
	background-color: #fff;
    color: #929292;
    border: 1px solid #e5e5e5;
    font-size: 20px;
	text-align: center;
	border-radius: 50%;
	font-weight: 700;
	padding-top: 6px;
}
.plain-txt {
	font-weight:400 !important;
}
.question{
	position: relative;
	cursor: pointer;
	text-decoration: none;
	width:16px;
	height:16px;    
	vertical-align: text-top;
	display: inline-block;
}
.question::after{
	content: "\f044";
	font-family: 'remixicon' !important;
	position: absolute;
	top:0;
	display: block;
	left:0;
	width:16px;
	height:16px;
	line-height: 18px;
	font-size: 18px;
}
.naver_id_login{
	display: grid;
	height:50px;
	grid-template-columns: 60px 1fr;
	border:1px solid #e6e6ea;
	background-color: #fff;
	grid-gap: 10px;
	border-radius: 5px;
}
.naver_id_login img{
	width:50px;
	height:50px;
	margin-left:10px;

}
.naver_id_login > div{
	text-align:left;
	font-weight:600;
	color:#767676;
	line-height: 49px;
	height: 50px;
	font-size: 16px;
}
.naver_id_login:hover {
	border:1px solid #cbcbcf;

}
.naver_id_login:hover > div{
	color:var(--main-color3);
}
.login-notice{
	background: #f4f5fa;

	padding:13px;
	height: auto !important;
	margin-top:2em !important;
	border-radius: 5px;
}
.login-notice p,
.login-notice p a{
	font-size:12px !important;
	text-align: left !important;
	color:#767676;
	margin:0;
}
.login-notice p a{
	color:#555;
	text-decoration: underline;
}
.login-wrap h3,
.login-wrap h3 strong{
	font-size:34px;
	line-height: 130%;
	font-weight: 200;
}
.login-wrap h3 strong{
	font-weight: 800;
}
.login-wrap .sub {
	font-weight: 400;
	text-align: left;
	margin-top:1em;
}
.add-person{
	font-size:13px;
	color:#272848;
}
.left-align{
	text-align:left;
}
.mo-input{
    width:100%;
    height: 40px;
    background-color: #f5f5f5;
    border: 0;
    font-size: 16px;
    padding: 14px;
    border-radius: 5px;
}
.naver-id-input {
    margin-top:20px;
	width:100%;
	margin:20px 0;
}
.naver-id-submit{
    height: 40px;
    min-width: 150px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 5px;
    padding: 11px;
    border: 1px solid linear-gradient( to right bottom, var(--main-color2),var(--main-color1) );
    color: #fff;
    background: linear-gradient( to right bottom, var(--main-color2),var(--main-color1) );
    width:100%;
	margin-left:10px;
}
.disconnect{
	border:1px solid crimson;
	background: transparent;
	color:crimson;
}
.naver-id-input form > div:nth-child(1){
	margin-bottom:5px;
	margin-top:30px;
}
.naver-id-input form > div:nth-child(2){
	width:300px;
	float:left;
}
.naver-id-input form > button{
	width:150px;
	display: block;
	float:left;
}
.naver-id-info{
	margin-top:50px;
}

.menu-label{
    font-size: 10px;
    background: crimson;
    color: #fff;
    padding: 2px 4px;
    vertical-align: 2px;
    border-radius: 8px;
    margin-left: 5px;
	font-weight: 600;
}
.naver-id-disconnect{
	background: #999;
}
.naver-id-connected{
	background:green;
}
.naver-id-wait{
	background:orange;
}
.notice-box {
    border-bottom: 1px solid #eee;
    padding:15px 0;
	position: relative;
	cursor:pointer;
}

.notice-title {
	display: grid;
	grid-template-columns:  1fr 130px;
}
.notice-title > div,
.notice-more{
	font-size:12px;
	color:#999;
}
.notice-title > div:last-child,
.notice-more{
	text-align: right;
}
.notice-more{
	position:absolute;
	right:0;
	top:46px;
}
.notice-title > div i{
	font-size:14px;
	color:#999;
	vertical-align: -3px;
}
.notice-content{
	padding-right:60px;
}
.notice-desc{
	display: none;
}
.notice-desc {
	font-size:15px;
	padding:15px;
	background-color: #f1f2fa;
}

.add-card-mo-btn{
	position: fixed;
	right:20px;
	bottom:20px;
	background: crimson;
	width:55px;
	height:55px;
	text-align: center;
	border-radius: 50%;
	z-index: 10;
	
}
.add-card-mo-btn i{
	color:#fff;    
	font-size: 32px;
}
.add-card-mo-btn > span{
	position: fixed;
	right:20px;
	bottom:88px;
	background: #444;
	color:#fff;
	padding:5px 9px;
	border-radius:8px;
	
}

.add-card-mo-btn > span::before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    border-left: solid 7px transparent;
    border-right: solid 7px transparent;
    border-top: solid 15px #444;
    bottom: -9px;
    right: 20px;
    /* margin-left: -0.5rem; */
}

/* .add-card-mo-btn 요소에 애니메이션 효과를 적용 */
.add-card-mo-btn > span {
	/* 글자색을 투명도 0에서 1로 변경하는 애니메이션 */
	animation: change-color .8s infinite;
	
}

/* change-color 애니메이션 정의 */
@keyframes change-color {

	/* 0%에서 50%까지 글자색을 검정색에서 빨간색으로 변경 */
	0%{
		opacity: .5;
	}
	50% {
		/* 50%에서 100%까지 글자색을 빨간색에서 검정색으로 변경 */
		opacity: 1;
	}100%{
		opacity: .5;
	}
}

.wz-wrap{
	padding:0;
	margin:0;
	background: #f1f2fa;
	width:100vw;
	min-height:100vh
}
.wz-wrap .wz-head{
	max-width:650px;
	width:100%;
	padding:40px 15px;
	margin:0 auto;
}
.wz-wrap .wz-head img{
	width:100px;
	vertical-align: -7px;
	margin-right:4px;
}
.wz-wrap .wz-body{
	max-width:650px;
	width:100%;
	padding:15px;
	margin:0 auto;
	background: #fff;
	box-shadow: 15px 15px 50px 0 rgb(0 0 0 / 10%);
    padding: 50px 50px 100px 50px;
    border-radius: 25px;
	position: relative;
	overflow: hidden;
}
.wz-wrap .wz-body .foot-btns{
	position: absolute;
	bottom:0;
	left:0;
	width:100%;
	height:55px;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.wz-wrap .wz-body .foot-btns button{
	background:var(--main-color3);
	color:#fff;
	text-align: center;
	line-height: 55px;
	cursor: pointer;
}
.wz-steps{
	max-width:650px;
	width:100%;
	padding:15px;
	margin:0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	position: relative;

}
.wz-steps::after{
    content: "";
    width: 84%;
    height: 1px;
    position: absolute;
    left: 8%;
    top: 29px;
    background-color: #ccc;
}
.wz-steps div{
	text-align: center;
	font-size:14px;
	line-height: 1.25em;
}
.wz-steps div > div:last-child{
	margin-top:1em;
}
.wz-steps div:first-child i{
	font-size:28px;
    background: #fff;
    border-radius:14px;
	position: relative;
	z-index: 1;
	width:28px;
	height: 28px;
	display: block;
	margin:0 auto;

    line-height: 28px;
}
.wz-steps .prev-step i{
	color:var(--main-color1);
}
.wz-steps .this-step i{
	color:crimson;
}
.wz-steps .next-step i{
	color:#ccc;
}
.wz-body .content-wrap .img-select{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.wz-body .content-wrap .step label img{
	width:auto;
	width:100%;
	border:1px solid #ccc;
	border-radius:10px;
	display: block;
}
.wz-body .content-wrap .img-select label{
	position: relative;
}
.wz-body .content-wrap .img-select label::before{
	position: absolute;
	bottom:11px;
	left:0;
}
.wz-body .content-wrap .img-select label > span{
	display: block;
	font-size:12px;
	line-height: 1.25em;
	padding-left:22px;
	height: 42px;
	overflow: hidden;
	padding-top:10px;
}
.foot-btns .disable{
    background: #9e9e9e !important;
    color: #ccc !important;
}
.foot-btns .submit{
	display: block;
}
.wz-wrap h3{
	
	max-width:650px;
	width:100%;
	padding:15px;
	margin:0 auto;
	font-weight:800;
}

.row-half{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 50px;
}
.row-full{
	
	display: block;
}
.row-half h5{
	padding-top:10px;
	padding-bottom:5px;
}
.row-half input[type=text],
.row-half input[type=tel],
.row-half input[type=number],
.row-half input[type=date],
.row-half input[type=time]{
	height: 40px;
    background-color: #f5f5f5;
    border: 0;
    font-size: 16px;
    padding: 14px;
    border-radius: 5px;
	width:100%;
	
}
.row-half .char1{
	width:calc(2em + 28px) !important;
}
.row-half .char2{
	width:calc(4em + 28px) !important;
}
.row-half .char3{
	width:calc(6em + 28px) !important;
}
.row-half .char5{
	width:calc(10em + 28px) !important;
}
.row-half .adr{
	width:calc(100% - 102px) !important;
}
.row-half .basic-btn{
	height: 38px;
}
.row-half  > div > div{
	position: relative;
}
.row-half .help-txt {
	display: block;
}
.row-half .filebox input[type=file]+label{
	margin:0 auto;
}
.row-half .multiple-input{
	display: none;
}
.row-half .file-box{
	position: relative;
}
.row-half .file-list{
	margin: 46px 0 6px;
}
.file-box .delete {
    position: absolute;
    right: 7px;
    top: 0px;
    cursor: pointer;
}
.row-half .hidden-btn{
	position: static !important;
}
.row-half .gallery-list{
	position: relative;
}
.row-half .upload-grid{
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.wz-wrap .add-desc{
	max-width: 650px;
    width: 100%;
	margin:0 auto;
	padding: 50px 15px;
	font-size:13px;
}
.wz-wrap .info{
	display: block;
	color:#888;
	font-size:14px;
	padding:15px 0;
	margin: 15px 0;
	border-radius: 10px;;
}
.wz-wrap .myinfo-menu{
	float:none;
	width:100%;
}
.wz-wrap .profile-menu{
	display:grid;
	grid-template-columns: 1fr 1fr;
}
.wz-wrap .profile-menu > ul{
	margin-bottom:40px;
}
.wz-wrap .profile-menu h5{
	padding-top:0;
}
.wz-wrap .profile-menu li{
	border:0;
}
.qr-wrap{
	display: block;
	/* grid;
	height:140px;
	grid-template-columns: 140px 1fr; */

}
.wz-wrap .qrcode{
	border:4px solid var(--main-color1);
	width:140px;
	border-radius: 5px;
	display: block;
	margin:30px auto 10px;

}
.qr-wrap div > a{
	border-radius: 16px;
	font-size:12px;
	padding:4px 12px;
	display: block;
	margin-bottom:5px;
	margin:0 auto;
	background:#F7E600;
	color:#3A1D1D;
	width:140px;
	text-align: center;
}
.wz-wrap div > a i {
	vertical-align: -2px;
}
.show-url{
	background:#f1f2fa;
	padding:10px 20px;
	border-radius: 7px;
	margin-top:10px;
	position: relative;
}
.show-url a:last-child{
	display: block;
	background:#fff;
	width:76px;
	height:32px;
	text-align:center;
	position:absolute;
    top: 10px;
    right: 10px;
	line-height: 32px;
	border-radius: 10px;
    font-size: 15px;
	font-weight:600;
}
.show-url a:last-child i{
    font-size: 20px;
    display: inline-block;
    margin-top: 0px;
	font-weight:400;
	vertical-align: -5px;
	margin-right:5px;
}
.show-url a:first-child i{
	vertical-align: -3px;
	margin-right:5px;
	color:#aaa;
}
#att_zone {
	width: 100%;
	min-height: 150px;
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background-image: url(/assets/img/no-image.jpg);
	background-position: center center;
    background-repeat: no-repeat;
    background-size: 240px;
	background-color: #f4f4f4;
	margin-bottom:10px;

}
#att_zone > .file-img-box{
    display: block;
    position: relative;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    float: left;
    width: calc(50% - 8px);
    margin-right: 15px;
    margin-bottom: 15px;
	box-shadow: 5px 5px 15px 0 rgb(0 0 0 / 5%);
}
#att_zone > .file-img-box:nth-child(2n){
	margin-right:0;
}
#att_zone > .file-img-box:last-child,
#att_zone > .file-img-box:nth-last-child(2){
	margin-bottom:0;
}
#att_zone > .file-img-box > div{
	width:100%;
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
	background-color: #f4f4f4;
	border-radius: 5px;
	border: 1px solid #ddd;
	height:60px;
	width:60px;

}
#att_zone > .file-img-box > span{
    display: block;
    position: absolute;
    left: 85px;
    width: calc(100% - 120px);
    top: 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; 
}
#att_zone > .file-img-box > span:nth-child(4){
    top: 44px;
    font-size: 11px;
    color: #aaa;
	font-weight: 400;
}
#att_zone > .file-img-box .file-img-close{
	width:36px;
	height:36px;
	background-color: transparent;
	border-radius: 18px;
	position: absolute;
    right: 0;
    top: 0;
	font-family: remixicon!important;
    font-style: normal;
	border: 0;
	text-align: center;
	font-size: 20px;
	color: #333;
	cursor: pointer;
}
#att_zone > .file-img-box .file-img-close::before{
	content: "\EB99";
}

#btnAtt{
	display: none;
}
.bank-char1{
	width:80px !important;
}.bank-char2{
	width:calc(100% - 85px) !important;
}
.account-show{
	margin-top:-5px;
}

.row-half .inp-area > div > div > div > span{
	font-size:15px;
	margin-top:7px;
}
.row-half .inp-area .input-mid{
	width:100%;
}
.row-half .inp-area > div > div{
	grid-template-columns: 80px 1fr;
}
.row-half .inner-btn-box{
	left:auto;
	right:10px;
}