/*button style*/
.btn-custom,
a.btn-custom { display: flex; justify-content: center; align-items: center; width: 100%; height: 70px; border: none; border-radius: 10px; box-sizing: border-box; background: #03a9f4; font-size: 22px; font-weight: 700; color: #fff; text-align: center; transition: .2s all ease-out; }
.btn-custom:hover,
a.btn-custom:hover { background: #009be2; }
.btn-custom:focus,
a.btn-custom:focus { background: #008dce; }
.btn-custom:disabled,
.btn-custom.disabled { background: #f4f4f4; color: #bababa; }

.btn-group { display: flex; justify-content: space-between; align-items: center; }
.btn-group .btn { width: calc(50% - 8px); }
.btn-group .btn:last-child { margin-bottom: 0; }

.btn-floating-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; max-width: 720px; margin: 0 auto; padding: 16px 32px; border-top: 1px solid #f2f2f2; box-sizing: border-box; background: #fff; }

.btn-upload { display: block; position: relative; width: 100%; height: 100%; border: 1px solid #eaeaea; border-radius: 8px; box-sizing: border-box; background: url('../img/ico_camera1.svg') center center no-repeat #f9f9f9; overflow: hidden; }
.btn-upload label { display: block; position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer; }
.btn-upload input[type="file"] { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.btn-upload .btn-delete { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border: none; border-radius: 50%; box-sizing: border-box; background: url('../img/ico_x2.svg') center center no-repeat; background-size: contain; }

.list-upload { display: flex; flex-wrap: wrap; align-items: center; margin: -8px; }
.list-upload > li { width: 20%; height: 134.4px; padding: 8px; box-sizing: border-box; }


/*checkbox & radio button style*/
.ck-custom { display: none; }
.ck-custom + label { display: flex; align-items: center; font-size: 20px; font-weight: 400; color: #333; letter-spacing: -0.5px; cursor: pointer; }
.ck-custom + label .custom { display: block; width: 30px; height: 30px; margin-right: 10px; background: url('../img/ico_check1_off.svg') center center no-repeat; background-size: contain; }
.ck-custom:checked + label .custom { background-image: url('../img/ico_check1_on.svg'); }


/*swith button style*/
.switch { display: inline-block; position: relative; width: 74px; height: 34px; }
.switch input { display: none; }

.switch .slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #ddd; -webkit-transition: .4s; transition: .4s; cursor: pointer; }
.switch .slider:before { content: ''; position: absolute; left: 5px; bottom: 4px; background-color: #fff; -webkit-transition: .4s; transition: .4s; }

.switch input:checked + .slider { background-color: #03a9f4; }
.switch input:checked + .slider:before { -webkit-transform: translateX(38px); -ms-transform: translateX(38px); transform: translateX(38px); }

.switch .slider.round { border-radius: 18px; }
.switch .slider.round:before { width: 26px; height: 26px; border-radius: 50%; box-sizing: border-box; }

.switch .label:after { content: 'OFF'; display: block; position: absolute; top: 7px; right: 10px; font-size: 16px; font-weight: 300; color: #fff; letter-spacing: -0.5px; }
.switch input:checked ~ .label:after { content: 'ON'; left: 13px; right: auto; }

.switch-group { display: flex; justify-content: space-between; align-items: center; height: 64px; padding: 0 32px 0 24px; border: 1px solid #eaeaea; border-radius: 8px; box-sizing: border-box; }
.switch-group .tit { font-size: 18px; font-weight: 500; color: #000; }


/*form style*/
.frm-group { margin-bottom: 40px; }
.frm-group:last-child { margin-bottom: 0; }
.frm-group > div { margin-bottom: 16px; }
.frm-group > div:last-child { margin-bottom: 0; }
.frm-group .inp-group { position: relative; height: 64px; border: 1px solid #eaeaea; border-radius: 8px; box-sizing: border-box; }
.frm-group .tit-frm { position: absolute; top: -12px; left: 18px; padding: 0 6px; box-sizing: border-box; background: #fff; font-size: 18px; font-weight: 600; color: #000; letter-spacing: -0.5px; }
.frm-group .tit-frm .required { margin-left: 4px; font-weight: 500; color: #e91e63; vertical-align: 2px; }
.frm-group .inp-frm { width: 100%; height: 100%; padding: 0 24px; border: none; border-radius: 8px; box-sizing: border-box; background: none; font-size: 20px; font-weight: 400; color: #000; letter-spacing: -0.5px; }
.frm-group .inp-frm:read-only { background: #f8f8f8; }
.frm-group textarea.inp-frm { height: 400px; }

.frm-group .box { display: flex; justify-content: space-between; align-items: center; }
.frm-group .box .inp-group { width: calc(100% - 140px); }
.frm-group .box .btn-frm { width: 130px; height: 64px; border: none; border-radius: 10px; box-sizing: border-box; background: #03a9f4; font-size: 20px; font-weight: 600; color: #fff; }
.frm-group .box .btn-frm:disabled { background: #f4f4f4; color: #bababa; }

.frm-group2 { margin-bottom: 50px; }
.frm-group2:last-child { margin-bottom: 0; }
.frm-group2 .tit-frm { margin-bottom: 16px; font-size: 21px; font-weight: 500; color: #000; letter-spacing: -0.5px; }
.frm-group2 .tit-frm .required { margin-left: 4px; color: #e91e63; }
.frm-group2 > div { margin-bottom: 16px; }
.frm-group2 > div:last-child { margin-bottom: 0; }
.frm-group2 .inp-frm { display: block; width: 100%; height: 64px; padding: 0 20px; border: 1px solid #eaeaea; border-radius: 8px; box-sizing: border-box; font-size: 18px; font-weight: 400; color: #000; }
.frm-group2 textarea.inp-frm { height: 200px; padding: 20px; box-sizing: border-box; line-height: 28px; }


/*tab menu style*/
.tab-menu { display: flex; align-items: center; position: sticky; top: 150px; z-index: 100; border-bottom: 1px solid #f2f2f2; box-sizing: border-box; background: #fff; transition: .2s all ease-out; }
.tab-menu .tab { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 70px; font-size: 20px; font-weight: 400; color: #000; letter-spacing: -0.56px; transition: .2s all ease-out; cursor: pointer; }
.tab-menu .tab:hover,
.tab-menu .tab.active { font-weight: 700; color: #03a9f4; }
.tab-menu .tab:after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; width: 0; height: 4px; margin: 0 auto; background: #03a9f4; transition: .2s all ease-out; }
.tab-menu .tab:hover:after,
.tab-menu .tab.active:after { width: 100%; }


/*thumbnail style*/
.thumb { width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; }


@media only screen and (max-width: 720px) {
	/*button style*/
	.btn-custom,
	a.btn-custom { height: 50px; border-radius: 5px; box-sizing: border-box; font-size: 16px; letter-spacing: -0.21px; }
	
	.btn-floating-bottom { padding: 12px 16px; box-sizing: border-box; }
	
	.btn-upload { border-radius: 5px; box-sizing: border-box; background-size: 24px; }
	.btn-upload .btn-delete { width: 20px; height: 20px; }
	
	.list-upload { margin: -5px; }
	.list-upload > li { width: 25%; height: 22.917vw; padding: 5px; box-sizing: border-box; }
	
	/*checkbox & radio button style*/
	.ck-custom + label { font-size: 13px; letter-spacing: -0.36px; }
	.ck-custom + label .custom { width: 20px; height: 20px; }
	
	/*swith button style*/
	.switch { width: 64px; height: 31px; }
	.switch .slider:before { left: 4px; bottom: 4px; }
	
	.switch input:checked + .slider:before { -webkit-transform: translateX(33px); -ms-transform: translateX(33px); transform: translateX(33px); }
	
	.switch .slider.round { border-radius: 15px; box-sizing: border-box; }
	.switch .slider.round:before { width: 23px; height: 23px; }
	
	.switch .label:after { top: 8px; font-size: 13px; }
	.switch input:checked ~ .label:after { left: 12px; }
	
	.switch-group { height: 50px; padding: 0 16px; border-radius: 5px; box-sizing: border-box; }
	.switch-group .tit { font-size: 14px; }
	
	/*form style*/
	.frm-group { margin-bottom: 25px; }
	.frm-group .inp-group { height: 44px; border-radius: 5px; box-sizing: border-box; }
	.frm-group .tit-frm { top: -7px; left: 13px; padding: 0 3px; box-sizing: border-box; font-size: 12px; letter-spacing: -0.3px; }
	.frm-group .tit-frm .required { margin-left: 2px; vertical-align: 0; }
	.frm-group .inp-frm { padding: 0 16px; border-radius: 5px; box-sizing: border-box; font-size: 14px; letter-spacing: -0.3px; }
	
	.frm-group .box .inp-group { width: calc(100% - 98px); }
	.frm-group .box .btn-frm { width: 90px; height: 44px; border-radius: 5px; box-sizing: border-box; font-size: 14px; }
	
	.frm-group2 .tit-frm { margin-bottom: 10px; font-size: 16px; }
	.frm-group2 > div { margin-bottom: 10px; }
	.frm-group2 .inp-frm { height: 44px; padding: 0 16px; border-radius: 5px; box-sizing: border-box; font-size: 14px; }
	.frm-group2 textarea.inp-frm { padding: 16px; box-sizing: border-box; line-height: 21px; }
	
	/*tab menu style*/
	.tab-menu { top: 60px; }
	.tab-menu .tab { height: 44px; }
	.tab-menu .tab { font-size: 15px; letter-spacing: -0.42px; }
	.tab-menu .tab:after { height: 3px; }
}