/* color system */
* {
    border-color:var(--gr150);
}
:root {
    /*
    color system
    - Black & white
    */
    --bl:#16191C;
    --wh:#fff;

    /*
    color system
    - Black Opacity
    */
    --bl90:rgba(22, 25, 28, 0.90);
    --bl80:rgba(22, 25, 28, 0.80);
    --bl60:rgba(22, 25, 28, 0.60);
    --bl50:rgba(22, 25, 28, 0.50);
    --bl40:rgba(22, 25, 28, 0.40);
    --bl30:rgba(22, 25, 28, 0.30);
    --bl20:rgba(22, 25, 28, 0.20);
    --bl10:rgba(22, 25, 28, 0.10);
    --bl04:rgba(22, 25, 28, 0.04);

    /*
    color system
    - Gray Scale
    */
    --gr0:#FCFDFE;
    --gr50:#F8F9FA;
    --gr100:#F1F3F5;
    --gr150:#DEE2E6;
    --gr200:#ADB5BD;
    --gr300:#868E96;
    --gr400:#6D757E;
    --gr500:#5F666D;
    --gr600:#51575C;
    --gr700:#3B4044;
    --gr800:#31363A;
    --gr900:#212529;

    /*
    color system
    - primary color
    primary main : pri700
    */
    --pri50:#FEF2DE;
    --pri100:#FFE0B2;
    --pri200:#FFCB80;
    --pri300:#FDB54C;
    --pri400:#FDA525;
    --pri500:#FF9700;
    --pri600:#FB8C00;
    /*main color*/
    --pri700:#FF7A00;
    --pri800:#EF6C02;
    --pri900:#E75005;

    --pria100:#FED07E;
    --pria200:#FDA93F;
    --pria400:#FF8E00;
    /*hover color*/
    --pria700:#FD6B00;


    /*
    color system
    - Secondary color
    Secondary main : sec500
    */
    --sec50:#FFFFE0;
    --sec100:#FFFFBC;
    --sec200:#EAFF95;
    --sec300:#D5FF6A;
    --sec400:#C4FF43;
    --sec500:#B1FF00;
    --sec600:#9EEE00;
    --sec700:#89D900;
    --sec800:#71C600;
    --sec900:#42A300;
    
    --seca100:#F9FF76;
    --seca200:#DEFF00;
    --seca400:#98FF00;
    --seca700:#86FF00;

    /*
    color system
    - Tertiary color
    Tertiary main : sec500
    */
    --ter50:#FFE3FF;
    --ter100:#F3BFFF;
    --ter200:#D394FF;
    --ter300:#B267FF;
    --ter400:#9A41FF;
    --ter500:#8300FF;
    --ter600:#7600FC;
    --ter700:#6800F0;
    --ter800:#5500E9;
    --ter900:#3000DA;

    --tera100:#D877FF;
    --tera200:#951EFF;
    --tera400:#8600FF;
    --tera700:#7F00FF;

    /*
    color system
    - systme color
    Tertiary main : sec500
    */
    --success:#3BD59E;
    --danger:#FF5847;
    --danger_light:#FF7063;
    --danger_dark:#E54F40;
    --danger_disabled:#FFBCB6;
}

a {
cursor: pointer;
}

/*
scroll
*/
/* 스크롤바 스타일링 - body */

body::-webkit-scrollbar {
    width: 16px; /* 스크롤바 너비 */
}

body::-webkit-scrollbar-thumb {
    background-color: #88888886; /* 스크롤바 색상 */
    border-radius: 999px; /* 스크롤바 모서리 둥글게 */
    border: 4px solid #fff;
}

body::-webkit-scrollbar-track {
    background-color: #ffffff00; /* 스크롤바 트랙 색상 */
    border-radius: 5px; /* 스크롤바 트랙 모서리 둥글게 */
}

/* 스크롤바 스타일링 - box */
.scrollable-containerL::-webkit-scrollbar {
    width: 16px; /* 스크롤바 너비 */
}

.scrollable-containerL::-webkit-scrollbar-thumb {
    background-color: #88888886; /* 스크롤바 색상 */
    border-radius: 999px; /* 스크롤바 모서리 둥글게 */
    border: 4px solid #fff;
}

.scrollable-containerL::-webkit-scrollbar-track {
    background-color: #ffffff00; /* 스크롤바 트랙 색상 */
    border-radius: 5px; /* 스크롤바 트랙 모서리 둥글게 */
}


/* 스크롤바 스타일링 - box */
.scrollable-container::-webkit-scrollbar {
    width: 10px; /* 스크롤바 너비 */
}

.scrollable-container::-webkit-scrollbar-thumb {
    background-color: #88888875; /* 스크롤바 색상 */
    border-radius: 8px; /* 스크롤바 모서리 둥글게 */
    border: 2px solid #fff;
}

.scrollable-container::-webkit-scrollbar-track {
    background-color: #ffffff00; /* 스크롤바 트랙 색상 */
    border-radius: 5px; /* 스크롤바 트랙 모서리 둥글게 */
}



