@charset "utf-8";
@import url('layout.css');

/* Happiness Sans */
@font-face {
    font-family: 'Happiness-Sans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/Happiness-Sans-Bold.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap');


/***************************************************************************/
/*                                         body 공통 설정                                          /
/***************************************************************************/

html,body {width: 100%;height: 100%;}
body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {margin: 0;padding: 0;}
ul,ol,dl {list-style: none;}
img {border:0;vertical-align: top;}
fieldset {border: none;}
ul {list-style: none;padding: 0;margin: 0;}
fieldset{border: none;}
li{list-style: none;}
input,select,button,select{vertical-align: middle;}
h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal;}
address,caption,cite,code,dfn,em,th,var{font-style: normal;font-weight: normal;}
a {outline: 0;}
a:focus {color: #5c5c5c;}
a:link {text-decoration: none;}
a:active {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
table {width: 100%;border-spacing: 0}/* border-collapse: collapse; ff에서 border="0" 인 경우 문제 발생 */
table {table-layout: fixed;border-collapse: collapse;word-break: break-all;}
* {box-sizing: border-box;}

button,
input[type="submit"],
input[type="button"] {overflow: visible;margin: 0;background-color: transparent;border: none;-webkit-appearance: button;cursor: pointer;font: inherit;color: inherit;}
button::-moz-focus-inner,
input::-moz-focus-inner {padding: 0;border: 0;}
button {outline: 0;}
textarea {resize: none;}

html {-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;}

/* 기본설정 */
body {font: 16px 'Happiness-Sans-Bold', 'Sans-serif';line-height: 1.6;color: #fff;letter-spacing: -1px;font-weight:400;}
select,input,textarea,button {font: 15px 'Happiness-Sans-Bold', 'Sans-serif';color: #333;letter-spacing: -0.5px;}
.hide,legend,caption {position: absolute;left: -9999px;width: 0;height: 0;overflow: hidden;text-indent: -9999px;}
.mobi { display: none;}
@media (max-width: 767px) {
  .mobi {display: block;}
}

/* 기타 */
.ls0 {letter-spacing:0 !important;}
.ls05 {letter-spacing:-0.5px !important;}
.cg {color:#00a77c;}
.cdr {color:#bc4c00;}
.cdb {color:#435883;}

.bg-white { background-color: #fff}
.bg-black { background-color: #000 !important}
.bg-ef {background-color: #efefef}
.bg-f2 {background-color: #f2f2f2}
.bg-B3BCD1{background-color: #B3BCD1}
.bg-848ea9 {background-color: #848ea9}
.bg-464D60 {background-color: #464D60}
.bg-02bf44 {background-color: #02bf44}
.bg-5189fa {background-color: #5189fa}
.bg-00beea {background-color: #00beea}
.bg-ff0000{background-color: #ff0000}
.bg-faf9f8{background-color: #faf9f8}
.bg-faa619{background-color: #faa619}
.bg-ff4c58{background-color: #ff4c58}
.bg-151515{background-color: #151515}
.bg-ea404c{background-color: #ea404c}
.bg-fee600{background-color: #fee600 !important}
.bg-transparent{background-color:transparent}
.fw-100 {font-weight: 100; }
.fw-300 {font-weight: 300; }
.fw-500 {font-weight: 500; }
.fw-700 {font-weight: 700; }
.fs-12{font-size: 12px !important;}
.fs-13{font-size: 13px !important;}
.fs-14{font-size: 14px !important;}
.fs-15{font-size: 15px !important;}
.fs-16{font-size: 16px !important;}
.fs-17{font-size: 17px !important;}
.fs-18{font-size: 18px !important;}
.fs-19{font-size: 19px !important;}
.fs-22{font-size: 22px !important;}
.fs-23{font-size: 23px !important;}

.fs2316{font-size: 23px !important;}
@media (max-width: 767px) {
  .fs-2316 {font-size: 16px !important;}
}

.fs-26{font-size: 26px !important;}
.fs-34{font-size: 34px !important;}
.fs-36{font-size: 36px !important;}
.fs-48{font-size: 48px !important;}
.fs-4826{font-size: 48px !important;}
@media (max-width: 767px) {
  .fs-4826 {font-size: 26px !important;}
}

.fs-4830{font-size: 48px !important;}
@media (max-width: 767px) {
  .fs-4830 {font-size: 30px !important;}
}

.fs-4832{font-size: 48px !important;}
@media (max-width: 767px) {
  .fs-4832 {font-size: 32px !important;}
}

.fs-4836{font-size: 48px !important;}
@media (max-width: 767px) {
  .fs-4836 {font-size: 36px !important;}
}

.fs-2636{font-size: 26px !important;}
@media (max-width: 767px) {
  .fs-2636 {font-size: 36px !important;}
}

.fs-2632{font-size: 26px !important;}
@media (max-width: 767px) {
  .fs-2632 {font-size: 32px !important;}
}

.fs-3430{font-size: 34px !important;}
@media (max-width: 767px) {
  .fs-3430 {font-size: 30px !important;}
}

.fs-3432{font-size: 34px !important;}
@media (max-width: 767px) {
  .fs-3432 {font-size: 32px !important;}
}

.fs-3626{font-size: 36px !important;}
@media (max-width: 767px) {
  .fs-3626 {font-size: 26px !important;}
}

.fs-64{font-size: 64px !important;}

.fs-6432{font-size: 64px !important;}
@media (max-width: 767px) {
  .fs-6432 {font-size: 32px !important;}
}

.fs-6434{font-size: 64px !important;}
@media (max-width: 767px) {
  .fs-6434 {font-size: 34px !important;}
}

.fs-6436{font-size: 64px !important;}
@media (max-width: 767px) {
  .fs-6436 {font-size: 36px !important;}
}

.fs-6445{font-size: 64px !important;}
@media (max-width: 767px) {
  .fs-6445 {font-size: 45px !important;}
}

.fs-74{font-size: 74px !important;}
.fs-84{font-size: 84px !important;}

.fs-1620{font-size: 16px !important;}
@media (max-width: 767px) {
  .fs-1620 {font-size: 20px !important;}
}

.fs-8430{font-size: 84px !important;}
@media (max-width: 767px) {
  .fs-8430 {font-size: 30px !important;}
}

.fs-8432{font-size: 84px !important;}
@media (max-width: 767px) {
  .fs-8432 {font-size: 32px !important;}
}

.fs-8436{font-size: 84px !important;}
@media (max-width: 767px) {
  .fs-8436 {font-size: 36px !important;}
}

.fs-8442{font-size: 84px !important;}
@media (max-width: 767px) {
  .fs-8442 {font-size: 42px !important;}
}

.fs-8448{font-size: 84px !important;}
@media (max-width: 767px) {
  .fs-8448 {font-size: 48px !important;}
}


.fc-gray888{color: #888}
.fc-ff0000{color: #ff0000}
.fc-fff{color: #fff}
.fc-faa619{color: #faa619}
.fc-ff4a4a{color: #ff4a4a}
.fc-fff837{color: #fff837}
.fc-d7d7d7{color: #d7d7d7}
.fc-8795ff{color: #8795ff}
.fc-82f0ff{color: #82f0ff}
.fc-red { color: #ff0000}
.fc-red-middle { color: #ff3d3d !important}
.fc-gray { color: #5B5B62}
.fc-gary-high { color: #41485c}
.fc-gary-middle { color: #7a849f}
.fc-gary-low { color: #afb8cc}
.fc-black { color: #000 !important}
.fc-green { color: #04b943}
.fc-mint { color: #02c19d}
.fc-blue { color: #4881f2}
.fc-skyblue { color: #02b5de}
.fc-c4c4c4 { color: #c4c4c4}
.fc-151515 { color: #151515}


.ls-1 { letter-spacing: 1px}
.h-auto {height: auto !important;}
.w-100 {width: 100% !important}
@media (max-width: 767px) {
  .w-m100 {width: 100% !important}
}
@media (max-width: 767px) {
  .h-m100 {height: 100% !important}
}
.w-70 {width: 70% !important}
.w-50 {width: 50% !important}
.w-40 {width: 40% !important}
.w-16 {width: 16% !important}
.w-10 {width: 10% !important}
.w-20 {width: 20% !important}
.w-5 {width: 5% !important}
.w-90x {width: 90px !important}
.w-mc {width: max-content !important}
.w-50100 {width: 50% !important}
@media (max-width: 767px) {
  .w-50100 {width: 100% !important}
}
.w-60100 {width: 60% !important}
@media (max-width: 767px) {
  .w-60100 {width: 100% !important}
}
.w-70100 {width: 70% !important}
@media (max-width: 767px) {
  .w-70100 {width: 100% !important}
}
.w-80100 {width: 80% !important}
@media (max-width: 767px) {
  .w-80100 {width: 100% !important}
}
.w-90100 {width: 90% !important}
@media (max-width: 767px) {
  .w-90100 {width: 100% !important}
}
.w-30100 {width: 30% !important}
@media (max-width: 767px) {
  .w-30100 {width: 100% !important}
}
.w-33100 {width: 33.3% !important}
@media (max-width: 767px) {
  .w-33100 {width: 100% !important}
}
.w-40100 {width: 40% !important}
@media (max-width: 767px) {
  .w-40100 {width: 100% !important}
}
.w-mw100 {width: max-content !important}
@media (max-width: 767px) {
  .w-mw100 {width: 100% !important}
}
.w-30 {width: 30% !important}
.w-2530 {width: 25% !important}
@media (max-width: 767px) {
  .w-2530 {width: 30% !important}
}
.w-7570 {width:75% !important}
@media (max-width: 767px) {
  .w-7570 {width: 70% !important}
}
.w-1335 {width: 13% !important}
@media (max-width: 767px) {
  .w-1335 {width: 35% !important}
}
.w-8765 {width: 87% !important}
@media (max-width: 767px) {
  .w-8765 {width: 65% !important}
}
.w-5065 {width: 50% !important}
@media (max-width: 767px) {
  .w-5065 {width: 65% !important}
}
.mh-100 {min-height: 100vh}
.h-150 {height: 150px !important}
.h-40 {height: 40px !important}
.h-50 {height: 50px !important}
.h-90 {height: 90px !important}
.h-100 {height: 100px !important}
.h-200 {height: 200px !important}
.h-300 {height: 300px !important}
.w-a {width: auto !important}
.dp-block{display: block !important;}
.dp-inblock{display: inline-block !important;}
.dp-none {display: none;}
.dp-content {display: contents;}
.dp-flex {display: flex;}
.ps-relative {position: relative;}
.ps-absolute {position: absolute;}
.fl-1-1-a { flex:unset;width: unset}
@media (max-width: 767px) {
  .fl-1-1-a { flex:1 1 auto;width: 1% !important}
}
.fl-1-1-b { flex:1 1 auto;width: 1% !important}
.content { padding: 15px}
.ofl{ overflow: hidden; }
.mg-center { margin: 0 auto;}

.bordra-5{border-radius: 5px;}
.bordra-10{border-radius: 10px;}
.bordra-20{border-radius: 20px;}
.bordra-30{border-radius: 30px;}
.bord-0{ border:  0 !important;}
.bord-1{ border: 1px solid #e2e2e2;}
.bord-3-4b77ce { border: 3px solid #4b77ce !important;}
.bordt-1{ border-top: 1px solid #000 !important;}
.bordb-1{ border-bottom:  1px solid #e2e2e2 !important;}
.bordb-2-000{ border-bottom:  2px solid #000 !important;}
.bordr-0{ border-right:  0 !important;}
.bordl-0{ border-left:  0 !important;}
.bordl-1{ border-right: 1px solid #e2e2e2 !important;}
.bordr-1{ border-left: 1px solid #e2e2e2 !important;}


.bs446 {box-shadow: 4px 4px 6px #f1f1f1;}
.bs066 {box-shadow: 4px 4px 4px 4px #f4f4f4;}
.ls-disc { list-style: disc; }
.lh-40 {line-height: 40px}
.lh-35 {line-height: 35px}
.fl-left{float: left;}
.fl-right{float: right;}
.m-reverse {display: block}
@media (max-width: 767px) {
  .m-reverse { display: flex; flex-direction: column-reverse;}
}
.m-block {display: inline-block}
@media (max-width: 767px) {
  .m-block { display: block; }
}

.pc-block {display: block}
@media (max-width: 767px) {
  .pc-block { display: none; }
}

.mo-block {display: none}
@media (max-width: 767px) {
  .mo-block { display: block; }
}

.cs-pointer {cursor: pointer;}
.txt-center {text-align: center !important;}
.txt-left {text-align: start !important;}
.txt-right {text-align: end !important;}
.txt-underline { text-decoration: underline;}
.m-txt-rightcenter{text-align: end !important;}
@media (max-width: 767px) {
  .m-txt-rightcenter { text-align: center !important; }
}
.mgl-0{margin-left: 0px !important}
.mgl-3{margin-left: 3px !important}
.mgl-5{margin-left: 5px !important}
.mgl-10{margin-left: 10px !important}
.mgl-20{margin-left: 20px !important}
.mgl-30{margin-left: 30px !important}
.mgl-50{margin-left: 50px !important}

.mgl_25 {margin-left: -25px !important}

.mgr-3{margin-right: 3px !important}
.mgr-10{margin-right: 10px !important}
.mgr-15{margin-right: 15px !important}
.mgr-20{margin-right: 20px !important}

.mgx-5{margin: 0 5px !important}
.mgx-10{margin: 0 10px !important}
.mgx-15{margin: 0 15px !important}

.mgl_5 {margin-left: -5px !important}
.mgr_5{margin-right: -5px !important}

.mgz-5{margin: 5px 0 !important}
.mgz-10{margin: 10px 0 !important}
.mgz-20{margin: 20px 0 !important}
.mgb-0{margin-bottom: 0px !important}
.mgb-10{margin-bottom: 10px !important}
.mgb-20{margin-bottom: 20px !important}
.mgb-30{margin-bottom: 30px !important}
.mgb-50{margin-bottom: 50px !important}
.mgb_10{margin-bottom: -10px !important}
.mgt-10{margin-top: 10px !important}
.mgt-12{margin-top: 12px !important}
.mgt-14{margin-top: 14px !important}
.mgt-30{margin-top: 30px !important}
.mgt-40{margin-top: 40px !important}
.mgt-50{margin-top: 50px !important}
.mgt-100{margin-top: 100px !important}
.mgt_10{margin-top: -10px !important}
.mgt_15{margin-top: -15px !important}
.mg-50{margin: 50px 50px !important}

.pd-0{padding: 0px !important}
.pd-3{padding: 3px !important}
.pd-5{padding: 5px !important}
.pd-10{padding: 10px !important}
.pd-15{padding: 15px !important}
.pd-20{padding: 20px !important}
.pd-30{padding: 30px !important}
.pd-30_10{padding: 30px !important}
@media (max-width: 767px) {
  .pd-30_10 {padding: 10px !important}
}
.pd-40{padding: 40px !important}
.pd-50{padding: 50px !important}
.pd_20{padding: -20px !important}

.pdl-0{padding-left: 0 !important}
.pdl-3{padding-left: 3px !important}
.pdl-5{padding-left: 5px !important}
.pdl-10{padding-left: 10px !important}
.pdl-25{padding-left: 25px !important}
.pdl-50{padding-left: 50px !important}
.pdl-100{padding-left: 10px !important}
@media (max-width: 767px) {
  .pdl-100 {padding-left: 0 !important}
}
.pdl-20{padding-left: 20px !important}
.pdl-30{padding-left: 30px !important}
.pdl-50{padding-left: 50px !important}
.pdl-130{padding-left: 13% !important}
@media (max-width: 767px) {
  .pdl-130 {padding-left: 0% !important}
}
.pdl-50_0{padding-left: 50px !important}
@media (max-width: 767px) {
  .pdl-50_0 {padding-left: 0% !important}
}
.pdl-50_10{padding-left: 50px !important}
@media (max-width: 767px) {
  .pdl-50_10 {padding-left: 10px !important}
}

.pdr-0{padding-right: 0 !important}
.pdr-3{padding-right: 3px !important}
.pdr-5{padding-right: 5px !important}
.pdr-10{padding-right: 10px !important}
.pdr-30{padding-right: 30px !important}
.pdr-50{padding-right: 50px !important}

.pdt-0{padding-top: 0px !important}
.pdt-5{padding-top: 5px !important}
.pdt-10{padding-top: 10px !important}
.pdt-15{padding-top: 15px !important}
.pdt-20{padding-top: 20px !important}
.pdt-30{padding-top: 30px !important}
.pdt-50{padding-top: 50px !important}
.pdt-80{padding-top: 80px !important}

.pdb-5{padding-bottom: 5px !important}
.pdb-10{padding-bottom: 10px !important}
.pdb-15{padding-bottom: 15px !important}
.pdb-20{padding-bottom: 20px !important}
.pdb-30{padding-bottom: 30px !important}
.pdb-40{padding-bottom: 40px !important}
.pdb-50{padding-bottom: 50px !important}

.pdx-5{padding: 0px 5px !important}
.pdx-10{padding: 0px 10px !important}
.pdx-15{padding: 0px 15px !important}
.pdz-5{padding: 5px 0px !important}
.pdz-8{padding: 8px 0px !important}
.pdz-10{padding: 10px 0px !important}
.pdz-15{padding: 15px 0px !important}
.pdz-20{padding: 20px 0px !important}
.pdz-30{padding: 30px 0px !important}
.pdz-40{padding: 40px 0px !important}
.pdz-50{padding: 50px 0px !important}
.pd5-12{padding: 5px 12px !important;}
.pd7-12{padding: 7px 12px !important;}
.pd8-10{padding: 8px 10px !important;}
.pd8-12{padding: 8px 12px !important;}
.pd8-15{padding: 8px 15px !important;}
.pd10-12{padding: 10px 12px !important;}
.pd10-25{padding: 10px 25px !important;}
.pd15-40{padding: 15px 40px !important;}
.pd20-30{padding: 20px 30px !important;}
.pd20-40{padding: 20px 40px !important;}
.pd20-50{padding: 20px 50px !important;}
.pd30-20{padding: 30px 20px !important;}
.pd30-40{padding: 30px 40px !important;}
.pd30-50{padding: 30px 50px !important;}
.pd40-30{padding: 40px 30px !important;}