:root{
    --black-color:rgba(25,25,25);
    --black2-color:rgba(8,8,8);
    --darkGray-color:rgba(100,100,100);
    --darkGray2-color:rgba(57,57,57);
    --gray-color:rgba(113,113,113);
    --gray2-color:rgba(74,74,74);
    --gray3-color:rgba(195,193,193);
    --gray4-color:rgba(153,153,153);
    --white-color:rgba(255,255,255);
    --lightgray-color:rgba(219,219,219);
    --lightgray2-color:rgba(245,245,245);
    --lightgray3-color:rgba(239,239,239);
    --lightblue-color:rgba(222,242,255);
    --skyblue-color:rgba(83,168,226);
    --blue-color:rgba(50,116,241);
    --cherryRed-color:rgba(255,90,74);

    --fontWeight-black:800;
    --fontWeight-bold:600;
    --fontWeight-medium:500;
    --fontWeight-normal:400;
    --fontWeight-thin:300;
}
/*** LAYOUT ***/
/* INPUT */
/* BUTTON */
/*** MAIN ***/
/*** SUB ***/
/* TAB */
/* TITLE */
/* 게시판 */


/*** LAYOUT ***/
.pcView{ display:block; }
.mView{ display:none; }
.flex{ display: flex; }
.align-start{ align-items:flex-start !important; }
.align-center{ align-items:center !important; }
.align-end{ align-items:flex-end !important; }
.justify-start{ justify-content:flex-start !important; }
.justify-center{ justify-content:center !important;}
.justify-around{ justify-content:space-around !important;}
.justify-between{ justify-content:space-between !important;}
.justify-end{ justify-content:flex-end !important;}
.flex-wrap{ flex-wrap:wrap }
.gap0{ gap:0px !important; }
.gap5{ gap:5px !important; }
.gap8{ gap:8px !important; }
.gap10{ gap:10px !important; }
.gap20{ gap:20px !important; }

.wp100{ width:100% !important; }
.wp95{ width:95% !important; }
.wp90{ width:90% !important; }
.wp86{ width:86% !important; }
.wp80{ width:80% !important; }
.wp70{ width:70% !important; }
.wp50{ width:50% !important; }
.wp49{ width:49% !important; }
.wp45{ width:45% !important; }
.wp40{ width:40% !important; }
.wp39{ width:39% !important; }
.wp33{ width:33% !important; }
.wp32{ width:32% !important; }
.wp30{ width:30% !important; }
.wp25{ width:25% !important; }
.wp24{ width:24% !important; }
.wp20{ width:20% !important; }
.wp15{ width:15% !important; }
.wp10{ width:10% !important; }
.wp0{ width:0% !important; }

.w60{ width:60px !important; }
.w70{ width:70px !important; }
.w80{ width:80px !important; }
.w100{ width:100px !important; }
.w110{ width:110px !important; }
.w120{ width:120px !important; }
.w160{ width:160px !important; }
.w170{ width:170px !important; }
.w194{ width:194px !important; }
.w200{ width:200px !important; }
.w220{ width:220px !important; }
.w240{ width:240px !important; }
.w250{ width:250px !important; }
.w290{ width:290px !important; }
.w300{ width:300px !important; }
.w310{ width:310px !important; }
.w370{ width:370px !important; }
.w400{ width:400px !important; }
.w480{ width:480px !important; }
.w560{ width:560px !important; }
.w580{ width:580px !important; }

.ht40{ height:40px; }
.hp100{ height:100% !important; }

.m0{ margin:0 !important; }
.m2{ margin:0 2px !important; }
.m5{ margin:0 5px !important; }

.mb0{ margin-bottom: 0 !important; }
.mb2{ margin-bottom: 2px !important; }
.mb10{ margin-bottom: 10px !important; }
.mb16{ margin-bottom: 16px !important; }
.mb20{ margin-bottom: 20px !important; }
.mb40{ margin-bottom: 40px !important; }

.ml0{ margin-left: 0 !important; }
.ml10{ margin-left: 10px !important; }
.ml30{ margin-left: 30px !important; }

.mr0{ margin-right: 0 !important; }
.mr4{ margin-right: 4px !important; }
.mr6{ margin-right: 6px !important; }
.mr10{ margin-right: 10px !important; }

.mt0{ margin-top: 0 !important; }
.mt2{ margin-top: 2px !important; }
.mt4{ margin-top: 4px !important; }
.mt7{ margin-top: 7px !important; }
.mt10{ margin-top: 10px !important; }
.mt20{ margin-top: 20px !important; }
.mt25{ margin-top: 25px !important; }
.mt30{ margin-top: 30px !important; }
.mt40{ margin-top: 40px !important; }
.mt50{ margin-top: 50px !important; }
.mt60{ margin-top: 60px !important; }
.mt70{ margin-top: 70px !important; }
.mt80{ margin-top: 80px !important; }
.mt90{ margin-top: 90px !important; }
.mt100{ margin-top: 100px !important; }
.mt5p{ margin-top: 5% }


.pd0{ padding:0px !important }
.pd5{ padding:5px !important }
.pd10{ padding:10px !important }
.pd16{ padding:16px !important }
.pd20{ padding:20px !important }
.pdL10{ padding-left:10px !important }
.pdL20{ padding-left:20px !important }
.pdL33{ padding-left:33px !important }

.pt5{ padding-top:5px !important }
.pt10{ padding-top:10px !important }

.pb5{ padding-bottom:5px !important }
.pb10{ padding-bottom:10px !important }
.pb30{ padding-bottom:30px !important }

.pl10{ padding-left:10px !important }

.pr10{ padding-right:10px !important }

.hAuto{ height:auto !important; min-height:auto !important; }
.h30{ height:30px }
.h35{ height:35px }
.h37{ height:37px }
.h36 { height:36px !important; }
.h40{ height:40px }
.h48{ height:48px !important}
.h36{ height: 36px }

.hp100{ height:100%; }

.taL{ text-align: left }
.taR{ text-align: right }
.taC{ text-align: center }
.white-nowrap{ white-space:nowrap; }

