/* flex box */
.flexBox {display: flex;}
	.flexBox._inline {display: inline-flex;}
  .flexBox._allCenter {justify-content: center; align-items: center;}
  .flexBox._betweenCenter {justify-content: space-between; align-items: center;}
  .flexBox._between {justify-content: space-between;}
  .flexBox._alignCenter {align-items: center;}
  .flexBox._alignStart {align-items: flex-start;}
  .flexBox._alignEnd {align-items: flex-end;}
  ._wrap {flex-wrap: wrap;}
  ._column {flex-direction: column;}

  .flex1 {flex:1;}
  .flex2 {flex:2;}
  .flex3 {flex:3;}
  .flexShrink0 {flex-shrink: 0;}
  .flexAuto {flex:auto;}

	.gap8 {gap:8px;}
	.gap12 {gap:12px;}
	.gap16 {gap:16px;}
	.gap24 {gap:24px;}


/* layout */
.mainBox {max-width: 600px; width: 100%; margin: 0 auto; min-height: 100vh; height: 100%; background: #fff; position: relative; padding: 24px 16px; padding-bottom: 100px; overflow: hidden;}
  .mainBox._noPadding {padding: 0; padding-bottom: 100px;}

.titleLine {display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;}
	.titleLine .title {font-size: 20px; font-weight: 500; flex:1; padding-right: 24px; text-align: center;}
	.titleLine .title.txtAlignL {text-align: left;}
.mainBox._noPadding .titleLine {padding: 24px 24px 0;}

/* header {margin-bottom: 16px;}
header .headerLogo {height: 36px; width: auto;} */

.mainNav {position: fixed; left: 0; bottom: 0; width: 100%; display: flex; justify-content: center;}
.mainNav menu {max-width: 600px; width: 100%; background: #fff; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 -4px 10px rgba(0,0,0,0.05);}
.mainNav menu .navList {flex: 1;}
.mainNav menu a {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 12px 0; color: #aaa; cursor: pointer;}
.mainNav menu p {margin-top: 4px; font-size: 16px;}
.mainNav menu .navList.active a {color: #CC3626;}

.bottomBtnBox {position: absolute; left: 0; bottom:0; z-index: 1; width: 100%; padding: 24px 24px 40px 24px; background: #fff; display: flex; flex-direction: column; gap:16px;}

.bottomSpace {position: relative; margin-bottom: 8px;}
.bottomSpace::after {content: ""; display: block; width: calc(100% + 48px); background: #F8F8F8; position: absolute; left: -24px; bottom: -8px;}


/* sticky header */
header {position: sticky; top: 0; z-index: 1000; background: #fff;}