.col_tit{color:var(--gr900, #212529);}
.col_tit2{color:var(--gr900, #212529);}
.col_body{color:var(--gr700,#3B4044);}
.col_caption{color:var(--gr400, #6D757E);}
.col_pri{color:var(--pri700, #FF7A00);}

/*
font style
*/

/*
font style
- basic
responsive parent font size
*/
body{
    font-size: 16px;
    font-family: 'Pretendard', sans-serif;
    font-style: normal;
}

/*
font style
- font-weight
*/

.bd{
    font-weight: 700;
}
.sb{
    font-weight: 600;
}

.md{
    font-weight: 500;
}
.rg{
    font-weight: 400;
}

/*
font style
- heading
*/

.hd{
    line-height: 140%;
    letter-spacing: -0.02em;
}

.hd1{
    font-size: 2.5rem;
}

.hd2{
    font-size: 2rem;
}

.hd3{
    font-size: 1.75rem;
}

.hd4{
    font-size: 1.5rem;
}

.hd5{
    font-size: 1.375rem;
}

/*
font style
- body
*/
.bdFont{
    line-height: 160%;
    letter-spacing: -0.025rem;
}

.bd1{
    font-size: 1.25rem;
}
.bd2{
    font-size: 1.125rem;
}
.bd3{
    font-size: 1rem;
}
.bd4{
    font-size: 0.875rem;
}
.bd5{
    font-size: 0.75rem;
}

/*
font style
- label
*/
.lb{
    line-height: 100%;
    letter-spacing: -0.02rem;
}

.lb1{
    font-size: 1em;
}
.lb2{
    font-size: 0.875rem;
}

/*
font style
- caption 
*/

.cap{
    line-height: 140%;
    letter-spacing: -0.02rem;
}

.cap1{
    font-size: 0.875rem;
}
.cap2{
    font-size: 0.8125rem;
}
.cap3{
    font-size: 0.75rem;
}
.cap4{
    font-size: 0.6875rem;
}

/*
font style
- button
*/

.btn{
    line-height: 100%;
    letter-spacing: -0.02rem;
}
.btn1{
    font-size: 1.125rem;
}

.btn2{
    font-size: 1rem;
}

.btn3{
    font-size: 0.875rem;
}

.btn4{
    font-size: 0.75rem;
}

.txtCenter{
	text-align:center;
}
/*
font style
- span
*/
.pri{
    color: var(--pri700, #FF7A00);
    
}

.lightGray{
    color:var(--gr400,#6D757E);
}

.underLineGray{
    text-decoration: var(--gr400,#6D757E) underline;
}

/*
button style
*/
.roundBtn{
    border-radius: 999px;
    font-size: 0px;
}
.roundBtn_40{
    width: 40px;
    height: 40px;
    border:1px solid var(--pri400);
}
.roundBtn_call{
    background:url(../images/icons/phone_pri_full.svg) center center/24px no-repeat;
}
.btnSytle01{
    height: 48px;
    padding: 12px 40px;
    border-radius: 8px;
    background: var(--pri700, #FF7A00);
    color: var(--wh, #fff);
    display: flex;
    justify-content: center;
    align-items: center;
}

.btnSytle01:disabled,.btnSytle01:hover:disabled{
    background: var(--pri50, #FEF2DE);
    color: var(--pri600, #FB8C00);
}


.hasthumbListBtnWrap.flxBox{
    justify-content: space-between;
}

.txtBtn{
    color: var(--gr500, #5F666D);
}

.goToStyleBtn{
    color: var(--g900,#16191C);
}

.btnSytle03{
    height: 48px;
    border: 1px solid var(--gr150,#DEE2E6 );
    background: #fff;
    border-radius: 8px;
    color: var(--gr900,#212529);
}

.btnSytle03:disabled{
color:var(--gr200,#ADB5BD);
}


.fullWidthBtn{
    width: 100% !important;
}

/*줄바꿈금지*/

.notBreak{
    white-space: nowrap;
}

.keepAll{
	word-break: keep-all;
}

/*
chipBtn
chip button
*/

.chipBtnSt1{
    padding: 12px 20px 12px 28px;
    display: flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--bl30, rgba(22, 25, 28, 0.30));
    transition: 0.2s ease;
    color: var(--gr900, #212529);
}

.chipBtnSt2{
    color: var(--gr500, #212529);
    padding: 12px 20px 12px 20px;
    display: flex;
    align-items: center;
    border-radius: 999px;
    border: none;
    transition: 0.2s ease;
    background: #fff;
    transition: background-color 0.2s ease-in-out;   
}

.chipBtnSt3{
    padding: 12px 20px 12px 20px;
    display: flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--bl30, rgba(22, 25, 28, 0.30));
    transition: 0.2s ease;
    color: var(--gr900, #212529);
}

.chipBtnSt2.on{
    color: #fff;
    background: var(--pri700, #FF7A00);
}

.blStChipWrap .boxChipGroup.flxBox{
    justify-content: center;
}


.blStChipWrap li{
    flex-shrink: 0;
}

.blStChipWrap .chipBtnSt2{
    padding: 8px 16px;
    background-color: var(--gr50);
}

.blStChipWrap .chipBtnSt2.on{
    color: #fff;
    background: var(--gr900);
}

.bdSearchWrap{
    width: 100%;
    padding-top: 32px;
    padding-bottom: 32px;
    background-color:var(--gr50);
    border: 1px solid var(--gr100);
    display: flex;
    align-items: center;
    justify-content: center;
    gap:12px;
}

.bdSearch_select .cont_select_int li:nth-child(1){
    display: block;
}

.bdSearchWrap .miniQuickSearchFormWrap{
    width: 400px;
}

.bdSearchWrap .select_mate[data-selec-open="true"]{
    box-shadow:none;
}

.bdSearchWrap .select_mate{
    height: 48px;
    width: 140px;
    flex-shrink: 0;
}

.hasIconChip::after{
    content: "";
    width: 24px;
    height: 24px;
    display: inline-block;
}

.chipBtnSt1.hasIconChip.hasIconArrow::after{
    background: url(../images/icons/arrowRightSmall_gr.svg) center center/contain no-repeat;
    transition: background-image 0.2s ease;    
}

.chipBtnSt1.hasIconChip.hasIconPlus::after{
    background: url(../images/icons/plus_gr.svg) center center/60% no-repeat;
    transition: background-image 0.2s ease;    
}

.chipFilterBtn{
    border: 1px solid var(--gr150,#DEE2E6);   
    border-radius: 4px;
    padding: 8px 12px;
}


.chipFilterBtn.on{
    color:var(--pria700, #FD6B00);
    border: 1px solid var(--a400, #FF8E00);
    background: #FFFBF4;
}
.chipFilterBtn.on:hover{
	color:var(--pria700, #FD6B00);
}

/* hover */

/*input*/
input[type="select"]:focus {
    outline: none; /* 포커스되었을 때 outline 제거 */
    border: none; /* 포커스되었을 때 border 제거 */
    -webkit-appearance: none; /* Safari 및 Chrome의 기본 스타일 제거 */
    -moz-appearance: none; /* Firefox의 기본 스타일 제거 */
    appearance: none; /* IE11 및 Edge의 기본 스타일 제거 */
}


/*input 숫자필드에서 제거*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/*라디오버튼 스타일변경*/
input[type='radio'] {
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    width: 20px;
    height: 20px;
    background-color: var(--gr150,#DEE2E6);
    border-radius: 50%;
    outline: none; 
    cursor: pointer;
    position: absolute;
    top: calc(50% - 10px);
    left: 0;
  }

.radioContainer > label{
    position: relative;
    padding-left: 32px;
    text-align: left;
}
 
input[type='radio']:checked {
    background-color:#fff;/* 체크 시 내부 원으로 표시될 색상 */ 
    border: 6px solid var(--pri700, #FF7A00); /* 테두리가 아닌, 테두리와 원 사이의 색상 */
}

.radioContainer {
  gap:20px;
  display: flex;
  align-items: center; /* 수직 중앙 정렬을 위해 */
}

/*input range slider css*/
.range-container {
    width: 100%;
    background: #eee;
    height: 4px;
    position: relative;
}

.range-container-thumb {
    position: absolute;
    height: 4px;
    background-color: var(--pri700, #FF7A00);
}

.range-container-thumb span {
    border: 6px solid var(--pri700, #FF7A00);
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    border-radius: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    cursor: pointer;
}

.range-container-number.flxBox{
    justify-content: space-between;
    margin-top: 12px;
}

.range-container-thumb span:nth-child(1) {
    left: 0;
}

.range-container-thumb span:nth-child(2) {
    right: 0;
}

.inputTxtArea{
 min-height: 320px;   
}

/*input checkbox css*/

.checkContainer{
    position: relative;
}

.styled-checkbox {
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    width: 20px;
    height: 20px;
    position: absolute;
}

.styled-checkbox + label {
    position: relative;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.4s ease-in-out;
    word-break: keep-all;
}

.agreeAllGroup .styled-checkbox + label {
    gap: 12px;
}
.agreeGroup:not(.agreeAllGroup) .styled-checkbox + label {
    gap: 4px;
}

.styled-checkbox + label:before {
    content: '';
    display: inline-block;
    vertical-align: text-top;
    width: 20px;
    height: 20px;
    background-color: var(--gr150,#DEE2E6);
    border-radius: 100%;
    flex-shrink: 0;
}

.styled-checkbox + label:after {
    flex-shrink: 0;
}


.styled-checkbox:checked + label:before {
    background:var(--pri700, #FF7A00);
}

.styled-checkbox:disabled + label {
    color: #b8b8b8;
    cursor: auto;
    
}

.styled-checkbox:disabled + label:before {
    box-shadow: none;
    background: #ddd;
}

.styled-checkbox:checked + label:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: url(../images/icons/checksmall_wh.svg) 50% 50% / 24px no-repeat;
}

.styled-checkbox.light-checkbox + label:before{
    background: url(../images/icons/checksmall_gr.svg) 50% 50% / 24px no-repeat;
}

.styled-checkbox.light-checkbox:checked + label::before {
    background: none;
}
.styled-checkbox.light-checkbox:checked + label:after {
    background: url(../images/icons/checksmall_pri.svg) 50% 50% / 24px no-repeat;
}



/*input css*/

input:focus {
    outline: none; /* 포커스 시 외곽선 제거 */
    border: none; /* 포커스 시 테두리 제거 */
}

.inputBoxItem{
    border: 1px solid var(--gr150,#DEE2E6);
    padding: 8px 12px;
    border-radius: 8px;
    position: relative;
    background:var(--gr0,#FCFDFE);
}

.inputBoxItem input{
    white-space: nowrap; /* 줄 바꿈을 허용하지 않음 */
    overflow: hidden; /* 넘치는 부분을 숨김 */
    text-overflow: ellipsis; /* 넘치는 텍스트에 ellipsis 표시 */
    background: none;
}


.inputBoxLabel{
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gr600, #ADB5BD);
}

.inputBoxDesc{
    display: flex;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gr400, #6D757E);
    align-items: center;
}

.inputBoxDesc::before{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../images/icons/checksmall_gr_400.svg) center center / contain no-repeat;
}

.inputBoxItem input{
    font-size: 1rem;
    color: var(--gr900,#212529);
    font-weight: 500;
    font-family: 'Pretendard';
    width: 100%;
}
.inputBoxItem input::placeholder{
    color: var(--gr200, #ADB5BD);
}

.inputBoxItem textarea:focus {
    outline: none; /* 포커스 시 외곽선 제거 */
    box-shadow: none; /* 포커스 시 그림자 효과 제거 (있는 경우) */
}

.inputBoxItem textarea{
    font-size: 1rem;
    color: var(--gr900,#212529);
    font-weight: 600;
    font-family: 'Pretendard';
    width: 100%;
    background: none;
}

.inputBoxItem textarea::placeholder{
    color: var(--gr200, #ADB5BD);
}


/*input css 포커스시*/
.inputBoxItem.focus{
    border: 1px solid var(--gr300,#868E96);
}

.inputBoxItem.focus .inputBoxLabel{
    color:var(--gr900,#212529);
}

/*input css 에러시*/
.error .inputBoxDesc{
    color:var(--danger_dark,#E54F40);
}
.error .inputBoxDesc::before{
    background: url(../images/icons/alert_line_red.svg) center center / contain no-repeat;
}
.error .inputBoxItem{
    border: 1px solid var(--danger_light,#FF7063);
}

 /*파일 업로드*/
 .filebox{
    width:100%;
    gap:12px;
}
.filebox input[type=file]{
    position:absolute;
    left:0;
    top:0;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    border: 0;
    clip:rect(0,0,0,0);
}
.filebox label	{
    display:inline-block;
    height:48px;
    line-height:48px;
    background:var(--gr900);
    color:#fff;
    vertical-align:middle;
    cursor:pointer;text-align:center;
    flex-shrink: 0;
    padding:0  20px;
    flex-shrink: 0;
    border-radius: 8px;
}
.filebox .uploadName{
    color:var(--gr200);
    font-weight: 600;
    width:100%;
    flex-shrink: 1;
    height:48px;
    line-height:48px;
} 
.filebox .uploadName:hover{
    border: 1px solid var(--gr150, #DEE2E6);
} 

.showNoticeDesc{
    display:flex;
    display: flex;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gr400, #6D757E);
    line-height: 120%;
    margin-bottom: 4px;
}
.showNoticeDesc::before{
    content: "*";
    margin-right: 4px;
    width: unset;
    height: unset;
    background: none;
}

/*
button style
- icon button
*/

.btnIcon{
    font-size: 0px;
    padding: 10px;
}

.btnIconTxtBefore,.btnIconTxtAfter{
    display: flex;
    gap: 6px;
    align-items: center;
}


.btnIcon::after,.btnIconTxtAfter::after{
    content: "";
    display: inline-block;
}
.btnIconTxtBefore::before{
    content: "";
    display: inline-block;
    flex-shrink: 0;
}

.ico72::after{
    width: 72px;
    height: 72px;
}

.ico48::after{
    width: 48px;
    height: 48px;
}

.ico36::after{
    width: 36px;
    height: 36px;
}
.ico32::after{
    width: 32px;
    height: 32px;
}

.ico28::after{
    width: 28px;
    height: 28px;
}
.ico24::after{
    width: 24px;
    height: 24px;
}
.ico20::after{
    width: 20px;
    height: 20px;
}

.ico16::after{
    width: 16px;
    height: 16px;
}
.ico14::after{
    width: 14px;
    height: 14px;
}

.btnIconTxtBefore.ico48::before{
    width: 48px;
    height: 48px;
}

.btnIconTxtBefore.ico36::before{
    width: 36px;
    height: 36px;
}
.btnIconTxtBefore.ico32::before{
    width: 32px;
    height: 32px;
}

.btnIconTxtBefore.ico24::before{
    width: 24px;
    height: 24px;
}

.btnIconTxtBefore.ico20::before{
    width: 20px;
    height: 20px;
}

.btnIconTxtBefore.ico16::before{
    width: 16px;
    height: 16px;
}

.btnIconTxtBefore.iconEdit2::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/edit_2.svg) center center/contain no-repeat;
}

.btnIconTxtBefore.iconFilter::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/filter_gr.svg) center center/contain no-repeat;
}

/*select-like-btn*/
.select-like-btnWrap{
    position: relative;
}
.select-like-btn{
    width: 280px;
    color: var(--gr600);
    font-weight: 600;
    background-color: #fff;
    border-radius: 8px;
    transition: all 175ms ease-in-out;
    border: 1px solid var(--gr150, #DEE2E6);
    height: 48px;
    font-size: 0.933rem;
    min-width: 0;
    text-align: left;
    padding: 0 10px;
}
.select-like-btn.on{
    border: 1px solid var(--pri400, #FDA525);
    box-shadow: 0px 4px 8px 0px rgba(255, 122, 0, 0.08);
}

.select-like-btn.on .icon_select_mate{
    transform: rotate(180deg);
}


/*colummIcon*/

.colummIcon::before{
    content: "";
    display: block;
    margin: 0 auto;
    margin-bottom: 4px;
}
.ico24.colummIcon::before{
    width: 24px;
    height: 24px;
}

.colummIcon.iconAll::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/all_gr.svg) center center/contain no-repeat;
}
.colummIcon.iconEdit::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/edit_gr.svg) center center/contain no-repeat;
}

.colummIcon.iconDigital::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/digital_gr.svg) center center/contain no-repeat;
}

.colummIcon.iconCenter::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/center_gr.svg) center center/contain no-repeat;
}

.colummIcon.iconPhonecall::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/phonecall_gr.svg) center center/contain no-repeat;
}

.colummIcon.iconLamp::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/lamp_gr.svg) center center/contain no-repeat;
}

.colummIcon.iconTeach::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/teach_gr.svg) center center/contain no-repeat;
}

.colummIcon.iconBook::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/book_gr.svg) center center/contain no-repeat;
}
.iconTest::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/test_gr.svg) center center/contain no-repeat;
}
.on.colummIcon.iconAll::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/all_pri.svg) center center/contain no-repeat;
}
.on.colummIcon.iconEdit::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/edit_pri.svg) center center/contain no-repeat;
}

.on.colummIcon.iconDigital::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/digital_pri.svg) center center/contain no-repeat;
}

.on.colummIcon.iconCenter::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/center_pri.svg) center center/contain no-repeat;
}

.on.colummIcon.iconPhonecall::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/phonecall_pri.svg) center center/contain no-repeat;
}

.on.colummIcon.iconLamp::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/lamp_pri.svg) center center/contain no-repeat;
}

.on.colummIcon.iconTeach::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/teach_pri.svg) center center/contain no-repeat;
}

.on.colummIcon.iconBook::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/book_pri.svg) center center/contain no-repeat;
}

.on.colummIcon.iconTest::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/test_pri.svg) center center/contain no-repeat;
}


/* icon button */
.iconAppApple::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/app_apple.svg) center center/contain no-repeat;
}
.iconAppGoogle::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/app_google.svg) center center/contain no-repeat;
}
.iconDownload::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/download_gr.svg) center center/contain no-repeat;
}
.iconPlusSmall::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/plus_small_gr.svg) center center/contain no-repeat;
}
.iconMinusSmall::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/minus_small_gr.svg) center center/contain no-repeat;
}
.iconPlus::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/plus_gr.svg) center center/contain no-repeat;
}
.iconMinus::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/minus_gr.svg) center center/contain no-repeat;
}
.iconMap::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/map_gr.svg) center center/contain no-repeat;
}
.iconCopy::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/copy_gr.svg) center center/contain no-repeat;
}
.iconShare::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/share_gr.svg) center center/contain no-repeat;
}
.iconCatalog::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/catalog_gr.svg) center center/contain no-repeat;
}
.iconFilter::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/filter_gr.svg) center center/contain no-repeat;
}
.iconSelectArrow::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/arrowFill_gr.svg) center center/contain no-repeat;
}
.iconEdit2::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/edit_2.svg) center center/contain no-repeat;
}

