/*variable*/
:root {
    /*layout*/
	--main-width: 600px;
	--header-height: 85px;
	
	/*color*/
	--main-color: #fe0955;
	--point-color: #fff1f5;
	
	--primary-color-black01: #222;
	--primary-color-black02: #333;
	--secondary-color-gray01: #5e5854;
	--secondary-color-gray02: #666;
	--secondary-color-gray03: #999;
	
	--bg-color01: #f3f3f3;
	--bg-color02: #ececec;
}


/*button style*/
.non-border{border:none !important;}
.btn-custom,
a.btn-custom { display: flex; justify-content: center; align-items: center; width: 100%; height: 48px; border: 1px solid var(--main-color); border-radius: 10px; box-sizing: border-box; background: var(--main-color); font-size: 16px; font-weight: 700; color: #fff; text-align: center; transition: .2s all ease-out; }
.btn-custom:disabled,
.btn-custom.disabled { background: #ddd; color: var(--secondary-color-gray02); }

.btn-custom-v1,
a.btn-custom-v1 { background: #fff; color: var(--main-color); }

.btn-custom-v2,
a.btn-custom-v2 { border-color: var(--secondary-color-gray01); background: var(--secondary-color-gray01); }

.btn-custom2 { width: 148px; max-width: 100%; height: 40px; border: 1px solid var(--main-color); border-radius: 20px; box-sizing: border-box; background: var(--main-color); font-size: 16px; font-weight: 700; color: #fff; text-align: center; transition: .2s all ease-out; }

.btn-upload { display: block; position: relative; height: 54px; border: 1px solid var(--main-color); border-radius: 10px; box-sizing: border-box; background: #fff; overflow: hidden; }
.btn-upload label { display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; width: 100%; height: 100%; font-size: 15px; font-weight: 700; color: var(--main-color); text-align: center; letter-spacing: -0.3px; cursor: pointer; }
.btn-upload input[type="file"] { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/*플로팅 영역*/
.floating-group-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; max-width: var(--main-width); margin: 0 auto; padding: 24px 16px; border-top: 1px solid #eee; box-sizing: border-box; background: #fff; }

/*기본형(세로형)*/
.btn-group .btn { margin-bottom: 10px; }
.btn-group .btn:last-child { margin-bottom: 0; }

/*기본형(가로형)*/
.btn-group-v1 { display: flex; justify-content: center; align-items: center; }
.btn-group-v1 .btn { margin: 0; margin-right: 8px; }
.btn-group-v1 .btn:last-child { margin-right: 0; }

/*바텀시트형*/
.btn-group-bottomsheet { display: flex; align-items: center; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; }
.btn-group-bottomsheet .btn { height: 56px; border-radius: 0; font-size: 18px; letter-spacing: -0.05px; }


/*form style*/
.frm-group { position: relative; margin-bottom: 10px; }
.frm-group .inp-group { display: flex; justify-content: space-between; align-items: center; position: relative; height: 56px; border: none; border-bottom: 1px solid #e4e4e4; box-sizing: border-box; transition: .2s all ease-out; }
.frm-group .inp-group .inp-frm { width: 100%; height: 100%; border: none; border-radius: 6px; background: none; box-sizing: border-box; font-size: 16px; font-weight: 700; color: var(--primary-color-black01); }
.frm-group .inp-group .inp-frm:not(:only-child) { padding-right: 34px; box-sizing: border-box; }
.frm-group .inp-group .btn-delete { display: none; position: absolute; right: 0; width: 24px; height: 24px; border: none; background: url('../images/common/ico_x3.svg') center center no-repeat; }

.frm-group .inp-group.active { border-color: var(--primary-color-black01); }
.frm-group .inp-group.error { border-color: var(--main-color); }
.frm-group .inp-group.validation .btn-delete { display: block; }

.frm-error { margin-top: 6px; font-size: 12px; font-weight: 400; color: var(--main-color); letter-spacing: -0.5px; line-height: 17px; }


/*tab style*/
.slide-tab { margin-bottom: 20px; background: #fff; }
.slide-tab .swiper-slide { padding: 16px 0; border-bottom: 1px solid #ededed; box-sizing: border-box; font-size: 15px; font-weight: 700; color: var(--secondary-color-gray03); text-align: center; letter-spacing: -0.05px; transition: .2s color ease-out; cursor: pointer; }
.slide-tab .swiper-slide.active { border-color: #000; font-weight: 700; color: #000; }