.v-mid{ vertical-align:middle }
.c_skyblue{ color:var(--skyblue-color) !important; }
.c_gray{ color:#888888 !important; }
.c_red{ color:#ff6035 !important; }
.c_navy{ color:#0f4c81 !important; }

.cPointer{ cursor: pointer; }

.bg_white{ background:#fff !important; }

.fs14{ font-size:1.4rem !important; }
.fsp12{ font-size:12px !important; }
.fsp14{ font-size:14px !important; }
.fsp16{ font-size:16px !important; }
.fsp11{ font-size:11px !important; }
.tac { text-align:center; }

.fw100{ font-weight:100 !important; }
.fw200{ font-weight:200 !important; }
.fw300{ font-weight:300 !important; }
.fw400{ font-weight:400 !important; }

.fc-primary { color: var(--skyblue-color) !important; }
.fc-gray { color: #717171; !important; }
.fc-gray2 { color: var(--gray2-color) !important; }
.fc-lgray { color: var(--gray4-color) !important; }

.grayBar{
    width:100%;
    height:8px;
    background: var(--lightgray2-color);
}
.bdTop{
    border-top:1px solid var(--lightgray-color);
}
.bdBottom{
    border-bottom:1px solid var(--lightgray-color);
}
.bdBottom2{
    border-bottom:1px solid rgb(241,241,245)
}

/* INPUT */
.inputBlock{}
.inputBlock--tit{
    font-size:14px;
    font-weight: var(--fontWeight-medium);
    color:var(--black-color);
    letter-spacing: -0.35px;
}
.inputBlock--cnt{ width:100%; position: relative;}
.inputBlock--cnt.borderBottom{
    border-bottom:1px solid var(--lightgray-color);
}
.inputBlock--cnt.tag::before{
    content: '#';
    position: absolute;
    left:2px;
    font-size:16px;
    font-weight: var(--fontWeight-normal);
    color:var(--black-color);
}
.inputBlock--cnt.tag .inputBlock--input{
    text-indent: 12px;
}
.inputBlock--cnt--priceTotal{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width:calc(80% - 10px);
}
.inputBlock--cnt--priceTotal h4{
    font-size:14px;
    font-weight: var(--fontWeight-medium);
    color:var(--black2-color);
    letter-spacing: -0.35px;
}
.inputBlock--cnt--bar{
    width:10px;
    height:1px;
    background: var(--lightgray-color);
}
.inputBlock--input::placeholder{
    font-size:14px;
    font-weight: var(--fontWeight-thin);
    color:#999999;
}
.inputBlock--input{
    font-size:16px;
    border-bottom: 1px solid var(--lightgray-color);
    font-weight: var(--fontWeight-normal);
    color:var(--black-color);
    padding-bottom: 8px;
    line-height: 1.5;
    box-sizing: border-box;
}
.inputBlock--input02{
    border: 1px solid var(--lightgray-color);
    box-sizing: border-box;
    padding: 0;
    height:40px;
    text-align: center;
    border-radius:5px !important;
}
.inputBlock--input.on{ border-bottom: 1px solid var(--black-color); }
.inputBlock--input02.on{ border: 1px solid var(--black-color); }
.uploadForm{display: none}
.uploadForm + label{}
.uploadForm + label .uploadForm--before{
    width:100%;
    height:40px;
    border:1px solid rgb(211, 211, 211);
    border-radius: 5px !important;
    box-sizing: border-box;
    font-size:15px;
    font-weight: var(--fontWeight-medium);
    color:var(--gray2-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.uploadForm + label .uploadForm--after{
    width:100%;
    height:40px;
    border:1px solid rgb(211, 211, 211);
    border-radius: 5px !important;
    padding:8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap:8px;
}
.uploadForm + label .uploadForm--after p{
    font-size:15px;
    font-weight: var(--fontWeight-medium);
    color:var(--gray2-color);
}
.uploadForm + label .uploadForm--after img{
    width:24px;
}
.inputBlock--input--priceTotal{
    width:calc(100% - 5px);
    text-align: right;
    font-size:18px;
    color:var(--skyblue-color);
    padding-bottom: 2px;
}
.inputBlock--input--priceTotal::placeholder{
    font-size:18px;
    color:var(--skyblue-color);
}
.inputBlock--btn{
    position: absolute;
    right:0;
    bottom:8px;
    width:24px;
    height:24px;
}
.inputBlock--btn .eye-off{ display: block }
.inputBlock--btn .eye-on{ display: none; }
.inputBlock--btn.on .eye-off{ display: none }
.inputBlock--btn.on .eye-on{ display: block; }
.inputBlock--btn02{
    width:20px;
    height:20px;
    display: none;
}
.inputBlock--btn03{
    position: absolute;
    right:0;
    bottom:8px;
}
.searchWrap .inputBlock--btn02{ right:10px; }
.inputBlock--btn02.on{ display: block; }
.inputBlock--btn img{ width:100%; }
.inputBlock--msg{
    position: absolute;
    right:0;
    bottom:8px;
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    color:var(--cherryRed-color);
}
.inputBlock--cnt--msg{
    position: absolute;
    bottom:-25px;
    left:0;
    font-size:12px;
    font-weight: var(--fontWeight-normal);
    color:var(--cherryRed-color);
    word-break: break-all;
}
.inputBlock--cnt--msg.skyBlue{
    color:var(--skyblue-color);
}
.inputBlock--cnt--msg01{
    bottom: -45px;
}
.inputBlock--cnt--msg02{
    position: relative;
    bottom:initial;
}
.inputRound{
    background:rgb(242, 243, 248);
    color:var(--darkGray-color);
    border-radius: 20px !important;
    padding: 8px 20px;
    height: 36px;
    font-size: 14px;
    font-weight: 400;
    line-height:1.4 ;
}
.inputRound::placeholder{ color:#adadad;}
.inputRound.search--input{
    position: relative;
}

.relative{
  position: relative;
}

.search-button {
  width: 16px;
  height: 16px;
  position: absolute;
  background-image:url('/assets/images/icon/ic-inputSearch-skyblue-c7af4ce9f43f474a8ff2f4e30f9c7c1a.png');
  background-repeat:no-repeat;
  right: 20px;
  top: -2px;
  transform: translateY(50%);
}

.selectTab{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.selectTab::after{
    content: '';
    width:1px;
    height:16px;
    background:rgb(195,193,193);
    display: block;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}
.selectTab--item{
    width:50%;
}
.selectTab--button--label{
    font-size:14px;
    line-height: 20px;
    font-weight: 500;
    color:var(--black-color);
    letter-spacing: -0.35px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:10px 0;
    gap:6px;
    width:100%;
    cursor: pointer;
}
.selectTab--button--label img{
    width:24px; transition-duration: 0.5s;
}
.selectTab--option{
    position: absolute;
    left:0;
    top:45px;
    width:100%;
    background:#ffffff;
    border-top: 1px solid rgb(195,193,193);
    border-bottom: 1px solid rgb(195,193,193);
    display: none;
    max-height:260px;
    overflow-y: scroll;
}
.selectTab--option::-webkit-scrollbar{ height:90%; }
/*.selectTab--item.active .selectTab--option{ display: block; }*/
.selectTab--button--label.active img{ transform: rotate(180deg) }
.selectTab--option--button{
    width:100%;
    font-size:14px;
    font-weight: 400;
    color:rgb(100,100,100);
    letter-spacing: -0.35px;
    line-height: 1.4;
    padding:12px 0;
    vertical-align: baseline;
}
.selectTab--option--button.on{
    font-weight: 600;
    color:var(--skyblue-color);
}
.selector--name{
    font-size:16px;
    font-weight: var(--fontWeight-medium);
    color:var(--gray2-color);
    line-height: 1.2;
}
.selecType1{
    background-image:url('/assets/images/icon/ic-selector-29b1bd9d37ffc4bb93a4d1296244cbf2.png');
    background-repeat:no-repeat;
    background-size: 24px;
    background-position:right 0;
    padding-right:35px;
    font-size:15px;
    font-weight: var(--fontWeight-medium);
    color:var(--black-color);
}
.selecType2{
    background-image:url('/assets/images/icon/ic-selector-29b1bd9d37ffc4bb93a4d1296244cbf2.png');
    background-repeat:no-repeat;
    background-size: 18px;
    background-position:right 5px top 7px;
    padding-top:2px;
    padding-bottom:2px;
    padding-left:10px;
    padding-right:40px;
    font-size:14px;
    font-weight: var(--fontWeight-medium);
    color:var(--black-color);
    border:1px solid var(--lightgray-color);
    border-radius: 5px;
    height:36px;
}
.chkType01{ display: none; }
.chkType01 + label {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap:10px;
}
.chkType01 + label .chkType01--icon{
    display: block;
    width:20px;
    height:20px;
    position: relative;
    border-radius: 50%;
    border:2px solid var(--gray3-color);
    margin-left: 1px;
}
.chkType01.big + label .chkType01--icon{
    width:24px; height:24px; margin-left: 0px;
}
.chkType01:checked + label .chkType01--icon{
    border:2px solid var(--skyblue-color);
    background:var(--skyblue-color);
}
.chkType01 + label .chkType01--icon::before, .chkType01 + label .chkType01--icon::after{
    content: '';
    display: block;
    background:var(--gray3-color);
    height:2px;
    position: absolute;
    top:50%;
}
.chkType01:checked + label .chkType01--icon::before, .chkType01:checked + label .chkType01--icon::after{
    background:var(--white-color);
}
.chkType01 + label .chkType01--icon::before{
    width:4px;
    transform: rotate(45deg) translateY(-30%);
    left:3px;
}
.chkType01.big + label .chkType01--icon::before{ width:6px; }
.chkType01 + label .chkType01--icon::after{
    width:8px;
    transform: rotate(-45deg) translateY(-50%);
    right:2px;
}
.chkType01.big + label .chkType01--icon::after{ width:10px; }
.chkType01--txt{
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    color:var(--gray3-color);
    word-break: break-all;
    width:calc(100% - 30px);
}
.chkType01:checked + label .chkType01--txt{ color:var(--black2-color) }
.chkType01--txt.big{
    font-size: 18px; font-weight: var(--fontWeight-medium);
}
.chkType02{ display: none; }
.chkType02 + label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap:12px;
    font-size: 14px;
}
.chkType02 + label .chkType02--icon{
    border:2px solid var(--gray3-color);
    width:22px;
    height:22px;
    box-sizing: border-box;
    border-radius: 50%;
    display: block;
}
.chkType02:checked + label .chkType02--icon{
    border:6px solid var(--skyblue-color);
    width:22px;
    height:22px;
    box-sizing: border-box;
    border-radius: 50%;
}

/* BUTTON */
.btnType{
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    cursor: pointer;
}
.btnType0{
    height:55px;
    border-radius: 10px;
    font-size:16px;
    font-weight: var(--fontWeight-medium);
}
.btnType1{
    height:32px;
    border-radius: 5px;
    font-size:12px;
    font-weight: var(--fontWeight-medium);
}
.btnType2{
    height:36px;
    border-radius: 5px;
    font-size:14px;
    font-weight: var(--fontWeight-medium);
}
.btnType3{
    height:30px;
    border-radius: 5px;
    font-size:14px;
    font-weight: var(--fontWeight-medium);
    border:1px solid var(--black-color);
    color:var(--black-color);
}
.btnType3.skyBlue{ border:none; }
.btnType3--logo{ height:13px; }
.btnType4{
    height:44px;
    border-radius: 22px;
    font-size:16px;
    font-weight: var(--fontWeight-bold);
}
.btnType.r10{ border-radius: 10px; }
.btnType5{
    height:24px;
    border-radius: 5px;
    font-size:12px;
    font-weight: var(--fontWeight-normal);
}
.roundBtn{
    height:24px;
    font-size:12px;
    border-radius: 12px;
    letter-spacing: -0.8px;
}
.priceBtn{ width:calc(20% - 4px) }
.ic--btn{ width:24px; }
.btnType.lightBlue{
    color:var(--skyblue-color);
    background: var(--lightblue-color);
}
.btnType.skyBlue{
    color:var(--white-color);
    background: var(--skyblue-color);
}
.btnType.blue{
    color:var(--white-color);
    background: var(--blue-color);
}
.btnType.darkGray{
    color:var(--white-color);
    background: var(--darkGray-color);
}
.btnType.gray{
    color:var(--gray3-color);
    background: var(--lightgray2-color);
}

.btnType:disabled{
  color:var(--gray3-color);
  background: var(--lightgray2-color);
}

.btnType.white{
    color:rgb(221,221,221);
    border:1px solid rgb(221,221,221);
}
.btnType.white2{
    color:rgb(0,0,0);
    border:1px solid rgb(0,0,0);
}
.btnSub{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap:10px;
}
.btnSub--item{
    position: relative;
}
.btnSub--item a{
    font-size:12px;
    font-weight: var(--fontWeight-normal);
    color:var(--black2-color);
    letter-spacing: -0.3px;
    display: block;
    line-height: 0.9;
}
.btnSub--item.separator {
    color: #ccc; /* Adjust color as needed */
    padding: 0 10px;
}
/*TODO DELETE*/
/*.btnSub::after{*/
/*    width:1px;*/
/*    height:14.6px;*/
/*    background: var(--black-color);*/
/*    position: absolute;*/
/*    left:calc(50% - 8px);*/
/*    top:50%;*/
/*    transform: translate(-50%,-50%);*/
/*}*/
.lineBtn{
    font-size:14px;
    font-weight: var(--fontWeight-bold);
    color:rgb(111,119,134);
    border-bottom:1px solid rgb(111,119,134);
    line-height: 1.2;
}
.lineBtn2{
    font-size:12px;
    font-weight: var(--fontWeight-normal);
    color:var(--gray2-color);
    border-bottom:1px solid var(--gray2-color);
    line-height: 1.2;
}
.toggleBtn{
    width:45px;
    height:24px;
    border-radius:12px;
    background-color:rgb(222,221,221) !important;
    position: relative;
    transition-duration: 0.5s;
}
.toggleBtn.on{
    background-color:rgb(69,164,217) !important;
}
.toggleBtn .toggleBtn--ball{
    width:20px;
    height:20px;
    border-radius: 50%;
    background:#ffffff;
    position:absolute;
    top:50%;
    left:2px;
    transform: translateY(-50%);
    box-shadow: 0px 5px 10px rgba(0,0,0,0.28);
    transition-duration: 0.5s;
}
.toggleBtn.on .toggleBtn--ball{
    left:calc(100% - 22px);
}

/*** Component ***/
/*탭*/
.tab{}
.tab--list{
    display: flex;
    align-items: center;
    justify-content: center;

    border-bottom: 1px solid var(--gray3-color);
}
.tab--item{ text-align: center; position: relative }
.tab--list li:not(:last-child)::after{
    content: '';
    display: block;
    width:1px;
    height:16px;
    background:var(--gray3-color);
    position: absolute;
    right:0;
    top:50%;
    transform: translateY(-50%);
}
.tab--item button, .tab--item a{
    font-size:16px;
    font-weight: var(--fontWeight-normal);
    color:var(--gray3-color);
    letter-spacing: -0.4px;
    line-height: 1.25;
    padding:16px 0 11px;
    display: block;
    text-align: center;
    width:100%;
}
.tab--item.on button, .tab--item.on a{
    color:var(--skyblue-color);
    font-weight: var(--fontWeight-bold);
}
.tab--item.on button::after, .tab--item.on a::after {
    content: '';
    width:100%;
    height:3px;
    background:var(--skyblue-color);
    position: absolute;
    left:0;
    bottom: -1px;
}
/*카드 리스트&슬라이드*/
.swiper-container{ overflow: hidden }
.swiper-wrapper.before-load{ justify-content: center; }
.card--list{ margin-bottom: 24px; }
.card--item {
    display: block;
    width: 100%;
    border: 1px solid rgb(222, 221, 221);
    box-sizing: border-box;
    border-radius: 15px;
    text-align: center;
    overflow: hidden;
}
.card--item{}
.card--item--default{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size:20px;
    font-weight: var(--fontWeight-medium);
    color:var(--black-color);
    line-height: 1.8;
}
.card--item--txt{
    padding:15px;
    box-sizing: border-box;
    width:100%;
    min-height: 120px;
}
.card--item--sub{
    font-size:14px;
    color:var(--skyblue-color);
    line-height: 1.4;
    padding:4px 10px;
    border: 1px solid var(--skyblue-color);
    border-radius: 3px;
    margin-bottom: 8px;
    display: inline-block;
}
.card--slide--item .card--item--sub{
    font-size:12px;
    color:var(--gray-color);
    margin-bottom:2px;
    padding: 0;
    border:none;
}
.card--item--tit{
    font-size:20px;
    color:var(--black-color);
    font-weight: var(--fontWeight-medium);
    letter-spacing: -0.35px;
    line-height: 1.35;
    width:90%;
    margin-left: auto;
    margin-right: auto;
    word-break: break-all;
}
.card--item--tit.dotTxt{
    height: 65px;
    line-height: 1.4;
}
.card--item--tit02.dotTxt{
    height:40px;
    line-height: 1.3;
}
.card--slide--item .card--item--tit{
    font-size:14px;
    width:190px;
}
.card--item--collection{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:10px;
    margin-top:5px;
}
.card--item--collection dt{
    font-size:16px;
    font-weight: var(--fontWeight-normal);
    color:var(--skyblue-color);
    letter-spacing: -0.33px;
}
.card--item--collection dd{
    font-size:18px;
    font-weight: var(--fontWeight-medium);
    color:var(--skyblue-color);
}
.card--slide--item .card--item--collection dt{ font-size:13px; }
.card--slide--item .card--item--collection dd{ font-size:14px; }
.card--item--img{
    width:100%;
    max-height:180px;
    object-fit: cover;
}
.card--slide--item .card--item--img{ max-height:125px; }
.card--slide{}
.card--slide--list{}
.swiper-slide.card--slide--item{
    width:initial;
}
.card--slide--cnt{
    display: block;
    width: 240px;
    height:248px;
    border: 1px solid rgb(222, 221, 221);
    box-sizing: border-box;
    border-radius: 15px;
    text-align: center;
    overflow: hidden;
}

/*상세페이지 요소*/
.detail--tag{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding:24px 5%;
    box-sizing: border-box;
    gap:10px;
    min-height:90px;
}
.detail--tag--item{
    font-size:14px;
    font-weight: var(--fontWeight-medium);
    color:var(--white-color);
    line-height: 1.45;
    padding:4px 12px;
    box-sizing: border-box;
    border-radius: 14px;
    background:rgb(89,201,216);
}
.detail--now{ margin:16px auto 18px;}
.detail--now--head{}
.detail--now--tit{
    font-size:13px;
    font-weight: var(--fontWeight-medium);
    color:var(--gray2-color);
    text-align: center;
}
.detail--now--head--cnt{
    font-size:20px;
    font-weight: var(--fontWeight-normal);
    color:rgb(255,71,2);
    text-align: center;
}
.detail--now--head--cnt strong{
    font-size:30px;
    font-weight: var(--fontWeight-normal);
}
.detail--now--head--cnt02{ color:var(--skyblue-color); }
.detail--now--head--progress{
    margin-top:55px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    width:100%;
    position: relative;
}
.detail--now--head--progress--bar{
    appearance: none;
    width:100%;
    height:8px;
    background:var(--lightgray-color);
    border-radius:4px;
    margin-bottom:4px;
}
.detail--now--head--progress--bar::-webkit-progress-bar {
    background:var(--lightgray-color);
    border-radius:4px;
    height:8px;
}
.detail--now--head--progress--bar::-webkit-progress-value {
    border-radius:4px;
    height:8px;
    background:var(--skyblue-color);
}
.detail--now--head--progress--bar + label{
    position: absolute;
    width:30px;
    height:40px;
    padding-top: 7px;
    box-sizing: border-box;
    background-image:url('/assets/images/icon/ic-progressLabel-3711c0ceb39a9b04ab0aaf4e745c4102.png');
    background-repeat:no-repeat;
    background-size: cover;
    top:-42px;
    right:0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size:11px;
    font-weight: var(--fontWeight-medium);
    color: var(--white-color);
    text-align: center;
}
.detail--now--head--progress--bar + label::after{
    content: '';

}
.detail--now--head--progress--dDay{
    color:var(--skyblue-color);
    font-size:14px;
    font-weight: var(--fontWeight-medium);
}
.detail--now--head--progress--price{
    color:var(--black-color);
    font-size:14px;
    font-weight: var(--fontWeight-medium);
}
.detail--now--body{
    background-color:rgb(248,248,250);
    padding:16px 0;
    box-sizing: border-box;
}
.detail--now--body01{
    display: flex;
    align-items: center;
    justify-content: center;
}
.detail--now--body02{ padding:16px; }
.detail--now--body03{
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    margin-top: 10px;
}
.detail--now--body--item{
    text-align: center;
    position: relative;
}
.detail--now--body--item--tit{
    font-size:12px;
    font-weight: var(--fontWeight-normal);
    line-height: 1.5;
    color:var(--darkGray2-color);
}
.detail--now--body--item--txt{
    font-size:16px;
    font-weight: var(--fontWeight-medium);
    color: var(--black2-color);
    text-align: left;
}
.detail--now--body--item--txt span{
    font-size:16px;
    font-weight: var(--fontWeight-normal);
    color: var(--gray-color);
}
.detail--now--body--item--txt02{
    font-size:14px;
    text-align: center;
}
.detail--now--body01 li:not(:last-child)::after{
    content: '';
    width:1px;
    height:30px;
    background:rgb(153,153,153);
    display: block;
    position: absolute;
    right:0;
    top:50%;
    transform: translateY(-50%);
}
.detail--now--body02 li{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.detail--now--body02 li:not(:last-child){
    margin-bottom: 6px;
}
.detail--now--body--cnt{
    font-size:16px;
    font-weight: var(--fontWeight-medium);
    color:var(--black-color)
}
.detail--story{ margin-bottom: 20px; }
.detail--story02{
    font-size:16px;
    font-weight: 400;
    line-height: 1.6;
    color:rgba(113,113,113,1);
    text-align: left;
}
.detail--story img{ height:auto !important; }
.detail--head{border-bottom: 1px solid var(--lightgray-color);}
.detail--head--tit{
    font-size:16px;
    font-weight: var(--fontWeight-bold);
    line-height: 1.4;
    color: var(--black-color);
    word-break: break-all;
}
.detail--head--date{
    font-size:12px;
    font-weight: var(--fontWeight-normal);
    line-height: 1.3;
    color: var(--gray2-color);
    margin-top:4px;
}
.detail--promotion{ position: relative; margin-bottom: 22px; }
.detail--promotion--bg{ width:100%; }
.detail--promotion--cnt{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    font-size:20px;
    font-weight: var(--fontWeight-normal);
    line-height: 1.3;
    width:320px;
    text-align: center;
    word-break: break-all;
}
.detail--promotion--cnt strong{
    font-weight: var(--fontWeight-bold);
}
.detail--tit{
    font-size:16px;
    font-weight: var(--fontWeight-bold);
    color:var(--black-color);
    line-height: 1.7;
    word-break: break-all;
}
.detail--txt{
    font-size:16px;
    font-weight: var(--fontWeight-normal);
    color:var(--gray-color);
    line-height: 1.7;
    word-break: break-all;
    margin-bottom: 56px;
}
.detail--txt img{ height:initial !important; }
.detail--slide{ margin-top: 22px; }
.swiper-container{ position: relative }
.swiper-button-next, .swiper-button-prev{
    z-index: 2;
}
.swiper-button-next:after, .swiper-button-prev:after{
    font-size:30px;
    color:#ffffff;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.detail--slideEach .swiper-button-next, .detail--slideEach .swiper-button-prev{
    z-index: 2;
}
.detail--slideEach .swiper-button-next:after, .detail--slideEach .swiper-button-prev:after{
    font-size:30px;
    color:#ffffff;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.notice{}
.notice--list{}
.notice--item{
    padding:10px 8px;
    border-top: 1px solid rgb(241,241,245);
    box-sizing: border-box;
}
.notice--item02{ padding:10px 5%; position: relative }
.notice--item03{ padding:16px 2%; position: relative }
.notice--item.py-2\.5{ padding-top:10px; padding-bottom:10px; }
.notice--item--tit{
    font-size:16px;
    font-weight: var(--fontWeight-medium);
    color:var(--black-color);
    letter-spacing: -0.4px;
    line-height: 1.25;
    /*height:45px;*/
    /*margin-bottom: 4px;*/
}
.notice--item--subTit{
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    color:rgb(57,57,57);
    line-height: 1.5;
    text-align: left;
}
.notice--link{
    display: block;
    font-size:16px;
    font-weight: var(--fontWeight-bold);
    color:#000000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width:100%;
}
.notice--link02{
    font-weight: var(--fontWeight-medium);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width:90%;
}
.notice--link02 img{ width: 24px; }
.notice--link--inner{
    width:100%;
    font-size:16px;
    color:#000000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.notice--link--version{
    font-size:14px;
    color:var(--lightgray-color);
    margin-left:auto;
}
.notice--date{
    font-size:12px;
    font-weight: var(--fontWeight-bold);
    color:var(--gray2-color);
    margin-top:4px;
}
.notice--infor{}
.notice--infor--tit{
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    color:var(--gray-color);
}
.notice--infor--date{
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    color:var(--black-color);
}
.notice--infor--date::before{
    content: '';
    width:3px;
    height:3px;
    background: #000000;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 0 4px;
}
.notice--head{
    padding:16px 0px;
    border-bottom: 1px solid rgb(241,241,245);
    box-sizing: border-box;
}
.notice--head--icon{ width:24px }
.notice--head--tit{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size:16px;
    font-weight: var(--fontWeight-medium);
    color:#000000;
    width:100%;
    word-break: break-all;
}
.notice--body{
    padding:16px 8px;
    box-sizing: border-box;
    word-break: break-all;
}
.notice--body img{ height: initial !important; }
.notice--bookmark{
    position: absolute;
    right:5%;
    top:50%;
    transform:translateY(-50%);
    width:24px;
    display: block;
}
.noticeView--title {
    font-size: 16px !important;
    font-weight: 500 !important;
    margin-bottom: calc(1.5rem - 6px);
}
.noticeView-separator {
    height: 2rem;
}
.noticeView--table{}
.noticeView--table th, .noticeView--table td{  vertical-align: top; padding:6px 0; }
.noticeView--table02 th, .noticeView--table02 td{ padding:0; }
.noticeView--table th .noticeView--table--tit{
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    color:rgb(57,57,57);
    line-height: 1.5;
    text-align: left;
}
.noticeView--table td .noticeView--table--txt{
    font-size:14px;
    font-weight: var(--fontWeight-medium);
    color:#000000;
    line-height: 1.5;
    word-break: keep-all;
}
.noticeView--txt{
    font-size:14px;
    font-weight: 1.45;
    font-weight: var(--fontWeight-normal);
    color:#000000;
    word-break: keep-all;
    transition-duration: 1s;
    max-height: 0;
    overflow: hidden;
}
.setting{
    min-height:calc(100vh - 70px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.setting--footer{
    margin-top:auto;
    margin-bottom: 30px;
    text-align: center;
}
.setting--footer h3{
    font-size:20px;
    font-weight: var(--fontWeight-bold);
    color:var(--black-color);
    letter-spacing: -0.5px;
}
.setting--footer h4{
    font-size:16px;
    font-weight: var(--fontWeight-medium);
    color:var(--black-color);
    letter-spacing: -0.4px;
    margin:10px auto 5px;
}
.setting--footer p{
    font-size:12px;
    font-weight: var(--fontWeight-normal);
    color:var(--black-color);
    letter-spacing: -0.3px;
}
.setting--footer--link{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top:20px;
    gap:30px;
}
.setting--footer--link--item a{
    display: block; text-align: center;
}
.setting--footer--link--item img{ width:60px; }
.setting--footer--link--item p{
    font-size:12px;
    font-weight: var(--fontWeight-medium);
    color:var(--black-color);
    letter-spacing:-0.3px;
    margin-top:8px;
}

/*메세지*/
.message.borderBottom{ border-bottom:1px solid rgb(241,241,245); }
.message--list{
  /* margin: 0px 20px; */
}
.message--list.alam{
    margin: 0px 20px;
}
.message--item{
    padding:16px 0px;
    border-top:1px solid rgb(241,241,245);
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap:17px;
    position:relative;
}

.message--item:first-child{
    border-top:none;
}

.message--list02 li.message--item:not(:last-child){
    border-top:none;
    border-bottom:1px solid rgb(241,241,245);
}
.message--item--caption{
    position: absolute;
    right:10px;
    top:16px;
    font-size:11px;
    font-weight: 500;
    color:#007aff;
}
.message--item--caption02{
    font-size:11px;
    font-weight: 500;
    color:#007aff;
    text-align: right;
}
.message--item--img{
    width:40px;
    height:40px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    min-width: 40px;
}
.message--item--img img{
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    object-fit: cover;
}
.message--item--cnt{
  width:  100%;
}
.message--item--cnt02{ width:100%; }
.message--item--cnt--head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2px;
}
.message--item--cnt--head02{
    justify-content: flex-start;
    align-items: center;
    gap:10px;
}
.message--item--cnt--neck{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.message--item--cnt--name{
    font-size:15px;
    font-weight: var(--fontWeight-bold);
    color:var(--black-color);
}
.message--item--cnt--del{
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border:none;
    background:none;
    font-size:12px;
    color:var(--gray2-color);
    border-bottom:1px solid var(--gray2-color)
}
.message--item--cnt--price{
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    color:var(--gray2-color);
}
.message--item--cnt--date{
    font-size:12px;
    font-weight: var(--fontWeight-normal);
    color:var(--black-color);
}
.message--item--cnt--txt{
    margin-top: 4px;
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    color:var(--black-color);
    line-height: 20px;
    word-break:break-all;
    width:95%;
    display: block;
    margin-bottom: 4px;
    /*max-height: 100px;*/
}
.message--item--cnt--txt.viewAll{ max-height: initial; }
.message--item--cnt--txt.line1{
    width:100%;
    display: block;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.message--item--cnt--sub{
    text-align: left;
    color: #007aff;
    font-size:14px;
    font-weight: 500;
}
.message--item--cnt--pointTxt{
  color:var(--skyblue-color);
  font-size:16px;
  font-weight: var(--fontWeight-normal);
  display: flex;
  gap: 6px;

  > a {
    border-radius: 100px;
    border: 1px solid var(--skyblue-color);
    color: var(--skyblue-color);
    font-size: 12px;
    font-weight: 700;
    padding: 3.5px 12px;
  }
}
.message--item--cnt--pointTxt strong{
  font-weight: bold;
}
.message--item--cnt--band{
    background: rgb(248,248,250);
    padding:10px;
    box-sizing: border-box;
    font-size:13px;
    font-weight: var(--fontWeight-bold);
    color:#000000;
    line-height: 1.5;
}
.message--item--cnt--band02{
    padding: 16px;
    font-weight: var(--fontWeight-normal);
}

/* message--item--cnt-- */

.message--item--cnt-header-row {
  display: flex;
  justify-content: center;
    border-radius: 4px;
    font-size: 14px;
    background: linear-gradient(90deg, #FFEFD4 0%, #FFD8D8 100%);
    padding: 3px 5px 3px 5px;
}

.message--item--cnt-doubleup {
    /*color : #E44549;*/
    /*font-weight: 700;*/
}

.message--item--cnt-doubleup > img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    float: left;
    margin-right: 10px;
    min-width: 40px;
}

.message--item--cnt-doubleup-amount::before{
  width: 10px;
    height: 12px;
    display: inline-block;
    content: '';
    background: url('data:image/svg+xml,<svg width="9" height="13" viewBox="0 0 9 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.67572 12.4997C8.6998 12.489 8.7212 12.4729 8.74528 12.4649C8.90047 12.4087 8.99144 12.2937 8.99947 12.1465C9.00749 11.986 8.92455 11.8495 8.76669 11.788C8.39746 11.6435 8.04695 11.4616 7.73123 11.2208C6.84828 10.5492 6.2864 9.67157 6.08305 8.57725C6.03489 8.30969 6.01616 8.0341 6.01349 7.76386C6.00546 6.89161 6.01081 6.01937 6.01081 5.14444C6.01081 5.09361 6.01081 5.04277 6.01081 4.9732H6.15529C6.69042 4.9732 7.22821 4.9732 7.76334 4.9732C7.83825 4.9732 7.91317 4.96518 7.98274 4.94912C8.22622 4.89293 8.32789 4.59594 8.17538 4.39795C8.14595 4.36049 8.11384 4.32571 8.08173 4.2936C6.87236 3.08155 5.66298 1.86682 4.44825 0.657444C4.38404 0.593229 4.3011 0.537041 4.21548 0.512961C4.07635 0.472827 3.95862 0.53169 3.85695 0.633363C3.51447 0.981193 3.16664 1.32635 2.82148 1.6715C1.94923 2.54375 1.07699 3.41332 0.210089 4.28825C0.140523 4.36049 0.0709572 4.45681 0.052228 4.55046C0.00406742 4.80464 0.183332 4.96785 0.485677 4.97053C1.02883 4.97053 1.57197 4.97053 2.1178 4.97053C2.16328 4.97053 2.21144 4.97053 2.28101 4.97053C2.28101 5.02671 2.28101 5.07488 2.28101 5.12304C2.28101 5.84813 2.27031 6.57054 2.28636 7.29563C2.29439 7.73176 2.32115 8.17056 2.38001 8.60401C2.47901 9.36388 2.72516 10.0809 3.15058 10.7231C3.74457 11.6221 4.57133 12.184 5.63087 12.39C5.86633 12.4355 6.10981 12.4408 6.35061 12.4649C6.39877 12.4703 6.44694 12.4863 6.4951 12.497H8.67572V12.4997Z" fill="%23E44549"/></svg>')
      no-repeat;
}

.message--item--cnt-doubleup-message{
  font-size: 11px;
  font-weight: 400;
  color: #161616;
}

/*게시물 없음*/
.default--page{
    width: 100%;
    height:80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.default--notice{
    margin:40px auto;
    text-align: center;
}
.default--img{ width:50px; }
.default--txt{
    font-size:15px;
    font-weight: var(--fontWeight-medium);
    color:rgb(195,193,193);
    line-height: 1.3;
}

/*bgBanner*/
.bgBanner{
    height:280px;
    width:100%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
}
.bgBanner::after{
    content:'';
    width:100%;
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    background-color: rgba(0,0,0,0.5);
    display: block;
    z-index: -1;
}
.bgBanner.bgNone::after{ display: none}
.bgBanner--tit{
    font-size:20px;
    font-weight: var(--fontWeight-bold);
    color:var(--white-color);
    letter-spacing: -0.5px;
    line-height: 1.3;
    text-align: center;
    word-break: break-all;
}
.bgBanner--tit.dotTxt{ max-height:55px; }
.bgBanner--subTit{
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    color:var(--white-color);
    text-align: center;
    word-break: break-all;
}

.banner-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    gap: 6px;
    justify-content: flex-end;
    padding-bottom: 8px;
}

.bgBanner--bg{
    width:100%;
    height:100%;
    left:0;
    top:0;
    position: absolute;
    object-fit: cover;
    z-index: -2;
}
.bgBanner--band{
    width:90%;
    height:36px;
    border-radius: 30px;
    background:rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding:0 6px;
    /* position: absolute; */
    gap:10px;
    left: 5%;
    bottom: 10px;
}
    .bgBanner--band--img{
        width:30px;
        height:30px;
        position: relative;
        border-radius: 50%;
        overflow: hidden;
    }
        .bgBanner--band--img img{
            width:100%;
            height:100%;
            position: absolute;
            left:0;
            top:0;
            object-fit: cover;
        }
    .bgBanner--band--txt{
        font-size:14px;
        font-weight: var(--fontWeight-normal);
        color:var(--black2-color);
    }
    .bgBanner--band--txt strong{
        font-weight: var(--fontWeight-medium);
    }

/*드롭다운*/
details > summary::-webkit-details-marker {
    display: none;
}
.dropDown{ transition-duration: 0.5s; }
.dropDown--tit{
    padding:16px 0;
    box-sizing: border-box;
    font-size:16px;
    font-weight: var(--fontWeight-bold);
    color:var(--gray2-color);
    position: relative;
    list-style: none;
}
.dropDown--tit::marker{ display: none; }
.dropDown--tit::after{
    content:'';
    background-image:url('/assets/images/icon/ic-selector-29b1bd9d37ffc4bb93a4d1296244cbf2.png');
    background-size:cover;
    background-repeat:no-repeat;
    width:24px;
    height:24px;
    position: absolute;
    right:0;
    top:50%;
    transform: translateY(-50%);
    transition-duration: 0.5s;
    display: block;
}
.dropDown[open] .dropDown--tit::after{
    transform: translateY(-50%) rotate(180deg);
}
.dropDown--cnt{
    /*padding:10px 10px 10px;*/
    padding:10px 10px 10px;
    /*background:var(--lightgray2-color);*/
    background:rgba(248,248,250,1);
    border-top:1px solid rgb(213,213,213);
    border-bottom:1px solid rgb(213,213,213);
    box-sizing: border-box;
    transition-duration: 0.5s;
}
.dropDown--cnt2{
    padding:0px 8px; box-sizing: border-box;
}
/*.dropDown--cnt dl:not(:last-child){ padding-bottom: 10px; }*/
/*.dropDown--cnt dl:not(:last-child) dd:last-child{ padding-bottom: 10px; }*/
.dropDown--cnt2--item{
    border-bottom:1px solid rgb(213,213,213);
}
.dropDown--cnt2--item--tit{
    padding:16px 0px; box-sizing: border-box;
}
.dropDown--cnt2--item--tit button{
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    color:var(--black-color);
    line-height:1.4;
    letter-spacing: -0.35px;
}
.dropDown--cnt2--item--cnt{
    background:rgb(248,248,250);
    padding:16px;
    box-sizing: border-box;
    font-size:13px;
    font-weight: var(--fontWeight-normal);
    line-height: 1.5;
    color:var(--gray2-color);
    display: none;
}
.dropDown--cnt2--item--cnt img{ height:initial !important }
.dropDown[open] .dropDown--cnt{
    animation: sweep .5s ease-in-out;
}
.dropDown[open] .dropDown--cnt2{
    animation: sweep .5s ease-in-out;
}
@keyframes sweep {
    0%    {opacity: 0; }
    100%  {opacity: 1; }
}
.dropDown--cnt dl:first-child .dropDown--cnt--head{
    padding:0 0 10px;
}
.dropDown--cnt--head{
    border-bottom:1px solid var(--lightgray-color);
    border-top:1px solid var(--lightgray-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.dropDown--cnt--head02{ border-top:none; }
.dropDown--cnt--head h3{
    font-size:13px;
    font-weight: var(--fontWeight-bold);
    color:var(--black2-color)
}
.dropDown--cnt--item{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dropDown--cnt--item h3{
    font-size:16px;
    font-weight: var(--fontWeight-bold);
    color:var(--black2-color);
    line-height: 2.1;
    word-break: break-all;
}
.dropDown--cnt--item p{
    font-size:12px;
    font-weight: var(--fontWeight-normal);
    color:var(--black2-color);
    line-height: 1.5;
    word-break: break-all;
}
.dropDown--cnt--tit{
    max-width: 80%;
    font-size:12px;
    font-weight: var(--fontWeight-normal);
    color:var(--black2-color);
    line-height: 2.1;
    word-break: break-all;
}
.dropDown--cnt--txt{
    font-size:12px;
    font-weight: var(--fontWeight-normal);
    color:var(--black2-color);
    line-height: 2.1;
    word-break: break-all;
}
.terms{}
.terms--head{
    padding:16px 0;
    border-bottom: 1px solid rgb(241, 241, 245);
    box-sizing: border-box;
    font-size:16px;
    font-weight: var(--fontWeight-medium);
    letter-spacing: -0.4px;
    color:var(--black-color);
}
.terms--body{
    padding:16px 8px;
    box-sizing: border-box;
    font-size:13px;
    font-weight: var(--fontWeight-normal);
    color:var(--gray2-color);
    line-height: 1.5;
}
.terms--body--scroll{
    width:100%;
    overflow-x: scroll;
}
.terms--body--scroll--cnt{
    width:max-content;
}
.terms--body--scroll--cnt td{
    text-align: center;
    padding: 0 10px;
}

/*모달 팝업*/
.modal{
    position:fixed;
    width:100%;
    height:100dvh;
    top:0;
    left:0;
    opacity: 0;
    z-index: -1;
    transition-duration: 0.5s;
}
.modal.on{
    z-index: 21;
    opacity: 1;
}
.modal.no-transition {
    transition-duration: 0s !important;
}
.modal--sec{
    background:#ffffff;
    box-sizing: border-box;
    position: absolute;
    max-width:390px;
    transition-duration: 0.5s;
}
.modal--sec.middle{
    top:50%;
    width:90%;
    left:50%;
    transform: translate(-50% , 0%);
    transition-duration: 0.5s;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.modal.on .modal--sec.middle{
    transform: translate(-50% , -50%);
}
.modal--sec.bottom{
    bottom:-50%;
    width:100%;
    left:50%;
    transform: translateX(-50%);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.modal.on .modal--sec.bottom{
    bottom:0;
}
.modal--close{
    width:24px;
    height:24px;
    position: absolute;
    right:24px;
    top:24px;
    display: block;
}
.modal--cnt{ padding:40px 5% 30px; }

.modal-banner {
  position: relative;


  > .modal-banner-text {
    position: absolute;
    inset: 0;
    padding-bottom: 16px;
    padding-left: 20px;
    z-index: 1;
    color: white;
    font-size: 15px;
    display: flex;
    align-items: end;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 80%);
  }

  > .modal-banner-image{
    border-radius: 10px 10px 0 0;
    width: 100%;
    height: 150px;
    object-fit: cover;
  }
}

.modal--agree--head{
    padding-bottom:24px;
    margin-bottom:24px;
    border-bottom: 1px solid var(--gray3-color);
    box-sizing: border-box;
}
.modal--agree--item{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.modal--agree--item .chkType01 + label{ width: calc(100% - 70px) }
.modal--agree--link{
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    color: var(--skyblue-color);
    border-bottom: 1px solid var(--skyblue-color);
    line-height: 1;
}
.color-skyblue{ color:var(--skyblue-color); }
.modal--default{ text-align: center; }
.modal--default--tit{}
.modal--default--tit h3{
    font-size:18px;
    font-weight: var(--fontWeight-medium);
    color: var(--black-color);
    line-height: 1.5;
    word-break: keep-all;
}
.modal--default--tit h4{
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    color: var(--black-color);
    line-height: 1.5;
}
.modal--default--tit p{
    font-size:12px;
    font-weight: var(--fontWeight-normal);
    color: var(--black-color);
    line-height: 1.5;
}
.modal--default--link{
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal--default--link li button {
    text-align: center; width:60px;
}
.modal--default--link li button p{
    font-size:12px;
    font-weight: var(--fontWeight-medium);
    color: var(--black-color);
    letter-spacing: -0.3px;
}
.modal--bg{
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background:rgba(0,0,0,0.5);
    z-index: -1;
}
.modal--tit{
    font-size:18px;
    font-weight: var(--fontWeight-medium);
    color:var(--black-color);
    letter-spacing: -0.45px;
    line-height: 1.33;
}
.modal--tit h4{
    font-size:16px;
    font-weight: var(--fontWeight-medium);
    line-height: 1.4;
}
.modal--txt{
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    color:var(--black-color);
    letter-spacing: -0.35px;
    line-height: 1.33;
    word-break: break-all;
}
.modal--btn{
    font-size:14px;
    font-weight: var(--fontWeight-thin);
    color:var(--white-color);
    position: absolute;
    bottom:-30px;
    text-align: center;
    left:50%;
    transform: translateX(-50%);
    border-bottom: 1px solid var(--white-color);
    line-height: 1;
}
.modal--opened {
    z-index: 3 !important;
}
.modal .close-modal {
    top: 32px;
    left: calc(100% - 44px);
    z-index: 10 !important;
}
.lodiPop{
    width:100%;
    height:100vh;
    position: fixed;
    left:0;
    top:0;
    z-index: 31;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lodiPop--cnt{
    width:200px;
    height:200px;
    border-radius: 15px;
    background:#ffffff;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.16);
    text-align: center;
    padding:16px;
    box-sizing: border-box;
}
.lodiPop--cnt--img{
    margin:0 auto;
    width: 120px;
    height:120px;
    position: relative;
}
.lodiPop--cnt--img lottie-player{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}
.lodiPop--cnt--txt{ margin-top:4px; }
.lodiPop--cnt--txt h4{
    font-size:16px;
    font-weight: var(--fontWeight-medium);
    line-height: 1.3;
    letter-spacing: -0.4px;
    color:var(--black-color);
}
.lodiPop--cnt--txt p{
    font-size:12px;
    font-weight: var(--fontWeight-normal);
    line-height: 1.6;
    letter-spacing: -0.3px;
    color:rgb(118, 118 ,118);
}
.profileMore{ position: relative }
.profileMore::before{
    content: '';
    width:80px;
    height:5px;
    border-radius: 3px;
    position: absolute;
    top:-25px;
    left:50%;
    transform: translateX(-50%);
    background:rgb(153,153,153);
    display: block;
}
.profileMore--item{}
.profileMore li:not(:last-child){
    border-bottom: 1px solid rgb(241, 241, 245); box-sizing: border-box;
}
.profileMore--link{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap:16px;
    padding:16px 0;
    box-sizing: border-box;
}
.profileMore--link img{ width:24px;}
.profileMore--link h4{
    font-size:16px;
    font-weight: var(--fontWeight-medium);
    color:var(--black-color);
    letter-spacing: -0.4px;
}

.grayBox{
    padding:15px;
    box-sizing: border-box;
    background:var(--lightgray2-color);
    font-size:13px;
    font-weight: var(--fontWeight-normal);
    color:var(--gray2-color);
    line-height: 1.6;
    word-break: break-all;
}

/*** MAIN ***/
.splash{
    width:100%;
    height:100vh;
    position: fixed;
    left:0;
    top:0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}
.splash h3{
    font-size:18px;
    font-weight: 500;
    color:var(--gray-color);
    text-align: center;
    margin-bottom: 15px;
}
.splash img{ width: 60%; max-width: 280px; min-width:200px; }
.mainBanner{ overflow:hidden; position:relative; }
.mainBanner--item{ height:140px; }
.mainBanner--item a{
    width:100%;
    height:100%;
    display: block;
    position: relative;
    background:#efefef;
}
.mainBanner--item a img{
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    object-fit: cover;
}
.mainBanner .swiper-pagination{
    display: inline-flex;
    padding:2px 10px;
    border-radius: 15px;
    background: var(--gray-color);
    color:var(--white-color);
    font-size:12px;
    width:auto;
    left:initial;
    right:5%;
    gap:2px;
}
.mainBanner .swiper-pagination span{
    color:var(--white-color);
    font-size:12px;
}
.mainSec{ margin-top: 30px;}
.collectList{
    margin-bottom:40px;
}
.mainSec--tit{ }
.mainSec--tit h3{
    color:var(--black-color);
    font-weight: var(--fontWeight-bold);
    font-size:18px;
    line-height: 1.55;
    width:100%;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.mainSec--tit p{
    color:var(--gray-color);
    font-weight: var(--fontWeight-normal);
    font-size:14px;
    line-height: 2;
    letter-spacing: -0.35px;
}
.collectList--sec{}
.collectList--list{
}
.collectList--list li:not(:last-child){
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgb(241,241,245);
}
.collectList--item{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap:15px;
    box-sizing: border-box;
}
.dotTxt{
    display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    word-break: break-all;
    vertical-align: top;
}
.dotDetail {
    -webkit-box-orient: horizontal;
    display: flex;
    justify-content: center;
}
.closeEvent{ opacity: 0.3 }
.collectList--item--img{
    width:100px;
    min-width: 100px;
    height:100px;
    position: relative;
    border-radius: 10px;
    overflow:hidden;
}
.collectList--item--img img{
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    object-fit: cover;
}
.collectList--item--txt {
  width: 100%;
    display: flex;
    gap: 4px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 100px;
}
.collectList--item--txt h4{
    font-size:14px;
    font-weight: 500;
    color:var(--black-color);
    word-break: break-all;
}

.collectList--item--hashtags {
  font-size: 12px;
  font-weight: 400;
  color: #AAAAAA;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/*.collectList--item--txt .dotTxt{ height:40px; }*/
.collectList--item--txt p{
    font-size:12px;
    font-weight: 700;
    color:var(--gray-color);
}

.collectList--item--infor{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    width:100%;
    flex:1;
}
.collectList--item--infor-process{
  display: flex;
  width: 100%;
  gap: 3px;
  align-items: center;
}

.collectList--item--infor--dday{
  flex: 1;
  font-size: 12px;
  font-weight: 400;
  color: #717171;
  display: flex;
  align-items: center;
  gap: 4px;
}

.collectList--item--infor--percentage{
  width: 50px;
  font-weight: 500;
  background-color: #E1F2FE;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  padding: 1px 6px;
  margin-left:6px;
  line-height: 14.48px;
  color: var(--skyblue-color);
  order: 4;

  > span {
    font-size: 8px;
  }
}

.collectList--item--infor--bar{
    appearance: none;
    margin-top : 6px;
    width:100%;
    height:4px;
    background:var(--lightgray-color);
    border-radius:4px;
    order:3;
}
.collectList--item--infor--bar::-webkit-progress-bar {
    background:var(--lightgray-color);
    border-radius:4px;
    height:4px;
}
.collectList--item--infor--bar::-webkit-progress-value {
    border-radius:4px;
    height:4px;
    background:var(--skyblue-color);
}
.closeEvent .collectList--item--infor--bar::-webkit-progress-value {
    background:var(--gray-color);
}
.collectList--item--infor--bar + label{
    order:1;
    color:var(--skyblue-color);
    font-size:14px;
    font-weight: var(--fontWeight-medium);
}
.collectList--item--infor--price{
  font-weight: 700;
  font-size: 14px;
  color: var(--skyblue-color);
}
.collectList--item--infor--bar--wrapper {
  display: flex;
  width: 100%;
  margin-top: 4px;
}

.mainMidBanner{
    background:var(--skyblue-color);
    padding: 16px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin-top: 24px;
}
.mainMidBanner--tit{
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: end;
  height: 36px;
  margin: 0px 20px;
  border-bottom: 1px solid #FFFFFF33;
  padding-bottom: 10px;
}

.mainMidBanner--tit h3{
  font-size: 18px;
  font-weight: 700;
  color: white;
}
.mainMidBanner--tit p{
    font-weight: 400;
    font-size: 10px;
    color: white;
}

.mainMidBanner--cnt{
    padding:0 5%;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap:13px;
    margin-top:15px;
}

.mainMidBanner--btn{
    /* padding:0 5%;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap:15px;
    margin-top:15px; */
    margin: 16px 20px 0px 20px;
    background-color: #2363AD;
    color: white;
    font-size: 12px;
    padding: 5px 0px;
    border-radius: 4px;

    >.content {
      font-weight: 500;
    }

    >.amount {
      font-weight: 700;
    }
}

/*.mainMidBanner--img{ max-width:110px; }*/
.mainMidBanner--txt{ flex: 1; }
.mainMidBanner--txt--item{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mainMidBanner--txt--item dt{
    font-size:12px;
    font-weight: var(--fontWeight-normal);
    color:var(--white-color);
    text-align: left;
}
.mainMidBanner--txt--item dd{
    font-size:13px;
    font-weight: var(--fontWeight-medium);
    color:var(--white-color);
    text-align: right;
}
.mainEndBanner{
    padding:10px 5%;
    box-sizing: border-box;
    background:rgb(255,232,136);
    display: block;
}
.mainEndBanner--cnt{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mainEndBanner--txt{ text-align: right;}

.mainEndBanner--txt h4{
    font-size:16px;
    font-weight: var(--fontWeight-normal);
    color:var(--black-color);
    line-height: 1.8;
}
.mainEndBanner--txt h3{
    font-size:20px;
    font-weight: var(--fontWeight-bold);
    color:var(--black-color);
    line-height: 1.5;
}
.mainPartner{}
.mainPartner--list{ padding-bottom: 10px; }
.mainPartner--item.swiper-slide{ width: auto; }
.mainPartner--cnt{
    width:140px;
    height:120px;
    display: block;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.16);
    border-radius: 10px;
    overflow:hidden;
}
.mainPartner--cnt--img{
    width:100%; height:80px; position: relative;
}
.mainPartner--cnt--img img{
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    object-fit: cover;
}
.img-contain img{
    object-fit: contain;
}
.mainPartner--cnt--img:has(.agency-big-logo):hover img:nth-child(2){
    visibility: visible !important;
}
.mainPartner--cnt--img:has(.agency-big-logo) img:nth-child(2){
    visibility: hidden;
    max-width: 200px;
    max-height: 200px;
    width: 200px;
    height: 200px;
    top: -200px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 15px;
}
.partner-grid div:nth-child(even) .agency-big-logo{
    left: -100px;
}
.mainPartner--cnt--name{
    height:35px;
    font-size:14px;
    letter-spacing: -0.35px;
    color:var(--black-color);
    line-height: 1.2;;
    text-align: center;
    width:90%;
    word-break: break-all;
    overflow: hidden;
}

/*** SUB ***/
.subTit h2{
    font-size:20px;
    font-weight: var(--fontWeight-medium);
    color:var(--black-color);
    line-height: 1.4;
    letter-spacing: -0.5px;
    word-break: break-all;
}
.font-bold{
    font-weight: var(--fontWeight-bold) !important;
}
.font-medium{
    font-weight: var(--fontWeight-medium) !important;
}
.font-normal{
    font-weight: var(--fontWeight-normal) !important;
}
.subTit h3{
    font-size:18px;
    font-weight: var(--fontWeight-bold);
    color:var(--black-color);
    line-height: 1.4;
    word-break: break-all;
}
.subTit h4{
    font-size:14px;
    font-weight: 400;
    color:var(--black-color);
    line-height: 1.7;
    letter-spacing: -0.4px;
    word-break: break-all;
}
.subTit h4.leading-4{ line-height: 1; }
.subTit p{
    font-size:14px;
    font-weight: var(--fontWeight-bold);
    color:var(--gray2-color);
    line-height: 1.4;
    word-break: break-all;
    letter-spacing: -0.35px;
}
.subTit .titLink{
    font-size:16px;
    font-weight: var(--fontWeight-medium);
    color:var(--black-color);
    line-height: 1.4;
    letter-spacing: -0.4px;
    text-align: left;
    padding-right: 50px;
    width:100%;
    box-sizing: border-box;
    /*height:45px;*/
    display: block;
    position: relative;
}
.subTit .titLink::after{
    content: '';
    width:24px;
    height:24px;
    display: block;
    background-image:url('/assets/images/icon/ic-arrow-right-ed56be10bce9869b0289c577c323fdd7.png');
    background-repeat: no-repeat;
    background-size: 100%;
    position:absolute;
    right:0;
    top:50%;
    transform: translateY(-50%);
}
.subTit--sub{
    font-size:12px;
    font-weight: var(--fontWeight-medium);
    color:var(--black-color);
    line-height: 1.4;
    letter-spacing: -0.3px;
}
.subTit .underLine{
    position: relative; z-index: 2; display: inline-block;
}
.subTit .underLine::after{
    content: '';
    position: absolute;
    width:103%;
    left: 0;
    height:10px;
    bottom:3px;
    background:rgb(255,222,132);
    display: inline-block;
    z-index: -1;
}
.ic--help{
    width:24px;
    height:24px;
    display: block;
}
.ic--logo{
    width:40px;
    height:40px;
    border-radius: 50%;
    border:1px solid rgb(195,203,206);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ic--logo img{
    width:100%;
    /*height:100%;*/
    object-fit: cover;
}

/*회사소개*/
.introBlock{}
.introBlock--tit{
    font-size: 14px;
    font-weight: var(--fontWeight-normal);
    color:var(--black-color);
    letter-spacing: -0.35px;
}
.introBlock--cnt{
    font-size: 16px;
    font-weight: var(--fontWeight-normal);
    color:var(--black-color);
    letter-spacing: -0.4px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--lightgray-color);
    word-break: break-all;
}

/*기부-랭킹*/
.rankHeader{}
.rankHeader--sub{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap:15px;
}
.rankHeader--sub h4{
    font-size:16px;
    font-weight: var(--fontWeight-bold);
    color:var(--gray2-color);
    line-height: 1.2;
}
.rankHeader--sub h5{
    font-size:18px;
    font-weight: var(--fontWeight-medium);
    color:var(--skyblue-color);
    line-height: 1.2;
}
.profile--slide{
    width:100%;
    margin-top: 15px;
}
.profile--slide .swiper-slide{ width:80% !important; }
.profile{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap:15px;
}
.profile01{
    background: rgb(242,249,255);
    padding: 16px;
    box-sizing: border-box;
    border-radius: 10px;
}
.profile--edit--msg{
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    color:rgb(113,113,113);
    text-align: center;
    line-height: 1.5;
}
.profile--edit{
    width:100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
}
.profileUpload{ display: none; }
.profile--edit--icon{
    width:30px;
    height:30px;
    border-radius: 50%;
    background:rgb(112,112,112,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right:0;
    top:0;
}
.profile--edit--nick .btn {
    width: fit-content;
    padding: 0 12px;
    font-size: 12px;
}
.profile--edit--nick .warn {
    left: auto;
    bottom: auto !important;
}
.profile--edit--nick .spacer {
    min-width: 0;
}
.profileUpload + .profile--edit--icon{
    width:30px;
    height:30px;
    border-radius: 50%;
    background:rgb(112,112,112,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right:0;
    top:0;
}
.profile--edit--icon img{ width: 24px; }
.profile--rank{
    width:70px;
    height:70px;
    position: relative;
}
.profile--img{
    width:70px;
    height:70px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}
.profile--img--edit{
    width:100px;
    height:100px;
}
.profile--img img{
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    object-fit: cover;
}
.profile--txt{ flex-grow: 1; }
.profile--name{
    font-size:18px;
    font-weight: var(--fontWeight-bold);
    color:var(--black-color);
    margin-bottom: 3px;
}
.profile--name02{
    font-weight: var(--fontWeight-medium);
}
.profile--txt--item{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.profile--txt--item dt{
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    color:var(--black2-color);
}
.profile--txt--item dd{
    font-size:14px;
    font-weight: var(--fontWeight-bold);
    color:var(--black-color);
}
.profile--infor{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.profile--infor li{
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    color: var(--black-color);
    letter-spacing: -0.35px;
}
.profile--infor li:not(:last-child)::after{
    content: '';
    width:3px;
    height: 3px;
    display: inline-block;
    border-radius: 50%;
    background: var(--black-color);
    margin: 3px 5px;
}
.rankList{}
.rankList--item{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap:16px;
    padding:8px 0;
    border-bottom:1px solid var(--lightgray2-color)
}
.rankList--item--img{
    width:60px;
    height:60px;
    position: relative;
}
.rankList--item--icon{
    width:60px;
    height:60px;
    border-radius: 50%;
    overflow: hidden;
}
.rankList--item--icon img{
    height:100% !important;
    object-fit: cover;
    width:100%;
}
.rankList--item--img::after{
    content: '';
    width:24px;
    height:24px;
    position:absolute;
    right:0;
    top:0;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    z-index: 2;
}
.rankList--item--img.gold::after{
    background-image: url('/assets/images/icon/ic-goldMedal-8403a5b2876efa2cd84bd989c4cf9613.png');
}
.rankList--item--img.silver::after{
    background-image: url('/assets/images/icon/ic-silverMedal-49f1f24c4d2445241135bcbb3613cfad.png');
}
.rankList--item--img.bronze::after{
    background-image: url('/assets/images/icon/ic-bronzeMedal-0deaa6667f65cb70b1f4310fc64553af.png');
}
.rankList--item--img--box{
    width:100%;
    height:100%;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
}
.rankList--item--img--box img{
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    object-fit: contain;
}
.rankList--item--cnt{
    width:calc(100% - 70px);
}
.rankList--item--cnt--tit{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width:100%;
}
.rankList--item--cnt--tit h4{
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    color:var(--black2-color)
}
.rankList--item--cnt--txt{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width:100%;
    margin-top:5px;
}
.rankList--item--cnt--txt h3{
    font-size:16px;
    font-weight: var(--fontWeight-bold);
    color:var(--black2-color);
    width: 60%;
    cursor: pointer;
}
.rankList--item--cnt--txt h4{
    font-size:14px;
    font-weight: var(--fontWeight-bold);
    color:var(--black2-color)
}

/*기부하기*/
.donationBox{ display: none; }
.donationBox.on{ display: block; }
.donationTable{}
.donationTable th{
    padding:6px 8px;
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    vertical-align: middle;
    letter-spacing: -0.35px;
    color: var(--black2-color);
    width: 115px;
    text-align: left;
}
.donationTable02 th{ width: 100%; }
.donationTable td{
    vertical-align: middle; padding:6px 0;
}
.donationTable02 td{ padding:6px 8px; }
.donationTable--inner{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap:10px;
}
.donationTable--inner02{
    flex-wrap: wrap;
    align-items: flex-end;
    /*justify-content: flex-end;*/
    /*gap:2vw 2%;*/
    gap:8px 2%;
}
.donationTable--inner .btnType3{ display: none; }
.donationTable--inner .btnType3.on{ display: flex; }
.donationTable--item{ display: none; }
.donationTable--item + label{
    border:1px solid var(--lightgray-color);
    color:var(--gray-color);
    background: var(--lightgray2-color);
    box-sizing: border-box;
    width: 100%;
    font-size: 12px;
}
.donationTable--item:checked + label {
    border: 1px solid var(--skyblue-color);
    background: transparent;
    color:var(--skyblue-color);
    font-size: 12px;

}

.donationTable--item.ghost + label{
  border: 1px solid var(--skyblue-color);
  color: var(--skyblue-color);
  background: transparent;
  width: 100%;
  font-size: 12px;
}

.donationTable--item.ghost:checked + label {
  border: 1px solid var(--skyblue-color);
  background: var(--skyblue-color);
  color:white;
  font-size: 12px;

}


.dolgoNation{
    padding:20px 0 25px;
    border-bottom: 1px solid var(--lightgray-color);
}
.dolgoNationTable{}
.dolgoNationTable th{
    font-size:16px;
    font-weight: var(--fontWeight-bold);
    color:var(--gray2-color);
    line-height: 1.7;
    text-align: left;
}
.dolgoNationTable td{
    /*font-size:16px;*/
    font-size:14px;
    font-weight: var(--fontWeight-medium);
    color:var(--gray2-color);
    line-height: 1.7;
    text-align: right;
}

.donationFooter{}
.donationFooter--txt{
    font-size:20px;
    color:var(--black2-color);
    letter-spacing: -0.5px;
    line-height: 1.4;
}
.donationFooter--txt strong{
    font-weight: var(--fontWeight-bold);
}
.donationFooter--subTxt{
    font-size:13px;
    font-weight: var(--fontWeight-normal);
    color:var(--gray2-color);
    line-height: 1.7;
}
.donationFooter--subTxt a{
    border-bottom: 1px solid var(--gray2-color);
    line-height: 0.8;
}
.certificate{
    width:100%;
    aspect-ratio: 1/1;
    position: relative;
    z-index: 2;
}
.certificate--bg{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    object-fit: cover;
    z-index: -1;
}
.certificate--cnt{
    position:absolute;
    left:0;
    width:100%;
    top:50%;
    transform: translateY(-40%);
    text-align: center;
}
.certificate--tit{
    font-size:16px;
    font-weight: var(--fontWeight-normal);
    line-height: 1.5;
    color:var(--black-color);
    letter-spacing: -0.4px;
    text-align: center;
}
.certificate--tit--name{
    font-size:24px;
    font-weight: var(--fontWeight-medium);
}
.certificate--tit--cnt{
    font-size:18px;
    font-weight: var(--fontWeight-medium);
    line-height: 1.3;
    color:var(--black-color);
    letter-spacing: -0.45px;
    text-align: center;
}
.certificate--txt{
    font-size:16px;
    font-weight: var(--fontWeight-normal);
    line-height: 1.5;
    color:var(--black-color);
    letter-spacing: -0.4px;
}
.certificate--date{
    font-size:18px;
    font-weight: var(--fontWeight-normal);
    line-height: 1.3;
    color:var(--black-color);
    letter-spacing: -0.45px;
    text-align: center;
}
.certificate--share{ text-align: center; }
.certificate--share--tit{
    font-size:16px;
    font-weight: var(--fontWeight-normal);
    line-height: 1.5;
    color:var(--black-color);
    letter-spacing: -0.4px;
}
.certificate--share--list{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:10px;
}
.certificate--share--item a{
    width:60px;
    height:60px;
    display: block;
}
.certificate--share--item a img{
    width:100%;
}
.cancel{
    height:calc(100dvh - 130px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.cancel--tit{
    font-size:20px;
    font-weight: var(--fontWeight-medium);
    color: var(--black-color);
    line-height: 1.4;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
}
.cancel--txt{
    font-size:14px;
    font-weight: var(--fontWeight-normal);
    color: var(--black-color);
}

/*모금함*/
.collectionHub{
  background:var(--lightgray2-color);
}

.collectionHub--list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: start;
    gap:10px 10px;
    flex-wrap:wrap;
    overflow-x: hidden;
    padding: 0px 5px 20px 5px;
    box-sizing: border-box;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.collectionHub--list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

.collectionHub--item{
  padding: 20px;
  height: 90px;
  width: 100%;
  /* max-height: 90px; */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.collectionHub--item.kid{ background:rgb(255,222,132); }
.collectionHub--item.older{ background:rgb(235,193,155); }
.collectionHub--item.woman{ background:rgb(255,147,154); }
.collectionHub--item.animal{ background:rgb(255,165,124); }
.collectionHub--link{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.collectionHub--link h3{
  font-size:15px;
  font-weight: 600;
  color:var(--white-color);
  text-align: center;
  text-wrap: pretty;
  width: 60px;
  text-shadow:  2px 2px 4px rgba(0,0,0,0.16);
  word-break: keep-all;
}

.collectionHub--link img{
  height:40px;
}

/*봉사*/
.serviceSetting{}
.serviceSetting--tit{
    padding:15px 0;
    box-sizing: border-box;
    font-size:14px;
    font-weight: var(--fontWeight-medium);
    color: var(--black-color);
    text-align: center;
    display: block;
}
.serviceSetting--cnt{
    box-sizing: border-box;
    border-top:1px solid var(--lightgray3-color);
}
.serviceSetting--list{ position: relative; }
.serviceSetting--btn{
    width:160px;
    height:50px;
    border-bottom:1px solid var(--white-color);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:14px;
    font-weight: var(--fontWeight-medium);
    background-color:rgb(240, 240, 240) !important;
    color:rgb(173, 173, 173);
}
.serviceSetting--btn.on{
    background-color: var(--white-color) !important;
    font-weight: var(--fontWeight-black);
    color:var(--gray2-color);
    border-right:1px solid rgb(244, 244, 244);
}
.serviceSetting--depth2{
    position: absolute;
    display: none;
    top:0;
    left:160px;
    width:calc(100% - 160px);
    padding-left:28px;
    box-sizing: border-box;
    background: #ffffff;
    z-index: -1;
}
.serviceSetting--depth2.on{ z-index: 2; display: block;  }
.serviceSetting--depth2--list{}
.serviceSetting--depth2--btn{
    border-bottom:1px solid rgb(244, 244, 244);
    box-sizing: border-box;
    height:50px;
    width:100%;
    font-size:14px;
    font-weight: var(--fontWeight-medium);
    color:var(--gray2-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.serviceSetting--depth2--btn.on{
    font-weight: var(--fontWeight-bold);
}
.searchCnt{ text-align: center; }
.searchCnt--default{
    height:70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align:center;
}
.searchCnt--icon{ width:50px; }
.searchCnt--msg{
    font-size:15px;
    font-weight: var(--fontWeight-medium);
    color:var(--gray3-color);
    line-height:1.5;
}
.searchCnt--output{
    font-size:20px;
    font-weight: var(--fontWeight-medium);
    color:var(--gray3-color);
    line-height:1.5;
}

/* 회원관련 */
.login--logo{
    width:160px;
    margin-top:77px;
    margin-right: auto;
    margin-left: auto;
    display: block;
}
.login--footer{
    background-color: var(--lightgray2-color);
    padding:20px 5%;
}
.login--footer--item{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.login--footer--item--tit{
    font-size:12px;
    font-weight: var(--fontWeight-normal);
    letter-spacing: -0.3px;
    color: var(--black-color);
    word-break: break-all;
}
.login--footer--msg{
    font-size:10px;
    font-weight: var(--fontWeight-normal);
    color:var(--skyblue-color);
    letter-spacing: -0.25px;
    line-height: 1.4;
    word-break: break-all;
}
.login--footer--link{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:10px;
    margin-top: 10px;
}
.login--footer--link li a{
    font-size:12px;
    color: #7f7f7f;
    border-bottom: 1px solid #7f7f7f;
    line-height: 1;
    letter-spacing: -0.5px;
}
.login--footer hr{
    width: 100%;
    border-top: 1px solid #e5e5e5;
    margin-bottom: 20px;
}
.login--footer--info{
    display: flex;
    font-size:12px;
    color: #7f7f7f;
    line-height: 1;
    letter-spacing: -0.5px;
    gap: 10px
}
.login--footer--info:not(:last-child){
    margin-bottom: 6px;
}
.login--footer--info li:not(:last-child)::after{
    content: "ᐧ";
    margin-left: 10px;
}
.login--footer--info--wrapper{
    display: flex;
    justify-content: center;
}
.login--footer--info--wrapper img{
    width: 52px;
    height: 52px;
    margin-left: -6px;
    margin-right: 20px;
}
.join--msg{
    font-size:10px;
    font-weight: var(--fontWeight-normal);
    line-height: 1.4;
    letter-spacing: -0.25px;
    color:var(--gray4-color)
}
.login--sub--container {
    justify-content: space-between;
    padding: 0 4px;
    text-align: center; /*pms*/
}
.login--checkbox--container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 10px;
}
.login--checkbox--label {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: var(--fontWeight-normal);
    color: var(--black2-color);
    letter-spacing: -0.3px;
    line-height: 0.9;
}
.login--checkbox {
    display: none;
}
.login--checkmark {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
    margin-left: 10px;
    border: 2px solid var(--skyblue-color);
    border-radius: 4px;
    background-color: #fff;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
}
.login--checkbox:checked + .login--checkmark {
    background-color: var(--skyblue-color);
    border-color: var(--skyblue-color);
}
.login--checkmark:after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.login--checkbox:checked + .login--checkmark:after {
    opacity: 1;
}

.filter {
  margin: 20px;
  overflow: hidden;

  > label{
    cursor: pointer;
    display: block;
    font-size: 13px;
    font-weight: 500;

    > input:checked{
      /* width: 100px;
      height: 100px;
      background-color: red; */
    }

    > input {
      display: none;
    }

    .title {
      > input + .arrow{
        display: inline-block;
        width: 12px;
        height: 8px;
        background-image: url('data:image/svg+xml,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L6 1.5L11 6.5" stroke="%23888888" stroke-width="2"/></svg>');
        transition: transform 0.5s;
        transform: rotate(180deg);
      }

      > input:checked + .arrow {
        transform: rotate(0);
      }
    }

  }
}

.filter-list{
  display: flex;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: auto;
  gap: 8px 6px;
  transition: margin-bottom 0.5s;
  margin-bottom: 0%;

  &.collapse{
    margin-bottom: -100%;
  }

  > div {
    display: flex;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    padding: 5px 12px;
    border: 1px solid #DDDDDD;
    border-radius: 15px;
    color :#999999;
    font-size: 12px;
    cursor: pointer;
    gap: 6px;


    &.selected {
      background-color: var(--skyblue-color);
      border: 1px solid var(--skyblue-color);
      color: white;
      font-weight: 700;
    }

    &.on {
      border: 1px solid var(--skyblue-color);
      color: var(--skyblue-color);
      font-weight: 700;

      &::after{
        content: '';
        display: block;
        background-image: url('data:image/svg+xml,<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1L4.5 5L8.5 1" stroke="%2353A8E2"/></svg>') ;
        width: 9px;
        height: 6px;
      }
    }
  }
}

.arrow {
  background-image: url('data:image/svg+xml,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L6 1.5L11 6.5" stroke="%23888888" stroke-width="2"/></svg>') no-repeat center;
}

.filter-parent{
  > div {
    &::after{
      content: '';
      display: block;
      background: url('data:image/svg+xml,<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1L4.5 5L8.5 1" stroke="%23888888"/></svg>')
      no-repeat center;
      width: 9px;
      height: 6px;
    }
  }
}

.filter-children{
  margin-top: 12px;
  > div {
    background-color: #F5F5F5;
  }
}

.filter-children::before{
  /* width: 100%; */
  /* content: ''; */
  /* border-top: 1px solid #DDDDDD; */
}

.filter-list::-webkit-scrollbar {
  display: none;
}

.divider {
  height: 8px;
  background-color: #F5F5F5;
}

.list-empty{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  font-size: 12px;
  font-weight: 400;
  text-align: center;
  color: #717171;

}

.arrow {
  background-image: url('data:image/svg+xml,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L6 1.5L11 6.5" stroke="%23888888" stroke-width="2"/></svg>') no-repeat center;
}

.filter-parent{
  > div {
    &::after{
      content: '';
      display: block;
      background: url('data:image/svg+xml,<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1L4.5 5L8.5 1" stroke="%23888888"/></svg>')
      no-repeat center;
      width: 9px;
      height: 6px;
    }
  }
}

.filter-children{
  margin-top: 12px;
  border-top: 1px solid #DDDDDD;
  padding-top: 12px;
  overflow-x: hidden;
  flex-wrap: wrap;
  justify-content: center;
  > div {
    background-color: #F5F5F5;
  }
}

.filter-children::before{
  /* width: 100%; */
  /* content: ''; */
  /* border-top: 1px solid #DDDDDD; */
}

.filter-list::-webkit-scrollbar {
  display: none;
}

.divider {
  height: 8px;
  background-color: #F5F5F5;
}

.list-empty{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  font-size: 12px;
  font-weight: 400;
  text-align: center;
  color: #717171;
  padding-bottom: 30px;
}

/* 모금함 > 사연 > 상세 > 나눔 파트너 배너 */
.partner-banner{
  display: flex;
  font-size: 14px;
  gap: 16px;
  background: linear-gradient(90deg, #C1DFF3 0%, #DFF2EC 100%);
  &.double-up {
    background: linear-gradient(90deg, #FFEFD4 0%, #FFD8D8 100%);
  }
  --bg : var(--skyblue-color);
  &.double-up{
    --bg: #E44549;
  }

  padding: 12px 20px;
  >.image{
    aspect-ratio: 1 / 1;
    background-color: white;
    border-radius: 12px;
    height: 64px;
    padding: 8px;
  }

  >.content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: start;
    >.chip{
      font-size: 10px;
      color: white;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 4px;
      background-color: var(--bg);
    }
  }
}

.bold {
  font-weight: bold;
}

/* 프로그레스 바 */
.progress-bar {
  margin-top: 15px;
  margin-bottom: 10px;
  position: relative;

  > .bg {
    background-color: #d9d9d9;
    height: 8px;
    border-radius: 2px;
    display: flex;

    > .progress {
      background-color: #4caf50;
      height: 100%;
      border-radius: 2px;
    }
  }

  > .text {
    display: flex;
    justify-content: space-between;
    color: #717171;
    font-size: 12px;
    height: 18px;
    align-items: center;
  }

  .comment-wrapper {
    height: 30px;
    position: relative;
    > .comment-arrow {
      display: block;
      z-index: 0;
      content: "";
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 10px solid #333333;
      position: absolute;
      left: 50%;
      top: 65%;
      transform: translateX(-50%) rotate(180deg);
    }

    > .comment {
      z-index: 1;
      position: absolute;
      background-color: #333333;
      color: white;
      transform: translate(-55%, 0%);
      padding: 2px 8px;
      border-radius: 2px;
      font-size: 12px;
      font-weight: 700;

      > span {
        font-size: 10px;
      }
    }
  }
}


.donation-list {
  border-radius: 6px;
  padding: 16px;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  gap: 2px;

  > .donation-list-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    height: 22px;

    > .circle {
      width: 8px;
      height: 8px;
      background-color: red;
      margin-right: 8px;
    }

    > .title {
      flex: 1;
    }

    > .currency {
      font-weight: 700;
    }
  }
}

.circle {
  border-radius: 50%;
}

.donator-list {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    padding: 0px 20px;

&::-webkit-scrollbar {
     display: none; /* Chrome, Safari, Opera*/
 }

> div {
    /* width: 72px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;

> div {
    width: 72px;
    height: 72px;
    border: 1px solid #DDDDDD;
    border-radius: 50%;
    padding: 10px;

>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
} */
}
  .ranking {
      background-color: #EBF7FF;
      border: 1px solid var(--skyblue-color);
  }

  > span {
      font-size: 13px;
      font-weight: 400;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      text-align: center;
  }

  > span.ranking {
      font-weight: bold;
      color : var(--skyblue-color);
  }
}

.dolgo-start-banner{
    height: 60px;
    margin: 16px 20px 0;
    border-radius: 8px;
    position: relative;
    background: linear-gradient(90deg, #EB73A9 0%, #7379EC 100%);
    color: white;
    cursor: pointer;

>div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    height: 100%;
    > .arrow {
      position: absolute;
      right: 16px;
      width: 16px;
      height: 12px;
      transform: rotate(90deg);
      background-image: url('data:image/svg+xml,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L6 1.5L11 6.5" stroke="%23FFFFFF" stroke-width="2"/></svg>');
      background-size: 100%;
      background-repeat: no-repeat;
    }

> span {
&:nth-child(1) {
     font-size: 11px;
     font-weight: 400;
 }

&:nth-child(2) {
     font-size: 18px;
     font-weight: 800;
     line-height: 21px;
 }
}
}

> .left {
    position: absolute;
    width: 124.22px;
    height: 87.21px;
    top: 0px;
    left: 0px;
}

>.right{
    position: absolute;
    width: 77.37px;
    height: 54.32px;
    top: 0px;
    right: 0px;
}


}

.partner-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0px 20px;

    >.ranking {
      border-color: var(--skyblue-color);
      background-color: #EBF7FF;
      cursor: pointer;

      .mainPartner--cnt--name{
        font-weight: bold;
        text-align: center;
        color: var(--skyblue-color);
      }
    }

> div,
> .contents-wrapper > div{
    border: 1px solid #DDDDDD;
    padding: 10px;
    border-radius: 8px;
    height: 68px;

> a {
    display: flex;
    align-items: center;
    gap: 8px;

> .mainPartner--cnt--img {
    min-width: 48px;
    width: 48px;
    height: 48px;
}

>.mainPartner--cnt--name{
    height: 100%;
    text-align: left;
}
}
}
}

.mainSec--tit > h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;


> a {
    color: #717171;
    font-size: 12px;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
}

> .refresh {
    width: 20px;
    height: 20px;
    background-color: var(--skyblue-color) !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    &:after{
      content:'';
      display: inline-block;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_570_720)"><path d="M8.46719 2.99829C8.14698 2.45235 7.74278 2.02191 7.24409 1.68595C4.91863 0.116396 1.78477 1.33424 1.11286 4.06915C1.06037 4.27913 0.94488 4.43136 0.729657 4.48385C0.535431 4.53109 0.367452 4.47335 0.230969 4.32637C0.115483 4.19514 0.0892367 4.03766 0.125982 3.86443C0.551179 1.93792 2.15223 0.394611 4.11023 0.0796504C6.04199 -0.230061 7.64829 0.389362 8.91863 1.88018C8.94488 1.90642 8.96588 1.93792 9.01312 1.99041C9.01312 1.79619 9.01312 1.63346 9.01312 1.47073C9.02362 1.21351 9.21785 1.01928 9.48031 0.998286C9.71128 0.977288 9.94226 1.14527 9.99475 1.37624C10.0105 1.43398 10.0105 1.49172 10.0105 1.54947C10.0105 2.18464 10.0105 2.81456 10.0105 3.44973C10.0105 3.80144 9.81102 4.00091 9.45932 4.00091C8.8084 4.00091 8.15223 4.00091 7.50131 4.00091C7.23884 4.00091 7.04462 3.81193 7.01312 3.55472C6.98687 3.32375 7.13911 3.09277 7.37008 3.02978C7.43832 3.01403 7.50656 3.00878 7.58005 3.00878C7.86876 3.00878 8.15748 3.00878 8.47244 3.00878L8.46719 2.99829Z" fill="white"/><path d="M0.997375 7.99955C0.997375 8.18328 0.997375 8.33551 0.997375 8.48774C0.997375 8.7817 0.782152 9.00218 0.498688 9.00218C0.220472 9.00218 0 8.7817 0 8.48774C0 7.82632 0 7.16491 0 6.50349C0 6.19903 0.209974 5.99955 0.514436 5.99955C1.1706 5.99955 1.82677 5.99955 2.48294 5.99955C2.7769 5.99955 2.99738 6.21477 3.00262 6.49299C3.00262 6.77645 2.78215 6.99168 2.48294 6.99693C2.17848 6.99693 1.87402 6.99693 1.54856 6.99693C1.5853 7.05467 1.6063 7.10191 1.63255 7.13866C2.49344 8.49299 4.07874 9.2279 5.62205 8.94968C7.33858 8.63997 8.4252 7.61635 8.89239 5.93656C8.97638 5.6426 9.18635 5.46412 9.43832 5.50086C9.76378 5.54286 9.94751 5.82107 9.86877 6.15178C9.75853 6.61372 9.5958 7.05467 9.35433 7.46937C8.50919 8.91294 7.25459 9.77383 5.5958 9.96281C3.74803 10.1728 2.22572 9.51661 1.04987 8.06779C1.03937 8.05204 1.02362 8.04155 0.992126 8.0048L0.997375 7.99955Z" fill="white"/></g><defs><clipPath id="clip0_570_720"><rect width="10.0105" height="10" fill="white"/></clipPath></defs></svg>') no-repeat center;
      background-position: center;
    }
  }
}

.news--list-item{
    padding-bottom: 16px !important;

.img-grid{
    display: grid;
    grid-template-columns: 70% 30%;
    grid-template-rows: 50% 50%;
    border-radius: 8px;
    border: 1px solid #DDDDDD;
    gap: 1px;
    overflow: hidden;
    max-height: 160px;
    margin-bottom: 10px;

> .left {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    background-color: lightblue; /* 배경색 예시 */
}

img {
    object-fit: cover;
    max-height: none;
    height: 100%;
    object-fit: cover;
}
}

.card--item--tit {
    margin: 0;
    width: auto;
    height: auto;
}
}

.news--list-item-date{
    display: flex;
    margin-top: 12px;
    font-size: 12px;

>.date {
    font-size: 12px;
    font-weight: 400;
    color : #717171;

&::after{
     content: '|';
     color : #717171;
     margin: 0px 8px;
 }
}
> dd {
    color: var(--skyblue-color);
    font-weight: 700;
    font-size: 12px;
}
}

.sort-selector {
    font-size: 12px;
    appearance: auto;
    color:#888888;
}

/****** 반응형 *******/
@media screen and (max-width:1500px) {

}
@media screen and (max-width:1400px){

}
@media screen and (max-width:1300px){

}

@media screen and (max-width:1200px){

}

@media screen and (max-width:1024px){

}

@media screen and (max-width:768px) {

}

@media screen and (max-width:480px){

}

@supports not ( height:100dvh ){
    .modal{height:100vh;}
    .cancel{height:calc(100vh - 130px);}
}

@media print{
    .wrap{ width:95%; }
    .header{ display:none; }
    .tit01{ margin:60px 0 50px; }
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis.notice--link02 {
    width: 100%;
    display: inline-block;
}

.dolgo-intro {
  .intro-banner {
    height: 180px;
    background: linear-gradient(90deg, #53A8E2 0%, #737AEB 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;

    > span {
      color: white;
      font-size: 15px;
      font-weight: 400;
    }

    >.stack {
      opacity: 0.1;
    }
  }

  .intro-section{
    border-bottom: 8px solid #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 60px;

    >.title{
      font-size: 22px;
      margin-top: 60px;
    }

    >.title-sub{
      font-size: 12px;
      color: #717171;
      margin-top: 12px;
      text-align: center;
      margin-bottom: 16px;
    }
  }

  .intro-title{
    font-size: 22px;
    margin-top: 60px;
    text-align: center;

    > div {
      display: flex;
      justify-content: center;
      align-items: end;
      margin-bottom: 2px;
      > span {
        color: var(--skyblue-color);
        font-weight: 700;
        margin-left: 6px;
      }

      > img {
        display: inline;
        margin-left: 6px;
      }
    }

  }

  .date {
    font-size: 10px;
    width: 100%;
    text-align: right;
    font-weight: 400;
    color: #999999;
    margin-bottom: 12px;
    margin-right: 20px;
  }

  .intro-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3 , 1fr);
    padding: 0px 20px;
    gap: 20px 0px;

    > .grid-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .img {
        width: 64px;
        height: 64px;
        background-color: #F1F9FF;
        margin-bottom: 8px;
        border-radius: 21px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .title {
        font-size: 11px;
        color: #717171;
      }
      .amount {
        font-size: 14px;
        font-weight: 700;
        color: #161616;
      }
    }
  }

  .intro-footer{
    height: 300px;
    position: relative;
    background-color: var(--skyblue-color);
    padding: 80px 20px;
    overflow: hidden;

    >.stack {
      right: 0px;
      top: 0px;
    }

    > div{
      font-size: 22px;
      color: white;
      margin-bottom: 12px;
    }

    > span{
      font-size: 12px;
      font-weight: 400;
      color: white;
    }
  }

  .box-wrapper{
    width: 100%;
    padding: 0px 20px;
  }

  .box {

    .box-header {
      display: flex;
      gap: 16px;
      align-items: center;
      padding: 24px 20px;
      border-bottom: 1px solid #EEEEEE;
      border-top: 1px solid #EEEEEE;

      >.icon{
        background-image: url('data:image/svg+xml,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L6 1.5L11 6.5" stroke="%23888888" stroke-width="2"/></svg>') no-repeat center;
      }

      > img {
        width: 32px;
        height: 32px;
      }

      .box-text{
        flex: 1;

        > .title {
          font-size: 14px;
          font-weight: 500;
          color: #161616;
        }

        > .desc {
          font-size: 11px;
          font-weight: 400;
          color: #717171;
        }
      }
    }

    .box-contents{
      display: none;
      padding: 24px 20px;
      background-color: #F1F9FF;
      font-size: 12px;
      font-weight: 400;
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #EEEEEE;
      line-height: 20px;

      .chip {
        background-color: #464646;
        color: white;
        font-size: 10px;
        font-weight: 700;
        width: fit-content;
        border-radius: 100px;
        padding: 1px 12px;
        margin-top: 16px;
      }

      .contents {
        display: block;
        margin-top: 10px;
      }

      > a {
        color: var(--skyblue-color);
        margin-top: 16px;

        &:after {
          display: inline-block;
          width: 13px;
          height: 10px;
          content: '';
          margin-left: 5px;
          background-image: url('data:image/svg+xml,<svg width="13" height="10" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.16 1L12 5M12 5L8.16 9M12 5H0" stroke="%2353A8E2"/></svg>');
        }
      }
    }
  }
}

.arrow-down {
  width: 14px;
  height: 8px;
  background-image: url('data:image/svg+xml,<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 7L7 1L13 7" stroke="%23999999"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(180deg);
  transition: transform 0.5s;
}

.arrow-down.active {
  transform: rotate(0deg);
}

.stack {
  position: absolute;
}

.fs22{
  font-size: 22px;
}

.inset {
  inset: 0;
}

.section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 30px;
}

.section-title{
  color: #717171;
  font-size: 13px;
  font-weight: 400;
  display: flex;
  gap: 6px;
}

.column {
    display: flex;
    flex-direction: column;
}

.gap30 {
    gap: 30px;
}

.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.payment-method-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.payment-method-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.g8 {
    gap: 8px;
}

.row {
    display: flex;
}

.nowrap{
    flex-wrap: nowrap;
    white-space: nowrap;
}


.description-box {
    padding: 16px;
    background-color: #f6fbfe;
    border: 1px solid #dddddd;
    font-size: 14px;
    color: #717171;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
}

.description-title {
    font-size: 14px;
    font-weight: 500;
    color: #161616;
    margin-bottom: 8px;
}

.description-content {
    font-size: 12px;
    color: #161616;
}

.description-sub {
    font-size: 12px;
    color: #717171;
}

.bold {
    font-weight: bold;
}

.footer-amount-title {
    font-weight: 400;
    font-size: 12px;
    margin-right: 10px;
}

.footer-amount {
    font-weight: 700;
    font-size: 18px;
    color: black;
}

.footer-amount-total {
    font-weight: 400;
    font-size: 11px;
    color: #717171;
}

.footer-amount-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.error {
  color: #E44549;
  font-size: 12px;
}

.pencil{
  width: 12px;
  height: 12px;
  background-image: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_311_436)"><path d="M7.70231 1.53473C8.6282 2.46062 9.54329 3.37619 10.4715 4.30443C10.4255 4.35375 10.371 4.41576 10.3128 4.47401C8.10489 6.68235 5.88904 8.88223 3.6962 11.1056C3.33448 11.4725 2.9568 11.6787 2.44758 11.7252C1.80354 11.7839 1.16467 11.8981 0.524385 11.9911C0.150457 12.0451 -0.0444934 11.8572 0.00999866 11.4824C0.128378 10.664 0.245348 9.84618 0.374062 9.02927C0.392383 8.91418 0.447814 8.78405 0.528613 8.70326C2.90935 6.315 5.29573 3.93238 7.68164 1.54882C7.6868 1.54365 7.69479 1.54037 7.70278 1.5352L7.70231 1.53473Z" fill="white"/><path d="M11.0431 3.74125C10.1092 2.80737 9.19411 1.89275 8.30908 1.00773C8.5402 0.754055 8.75441 0.459986 9.02546 0.235441C9.43463 -0.103725 10.0312 -0.0689633 10.4211 0.297449C10.8641 0.714125 11.2963 1.14396 11.7111 1.58882C12.1052 2.0116 12.0921 2.64343 11.6993 3.07983C11.4908 3.31142 11.261 3.52329 11.0431 3.74219V3.74125Z" fill="white"/></g><defs><clipPath id="clip0_311_436"><rect width="12" height="12" fill="white"/></clipPath></defs></svg>');

}

.help-message{
  position: relative;
  cursor: pointer;
  width: 14px;
  height: 14px;
  background-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 7.43605C0 7.14423 0 6.85268 0 6.56086C0.00822028 6.51647 0.0175366 6.47263 0.0243868 6.42797C0.0764486 6.09094 0.104946 5.74842 0.183038 5.41769C1.06836 1.66404 4.71762 -0.641473 8.4973 0.158087C11.5928 0.812969 13.9073 3.57416 14.0005 6.73513C14.055 8.58113 13.4856 10.2156 12.2693 11.6078C11.1889 12.845 9.82871 13.6059 8.20904 13.8936C7.95449 13.9388 7.69665 13.9649 7.44045 13.9999H6.56499C6.52991 13.9923 6.49539 13.9802 6.46004 13.9775C5.06479 13.867 3.809 13.3892 2.70886 12.5252C1.29278 11.413 0.420056 9.96707 0.104672 8.19149C0.060008 7.94132 0.0342512 7.68786 0 7.43605ZM6.91791 3.48456C6.53951 3.48346 6.17233 3.54292 5.83558 3.72322C5.45936 3.92462 5.16727 4.20082 5.10699 4.65102C5.07273 4.90776 5.20097 5.11217 5.43634 5.20095C5.68925 5.29658 5.86983 5.25 6.01916 5.00367C6.25317 4.61759 6.59814 4.50305 7.02094 4.53867C7.37578 4.56854 7.62513 4.73623 7.69445 5.0012C7.75282 5.22424 7.70596 5.43688 7.55718 5.6032C7.3977 5.78185 7.2196 5.94927 7.02724 6.09176C6.44278 6.52497 6.22741 7.10724 6.29098 7.81281C6.31454 8.07367 6.42661 8.19149 6.68637 8.21149C6.79844 8.22026 6.91517 8.21423 7.02532 8.19286C7.23302 8.15231 7.32509 8.02955 7.32975 7.81719C7.33167 7.73527 7.33084 7.65306 7.33386 7.57113C7.34427 7.28945 7.44839 7.0486 7.65582 6.85597C7.73583 6.78171 7.8205 6.71211 7.90517 6.64334C8.21178 6.39426 8.48388 6.11587 8.67349 5.76459C9.10807 4.959 8.82913 4.10574 8.00408 3.71226C7.65993 3.54813 7.29495 3.48675 6.91709 3.48429L6.91791 3.48456ZM6.0978 9.54921C6.09177 9.94625 6.40497 10.2742 6.79214 10.2764C7.17439 10.2786 7.49744 9.9594 7.50183 9.57524C7.50621 9.18724 7.19548 8.86446 6.81132 8.85788C6.4236 8.85131 6.10356 9.16121 6.0978 9.54948V9.54921Z" fill="%23D5D5D5"/></svg>');

  > div {
    display: none;
  }

  &:hover{
      > div {
        display: inline;
      }
  }

  > div {
      top: 20px;
      width: max-content;
      position: absolute;
      background-color: white;
      padding: 14.5px 16px ;
      gap: 10px;
      border-radius: 8px;
      border: 1px solid #DDDDDD;
      opacity: 0px;
      box-shadow: 0px 4px 10px 0px #00000033;
      left: -21px;
      font-size: 12px;
      color: #161616;
      z-index: 1;
  }
}

.spacer {
  flex: 1;
}

.btn-ghost {
  border : 1px solid
}

.fs12{ font-size:12px; }
.h36  { height:36px; }
.mb20 { margin-bottom:20px; }
.mb14 { margin-bottom:14px; }
.bold {font-weight: bold;}
.text-underline { text-decoration: underline; }
.ml4 { margin-left:4px; }
.border-r4 { border-radius:4px; }
.mv24 { margin:24px 0; }
.mh20 {
    margin-left: 20px;
    margin-right: 20px;
}
.mt8  { margin-top:8px !important; }
.m2420 { margin:24px 20px; }
.mt10 { margin-top:10px; }

.partner-profile {
  .profile {
    display: flex;
    flex-direction: column;
  }
  .profie-subtitle {
    font-size: 14px;
    font-weight: 700;
  }
  .profile-name span {
    font-size: 18px;
    font-weight: 700;
  }
  .profile-img {
    width: 140px;
    height: 140px;
    border: 1px solid #dddddd;
    border-radius: 24px;
    overflow: hidden;
  }
  .profile-description {
    font-size: 12px;
    text-align: center;
  }
  .detail--now div {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 400;

    > span:first-child {
      color: #717171;
      margin-bottom: 2px;
    }
  }
  .detail-number {
    font-weight: 700;
  }
}

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

.receipt-description {
    font-size: 12px;
    font-weight: 400;
    color: #717171;
    margin-bottom: 20px;

p {
    display: inline;
    font-weight: 700;
    color: #161616;
}
}

.section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 30px;
}

.section-title{
    color: #717171;
    font-size: 13px;
    font-weight: 400;
    display: flex;
    gap: 6px;
}

.description-box {
    padding: 20px;
    background-color: #f7f7f7;
    border: 1px solid #dddddd;
    font-size: 14px;
    color: #717171;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 8px;
> span{
    font-size: 12px;
}
}

.description-box > .sub {
    background-color: white;
    padding: 20px;
    display: flex;
    gap: 10px;
    color : #717171;
    font-size: 12px;
}


.description-box > .sub > .sub-content {
    color: var(--skyblue-color);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.description-box > .sub > .sub-content > .sub-li {
    display: flex;
    gap: 8px;
    color: #161616;
    font-weight: 500;
}

.description-box > .sub > .sub-content > .sub-li > div {
    display: flex;
    gap: 8px;
    flex-direction: column;
}

.description-box > .sub > .sub-content > .sub-li .sub-desc {
    color: #717171;
}

.description-box > .sub > .sub-header {
    color: var(--skyblue-color);
    font-weight: 600;
}


.c-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    align-items: start;
    line-height: 18px;
}
.c-checkbox > div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.c-checkbox a {
    color: var(--skyblue-color);
    font-weight: bold;
    text-decoration: underline;
    border-bottom: none;
    line-height: inherit;
}


.c-checkbox input[type="checkbox"] {
    display: none;
}

.c-checkbox .checkmark {
    width: 20px;
    min-width: 20px;
    height: 20px;
    background-color: white;
    border: 2px solid var(--skyblue-color);
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    transition: background-color 0.3s, border-color 0.3s;
}

.c-checkbox input[type="checkbox"]:checked + .checkmark {
    background-color: var(--skyblue-color);
    border-color: var(--skyblue-color);
}

.c-checkbox .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.c-checkbox input[type="checkbox"]:checked + .checkmark::after {
    display: block;
}

.c-checkbox label {
    cursor: pointer;
}

.black {
    color: black;
}
.border-box{
  border: 1px solid #DDDDDD;
}

.link {
  color: #717171;
  font-size: 12px;
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
}

.help-link {
    display: block;
    text-align: right;
    margin-right: 2px;
    margin-top: 10px;
    color: var(--skyblue-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    &:after {
        display: inline-block;
        width: 13px;
        height: 10px;
        content: '';
        margin-left: 5px;
        background-image: url('data:image/svg+xml,<svg width="13" height="10" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.16 1L12 5M12 5L8.16 9M12 5H0" stroke="%2353A8E2"/></svg>');
    }
}

.account-pending-wrap .help-message {
    display: inline-block;
    position: relative;
    top: 1px;
}
.account-pending-wrap .help-message div {
    left: -214px;
    max-width: calc(100vw - 40px)
}

.hidden-scroll {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hidden-scroll::-webkit-scrollbar {
    display: none;
}

.invalid-msg-wrap {
    display: flex;
    justify-content: center;
    text-align: center;
}
.invalid-msg {
    display: none;
    color: #e44549;
    font-size: 12px;
}

.login-modal-join {
    display: none;
    padding: 0 20px;
    max-height: 80vh;
}
.login-modal-join-content {
    padding-bottom: 95px;
}
.login-modal-join-content.errored {
    padding-bottom: 152px;
}
.login-modal-join-bottom {
    position: fixed;
    bottom: 0;
    width: calc(100% - 40px);
    padding: 20px 0;
    background-color: #fff;
}