@charset "utf-8";

@import url('./reset.css');

:root {
  /* Primary Color */
  --color-orange-main: #ff6838;
  --color-orange-sub: #ffbaab;
  --color-red-main: #ca2222;
  --color-red-sub: #eeaaaa;
  
  /* Monotone Color */
  --color-black: #333;
  --color-black2: #444;
  --color-black3: #121212;

  --color-gray1: #898989;
  --color-gray2: #bfbfbf;
  --color-gray3: #eee;
  --color-gray4: #f6f6f6;
  --color-gray5: #666;
  --color-gray6: #ccc;
  --color-gray7: #999;
  --color-gray8: #d9d9d9;
  --color-gray9: #4c4c4c;
  --color-gray10: #ddd;
  --color-gray11: #a0a0a0;
  --color-gray12: #f3f3f3;

  --color-white: #fff;

  --color-blue-main: #0383d6;
  --color-blue-sub: #3691CE;
  --color-blue-active: #1f5db6;
  --color-blue-bg: #f2f5f8;
  
  --color-green1: #206A06;
  --color-green2: #5B9D43;
  --color-green3: #1E4337;
  --color-green-bg: #EFF9DF;
  

  /* Divider Line Color */
  --divider-line: #e0e0e0;
  --divider-dark-line: #d6d6d6;

  /* font-size */
  --fs-50: 50px;
  --fs-48: 48px;
  --fs-46: 46px;
  --fs-44: 44px;
  --fs-42: 42px;
  --fs-40: 40px;
  --fs-36: 36px;
  --fs-32: 32px;
  --fs-30: 30px;
  --fs-28: 28px;
  --fs-26: 26px;
  --fs-24: 24px;
  --fs-22: 22px;
  --fs-20: 20px;
  --fs-18: 18px;
  --fs-16: 16px;
  --fs-14: 14px;
  --fs-13: 13px;
  --fs-12: 12px;
  --fs-11: 11px;
  --fs-10: 10px;

  /* line-height */
  --lh-160: 1.6;
  --lh-145: 1.45;
  --lh-135: 1.35;
  --lh-130: 1.3;
  --lh-120: 1.2;

  --lh-60: 60px;
  --lh-58: 58px;
  --lh-56: 56px;
  --lh-54: 54px;
  --lh-52: 52px;
  --lh-50: 50px;
  --lh-42: 42px;
  --lh-41: 41px;
  --lh-40: 40px;
  --lh-38: 38px;
  --lh-36: 36px;
  --lh-34: 34px;
  --lh-32: 32px;
  --lh-30: 30px;
  --lh-28: 28px;
  --lh-27: 27px;
  --lh-26: 26px;
  --lh-24: 24px;
  --lh-23: 23px;
  --lh-22: 22px;
  --lh-20: 20px;
  --lh-19: 19px;
  --lh-18: 18px;
  --lh-17: 17px;
  --lh-16: 16px;
  --lh-15: 15px;
  --lh-14: 14px;
  --lh-13: 13px;
}
*{caret-color: var(--color-green1);}
button{margin: 0;padding: 0;border: 0;cursor: pointer;background-color: unset;overflow: visible;}
input:focus-visible{outline: 0;}
textarea:focus-visible{outline: 0;}

.lazyload,
.lazyloading{opacity: 0;}
.lazyloaded{opacity: 1;transition: opacity .4s;}

.displaynone{display: none !important;}

.sound_only{display:inline-block !important;position:absolute !important;top:0 !important;left:0 !important;width:0 !important;height:0 !important;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important;}


.frm_wrap{}
.frm_wrap .frm_box{}
.frm_wrap .frm_box.type_normal{}
.frm_wrap .frm_box.type_normal + .frm_box.type_normal{margin-top: 32px;}
.frm_wrap .frm_box.type_flex{display: flex;align-items: center;flex-wrap: nowrap;}

.frm_wrap .frm_lab_box{}
.frm_wrap .frm_lab_box .frm_lab,
.frm_wrap .frm_lab_box label{font-size: var(--fs-14);font-weight: 700;line-height: var(--lh-20);color: var(--color-black);}
.frm_wrap .frm_lab_box .label_name{display: inline-block;font-size: var(--fs-14);font-weight: 700;line-height: var(--lh-20);color: var(--color-black);}

.frm_wrap .frm_lab_box .frm_lab.frm_required{display: inline-flex;align-items: center;flex-wrap: nowrap;column-gap: 2px;}
.frm_wrap .frm_lab_box .frm_lab.frm_required .label_required{display: inline-block;font-size: var(--fs-14);font-weight: 700;line-height: var(--lh-20);color: var(--color-green2);}

.frm_wrap .frm_inp_box{}
.frm_wrap .frm_box.type_normal .frm_lab_box + .frm_inp_box{margin-top: 4px;}
.frm_wrap .frm_inp_box.type_flex{display: flex;}

.frm_wrap .frm_inp_box .frm_inp,
.frm_wrap .frm_inp_box input[type="text"],
.frm_wrap .frm_inp_box input[type="password"],
.frm_wrap .frm_inp_box input[type="number"]{width: 100%;padding: 7px 0 6px;font-size: var(--fs-16);font-weight: 400;line-height: var(--lh-26);color: var(--color-black);border: 0;border-bottom: 1px solid var(--color-black);background-color: var(--color-white);box-sizing: border-box;}

.frm_wrap .frm_inp_box .frm_inp::placeholder,
.frm_wrap .frm_inp_box input[type="text"]::placeholder,
.frm_wrap .frm_inp_box input[type="password"]::placeholder,
.frm_wrap .frm_inp_box input[type="number"]::placeholder{font-weight: 300;color: var(--color-gray2);}

.frm_wrap .frm_inp_box .frm_inp.required,
.frm_wrap .frm_inp_box input[type="text"].required,
.frm_wrap .frm_inp_box input[type="password"].required,
.frm_wrap .frm_inp_box input[type="number"].required{background-image: none !important;}

.frm_wrap .frm_inp_box .frm_inp:focus,
.frm_wrap .frm_inp_box input[type="text"]:focus,
.frm_wrap .frm_inp_box input[type="password"]:focus,
.frm_wrap .frm_inp_box input[type="number"]:focus{box-shadow: none !important;border: 0 !important;border-bottom: 1px solid var(--color-black) !important;}

.frm_wrap .frm_inp_box .frm_inp:read-only,
.frm_wrap .frm_inp_box input[type="text"]:read-only,
.frm_wrap .frm_inp_box input[type="password"]:read-only,
.frm_wrap .frm_inp_box input[type="number"]:read-only{background-color: var(--color-gray4);}

.frm_wrap .frm_inp_box .frm_inp:read-only::placeholder,
.frm_wrap .frm_inp_box input[type="text"]:read-only::placeholder,
.frm_wrap .frm_inp_box input[type="password"]:read-only::placeholder,
.frm_wrap .frm_inp_box input[type="number"]:read-only::placeholder{}