.iconSearch::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/search_gr.svg) center center/contain no-repeat;
}

.iconArrowDBLeftSmall::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/arrowDBLeftSmall_gr.svg) center center/contain no-repeat;
}

.iconArrowDBRightSmall::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/arrowDBRightSmall_gr.svg) center center/contain no-repeat;
}

.iconHamburger::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/hamburger_gr.svg) center center/contain no-repeat;
}

.iconPause::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/pause_gr.svg) center center/contain no-repeat;
}

.iconPlay::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/play_gr.svg) center center/contain no-repeat;
}

.iconClose::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/close_gr.svg) center center/contain no-repeat;
}
.iconDigital::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/digital_gr.svg) center center/contain no-repeat;
}
.iconPaper::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/paper_gr.svg) center center/contain no-repeat;
}
.iconBook::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/book_gr.svg) center center/contain no-repeat;
}
.iconToy::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/toy_gr.svg) center center/contain no-repeat;
}

.iconAlert::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/alert_gr.svg) center center/contain no-repeat;
}

.iconReset::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/rotate_gr.svg) center center/contain no-repeat;
}

.iconOutlink::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/newTab_gr.svg) center center/contain no-repeat;
}

.iconReset.btnIconTxtBefore::after{
    display: none;
}
.iconReset.btnIconTxtBefore::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/rotate_gr.svg) center center/contain no-repeat;
}

.btnIconTxtBefore.iconSearch::before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/search_gr.svg) center center/contain no-repeat;
}
.iconArrow::after{
    background: url(../images/icons/arrowLeft_gr.svg) center center/cover no-repeat;
    border-radius: 100%;
    transition: 0.1s ease;
}
.iconArrowSmall::after{
    background: url(../images/icons/arrowRightSmall_gr.svg) center center/cover no-repeat;
    border-radius: 100%;
    transition: 0.1s ease;
}
.iconArrowLSmall::after{
    background: url(../images/icons/arrowLeftSmall_gr.svg) center center/cover no-repeat;
    border-radius: 100%;
    transition: 0.1s ease;
}
.iconArrowRound::after{
    background: url(../images/icons/arrowRightSmall_gr.svg) center center/cover no-repeat;
    border-radius: 100%;
        border: 1px solid var(--gr150, #DEE2E6);
    transition: 0.1s ease;
}

.iconPlusRound::after{
    background: url(../images/icons/plus_gr.svg) center center/60% no-repeat;
    border-radius: 100%;
    border: 1px solid var(--gr150, #DEE2E6);
    transition: 0.1s ease;
}

.iconArrowbottom::after{
    background: url(../images/icons/arrowRightSmall_gr.svg) center center/cover no-repeat;
    border-radius: 100%;
    transition: 0.1s ease;
    transform: rotate(-90deg);
}

.iconPlace::after{
    background: url(../images/icons/place_gr.svg) center center/cover no-repeat;
    border-radius: 100%;
    transition: 0.1s ease;
}

.iconSignup::after{
    background: url(../images/icons/signup_wh.svg) center center/cover no-repeat;
    border-radius: 100%;
    transition: 0.1s ease;
}
.iconHome::after{
    background: url(../images/icons/home_gr.svg) center center/cover no-repeat;
    border-radius: 100%;
    transition: 0.1s ease;
}

.iconGift::after{
    background: url(../images/icons/gift_gr.svg) center center/cover no-repeat;
    border-radius: 100%;
    transition: 0.1s ease;
}

.iconList::after{
    background:url(../images/icons/list_gr.svg) center center/cover no-repeat;
    border-radius: 100%;
    transition: 0.1s ease;
}

.iconLinkHistory::after{
    background:url(../images/icons/link/linkToHistory_gr.svg) center center/cover no-repeat;
    border-radius: 100%;
    transition: 0.1s ease;
    height: 32px;
    width: 80px;
    border-radius: 0;
    opacity: 0.5;
}

.iconLinkFacebook::after{
    background:url(../images/icons/link/linkToFacebook_gr.svg) center center/cover no-repeat;
    border-radius: 100%;
    transition: 0.1s ease;
}

.iconLinkYoutube::after{
    background:url(../images/icons/link/linkToYoutube_gr.svg) center center/cover no-repeat;
    border-radius: 100%;
    transition: 0.1s ease;
}

.iconLinkKakao::after{
    background:url(../images/icons/link/linkToKakao_gr.svg) center center/cover no-repeat;
    border-radius: 100%;
    transition: 0.1s ease;
}

.iconLinkBlog::after{
    background:url(../images/icons/link/linkToblog_gr.svg) center center/cover no-repeat;
    border-radius: 100%;
    transition: 0.1s ease;
}

.iconLinkInsta::after{
    background:url(../images/icons/link/linkToinstagram_gr.svg) center center/cover no-repeat;
    border-radius: 100%;
    transition: 0.1s ease;
    opacity: 0.4;
}


.on .iconPlace::after{
    background: url(../images/icons/place_pri.svg) center center/cover no-repeat;
}

.on .iconHome::after{
    background: url(../images/icons/home_pri.svg) center center/cover no-repeat;
}

.on .iconGift::after{
    background: url(../images/icons/gift_pri.svg) center center/cover no-repeat;
}

.on .iconList::after{
    background:url(../images/icons/list_pri.svg) center center/cover no-repeat;
}


a,button,div,p{
    transition: 0.2s ease;
}

#map *, [id^="centerMap"] * {
    transition: none;
}


/*
Form
- select
*/
 /* ///  DECORATION CSS ///  */
 .cont_select_center {
    position: absolute;
    left: 50%;
    top:50%;
    margin-top: -30px;
    margin-left: -150px;
  }
  
  .cont_heg_50 {
    position: absolute;
    height: 50%;
    left: 0;
    top: 0;
    width: 100%;
  background-color: #fd7b52;
  }
  /* ///  END DECORATION CSS  ///  */
  
  .icon_select_mate {
    position: absolute;
    top: calc(50% - 10px);
    right: 5%;
    font-size: 16px;
    width: 20px;
    height: 20px;
    transition: 0.8s ease;
    cursor: pointer;
  }
  
  .select_mate {
    position: relative;
    float: left;
    width: 280px;
    height: 58px;
    color: var(--gr400, #6D757E);
    font-weight: 300;
    background-color: #fff;
    border-radius: 8px;
    transition: all 375ms ease-in-out;
    border: 1px solid var(--gr150, #DEE2E6);
  }

  .select_mate[data-selec-open="true"]{
    border: 1px solid var(--pri400, #FDA525);
    box-shadow: 0px 4px 8px 0px rgba(255, 122, 0, 0.08);
  }

  .select_mate select {
    position: absolute;
    overflow: hidden;
    height: 0px;
    opacity: 0;  
      z-index: -1;
    }
  
  .cont_list_select_mate {
    position: relative;
    float: left;
    width: 100%;
  }
  
  .cont_select_int {
    position: absolute;
    left: 0px;
    top: 8px;
    z-index: 999;
    overflow: hidden;
    height: 0px;
    width: 100%;
    background-color: #fff;
    padding: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    border-radius: 8px;
    box-shadow: 1px 4px 10px -2px rgba(0, 0, 0, 0.2);
    transition: all 375ms ease-in-out;
    max-height:156px !important;
}

.cont_select_int li {
    position: relative;
    float: left;
    width: 100%;
    list-style-type: none;
    padding: 14px 20px;
    transition: all 275ms ease-in-out;
    display: block;
    cursor: pointer;
    color: var(--gr500, #5f666d);
    font-weight: 500;
}

.cont_select_int li:nth-child(1){
    display: none;
}


.cont_select_int .active {
    background-color: #fef2de78;
    color:var(--pria700, #FD6B00)
}

.selecionado_opcion {
    padding: 0 20px;
    height: 100%;
    width: 96%;
    display: flex;
    margin: 0px;
    cursor: pointer;
    align-items: center;
    font-weight: 600;
}

.innerOption{
    display: block;
}

.select_mate[data-selec-open="true"] .cont_select_int{
    overflow-y:scroll;
}

.select_mate[data-selec-open="true"] .cont_select_int.under3,
.select_mate[data-selec-open="false"] .cont_select_int.under3{
    overflow-y:hidden ;
}

/*
common
layout*/
.boxGrid > div{
    flex: 1;
}


.roundBox{
    border-radius: 20px;
}

.roundBoxS{
    border-radius: 16px;
}

.roundBoxES{
    border-radius: 12px;
}

.flxBox{
    display: flex;
}

.alignCenter{
    align-items: center;
}

.layoutWrap{
    width:1280px;
    padding: 0 40px;
    margin: 0 auto;
}

.layoutWrap.fullLayout{
    width: 100%;
    padding:0;
}


/*
position
*/
.positionRel{
    position:relative;
}

/*
margin system
*/
.boxMarginS{
    margin-bottom: 60px;
}

.boxMargin{
    margin-bottom: 100px;
}

.titMargin{
    margin-bottom: 40px;
}


.txtMarginXL{
    margin-bottom: 32px;
}

.txtMarginL{
    margin-bottom: 20px;
}

.txtMarginM{
    margin-bottom: 12px;
}
.txtMarginS{
    margin-bottom: 8px;
}
.txtMarginEs{
    margin-bottom: 4px;
}



/*포스트레이어*/
.postLayerWrapBox #wrap::before{
    height: 40px;
    width: 100%;
    content: "주소검색";
    font-size:1rem;
    font-family: 'Pretendard';
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: #222;
    padding: 0 20px;
    align-items: center;
}


/*포스트레이어 MO*/
#postLayer::before{
	height: 58px;
    width: 100%;
    content: "주소검색";
    font-size: 1.2rem;
    font-family: 'Pretendard';
    display: flex;
    background: #fff;
    font-weight: 600;
    color: #222;
    padding: 0 20px;
    align-items: center;
    border-bottom: 1px solid var(--gr150);
}


/* Accordion styles */

.accordianTabWrap{
    overflow: hidden;
    border: 1px solid var(--gr150);
    border-radius: 8px;
}

.accordianTabWrap input{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height:0;
    display:none;
}

.accordianTabWrap .tabs{
    overflow: hidden;
}

.accordianTabWrap .tab {
    width: 100%;
    color:var(--gr900);
    overflow: hidden;
    border-bottom: 1px solid var(--gr150);
    display: flex;
    flex-direction: column;
}
.accordianTabWrap .tab:last-child{
    border: none;
}
.tab-label {
    display: flex;
    justify-content: space-between;
    padding: 24px 20px;
    cursor: pointer;
    position: relative;
    padding-left: 44px;
    word-break: keep-all;
}

.tab-label::before{
    position: absolute;
    content: "Q.";
    left: 20px;
    color:var(--pri700, #FF7A00);
}

.tab-label::after {
    content: "";
    display: block;
    background: url(../images/icons/arrowRightSmall_gr.svg) center center / cover no-repeat;
    width: 20px;
    height: 20px;
    transform: rotate(90deg);
    transition:  0.2s;
}
.tab-content {
    max-height: 0;
    padding: 0 1rem;
    color:var(--gr600);
    transition: all 0.2s;
    position: relative;
    padding-left: 44px;
    background:var(--gr0);
    word-break: keep-all;
    line-height:160%;
}

.tab-content::before{
    position: absolute;
    content: "A.";
    font-weight: 600;
    left: 20px;
    color:var(--pri700, #FF7A00);   
}

input:checked + .tab-label::after {
    transform: rotate(-90deg);
    align-items: center;
    transition:  0.2s;
}
input:checked ~ .tab-content {
    border-top: 1px solid var(--gr150);
    max-height: max-content;
    padding: 20px;
    transition:  0.2s;
    padding-left: 44px;
}


/*아코디언 학습*/
.accordianTabWrap.curiArco .tab-label::before{
    display: none;
}

.accordianTabWrap.curiArco .tab-content::before{
    display: none;
}

.accordianTabWrap.curiArco .tab-label{
    padding-left: 20px;
}

.accordianTabWrap.curiArco .tab-content{
    padding-left: 20px;
}


/*게시판형 아코디언*/

.board_accordianTabWrap.accordianTabWrap{
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--gr400);
    border-bottom: 1px solid var(--gr150);
}

.board_accordianTabWrap .bd_faq_con{
    position: relative;
    padding-left: 2rem;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    padding-right: 1rem;
    line-height: 140%;
}

.board_accordianTabWrap .tab-label::before,
.board_accordianTabWrap .tab-content::before{
    display: none;
}

.onebyone_accordianTabWrap .bd_faq_con{
    width: 100%;
}

.bd_faq_con_Q::before{
    position: absolute;
    content: "Q.";
    left: 0;
    color: var(--pri700, #FF7A00);
    font-weight: 400;
}

.bd_faq_con_A::before{
    position: absolute;
    content: "A.";
    left: 0;
    color: var(--pri700, #FF7A00);
    font-weight: 400;
}

.board_accordianTabWrap .tab-label{
    padding: 24px;
    align-items: center;
}

.board_accordianTabWrap .bd_faq_con_tit{
   align-items: center;
   width: 100%;
}

.board_accordianTabWrap .tab-label::after{
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.board_accordianTabWrap input:checked ~  .tab-content{
    padding: 24px;
}

.board_accordianTabWrap .tagfaq{
    text-align: left;
    display: inline-block;
    flex-shrink: 0;
    width: 200px;
}

.date_cell{
    width: 120px;
    flex-shrink: 0;
    text-align: center;
}

.tag_answer{
    padding: 4px 8px;
    border-radius: 999px;
    gap: 4px;
    width: max-content;
    align-items: center;
}

.tag_answerY{
    color: #249434;
    background-color: #E3F8E6;
}

.tag_answerY::before{
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #249434;
    border-radius: 999px;
}

.tag_answerN::before{
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--gr200);
    border-radius: 999px;
}

.tag_answerN{
    color:var(--gr300);
    background-color:var(--gr100);
}

/*NEW 둥근형*/
.has_circle_new{
    display: inline-block;
    position: relative;
    margin-left: 6px;
    width: 14px;
}
.has_circle_new::after{
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--pri700) url(../images/icons/new_wh.svg) center center / 16px no-repeat;
    color:#fff;
    position: absolute;
    top:calc(50% - 7px);
    left:0;
}

/*포스트레이어*/
.postLayerWrapBox #wrap::before{
    height: 40px;
    width: 100%;
    content: "주소검색";
    font-size:1rem;
    font-family: 'Pretendard';
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: #222;
    padding: 0 20px;
    align-items: center;
}

/*브랜드아이콘*/
.brandImgBox01 .subBanner_ImgIcon{
	background: #fff url(../images/assett/logo_thinkbig.svg) center / 64% no-repeat;
}

.brandImgBox02 .subBanner_ImgIcon{
	background: #fff url(../images/assett/logo_thinkbig.svg) center / 64% no-repeat;
}

.brandImgBox03 .subBanner_ImgIcon{
	background: #fff url(../images/assett/logo_thinkbig.svg) center / 64% no-repeat;
}


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

/*pc만 적용*/
@media only screen and (min-width: 1025px) {
.agreeGroup{
	margin-bottom:4px;
}
/*.chipBtnSt2:hover{
    color: #fff;
    background: var(--pri700, #FF7A00);
}*/

        
.chipBtnSt1:not(.listShowMoreBtn):hover{
    border: 1px solid var(--pri400, #FDA525);
    color:var(--pria700, #FD6B00);
}

.chipBtnSt1.hasIconChip.hasIconArrow:hover::after{
    background: url(../images/icons/arrowRightSmall_pri.svg) center center/contain no-repeat;
    transition: background-image 0.2s ease;    
}


button:hover .underLineGray{
    text-decoration: var(--gra700,#FD6B00) underline;
}


.btnSytle01:hover{
    background: var(--pria700, #FDA525);
}

.goToStyleBtn:hover{
    color: var(--pria700, #FD6B00);
}



.btnIconTxtBefore:hover{
    color:var(--pria700, #FD6B00);
}

.btnIconTxtBefore:hover span{
    color:var(--pria700, #FD6B00);
}

.styled-checkbox.light-checkbox:hover + label::after {
    background: url(../images/icons/checksmall_pri.svg) 50% 50% / 24px no-repeat;
}

/* icon button hover */
.iconSearch:hover::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/search_pri.svg) center center/contain no-repeat;
}
.iconHamburger:hover::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/hamburger_pri.svg) center center/contain no-repeat;
}

.iconReset:hover::after{
    transition: background-image 0.2s ease;
    background: url(../images/icons/rotate_pri.svg) center center/contain no-repeat;
}

.iconReset.btnIconTxtBefore:hover::after{
    display: none;
}

.iconReset.btnIconTxtBefore:hover:before{
    transition: background-image 0.2s ease;
    background: url(../images/icons/rotate_pri.svg) center center/contain no-repeat;
}

.iconArrowRound:hover::after{
    background: #ffffffd0 url(../images/icons/arrowRightSmall_pri.svg) center center/cover no-repeat;
}

.select_mate:hover,
.select-like-btn:hover{
    border: 1px solid var(--pri400, #FDA525);
    box-shadow: 0px 4px 8px 0px rgba(255, 122, 0, 0.08);
}

.cont_select_int li:hover{
    background-color: #fef2de78;
    color:var(--pria700, #FD6B00)
}

.col_tit:hover{
    color:var(--gr900);
}


}
@media only screen and (max-width: 1024px) {
	/* 스크롤바 스타일링 - box */

	.scrollable-container,.scrollable-containerL{
	   -ms-overflow-style: none;
	}
	.scrollable-container::-webkit-scrollbar,
	.scrollable-containerL::-webkit-scrollbar{
	  display:none;
	}

    /* .select_mate 컨테이너 자체를 기본 크기로 */
    .mini-select_mate.select_mate {
        width: auto;
        height: auto;
        border: none;
        box-shadow: none;
        background-color: transparent;
    }

    /* 기본 select 요소를 보이도록 */
    .mini-select_mate.select_mate select {
        position: relative;
        height: auto;
        opacity: 1;
        z-index: 1;
        display: block;
        width: 100%;
        padding: 8px;
        padding-right: 24px;
        font-weight: 600;
        color: var(--gr600);
        border: 1px solid var(--gr150, #DEE2E6);
        border-radius: 8px;
        background-color: #fff;
        transition: none;
    }

    .mini-select_mate.select_mate.customerSearch_select{
        width: 96px;
    }

    /* 선택된 옵션 텍스트와 아이콘을 숨김 */
    .mini-select_mate .selecionado_opcion,
    .mini-select_mate .icon_select_mate,
    .mini-select_mate .cont_list_select_mate {
        display: none;
    }

    /* 커스텀 리스트를 숨김 */
    .mini-select_mate .cont_list_select_mate{
        display: none;
        
    }
    .mini-select_mate.select_mate select{
        height: 100%;
        -o-appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background:#fff url('../images/icons/arrowFill_gr.svg') calc(100% - 8px) center/16px no-repeat;      
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .customerLayoutBox.boxMargin{
        margin-bottom: 0;
    }

    .bdSearchWrap.txtMarginXL{
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .bdboxChipWrap_box{
        position: relative;
        height: 36px;
    }

    .request_do_or_show_box.bdboxChipWrap_box{
        margin-top: 20px;
    }

    .customerLayoutBox .blStChipWrap{
        overflow-x: auto;
        position: absolute;
        width: 100vw;
        top:0;
        left: -20px;
    }

    .customerLayoutBox .blStChipWrap .boxChipGroup{
        min-width: max-content;
        padding-left: 20px;
        padding-right: 20px;
    }

    .customerLayoutBox .blStChipWrap .boxChipGroup .chipBtnSt2{
        font-size: 0.933rem;
        height: 32px;
    }
    
    .inputTxtArea{
        min-height: 200px;   
    }
    
}
/*************

media quary

*************/

/*************
JS용 css 제어
*************/
.db_step{
    display: none;
}

.db_step.active {
    display: block;
}

.sub-step-active{
    display: block;
}