@charset "UTF-8";

/*
 * ********* 버튼 *********
*/

/*기본*/
.cl_button { display: inline-flex; justify-content: center; align-items: center; height: 54px; font-size: 20px; font-family: 'PretendardSB'; background-color: #007FFF; border-radius: 10px; border: 1px solid #007FFF; color: #fff; box-sizing: border-box; cursor: pointer;}
.cl_button a { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff;}
.cl_button.white {background-color: #fff; }
.cl_button.white a { color: #007FFF}

.cl_button.yellow { background-color: #FFE812;}
.cl_button.yellow a{ color: #000;}

.cl_button.inline { display: inline-flex}
.cl_button.full { width: 100%; padding: 0 ;}
.cl_button.sizeXL { width: 540px;}
.cl_button.sizeL { width: 440px;}
.cl_button.sizeM { width: 200px;}
.cl_button.sizeS { width: 150px;}
.cl_button.padding { padding: 0 50px;}
.cl_button.paddingS { padding: 0 20px;}

.cl_button.borderG { border-radius: 8px; border: 2px solid #C8C8C8; font-family: 'PretendardM'; color: #4F4F4F; }


/* 라운드 버튼*/
.cl_roundButton { display: flex; justify-content: center; align-items: center; height: 54px; ; font-size: 20px; color: #007FFF; font-family: 'PretendardM'; padding: 0 30px; box-sizing: border-box; border-radius: 30px; border: 2px solid #007FFF; cursor: pointer;}
.cl_roundButton.inline { display: inline-flex}

.cl_roundButton.on { color: #fff; background-color: #007FFF;}

/* 더보기 버튼*/
.cl_roundButton.more { display: inline-flex ;height: auto; padding: 20px 30px; }
.cl_roundButton.more a { display: flex; align-items: center; color: #007FFF}
.cl_roundButton.more a img { margin-left: 20px;}
.cl_roundButton.more a .on { display: none;}
.cl_roundButton.more.on a { color: #fff;}
.cl_roundButton.more.on a .off { display: none;}
.cl_roundButton.more.on a .on { display: block;}

/*
 * ********* 카테고리 *********
*/
.cl_categorySwiper { max-width: 1668px; width: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: center;overflow: hidden}

.cl_categorySwiper .swiper-slide { width: auto }
/*.cl_categorySwiper .swiper-wrapper { justify-content: center}*/


/*
 * ********* 타이틀 *********
*/
.cl_titleArea {  text-align: center; margin-bottom: 50px;}
.cl_titleArea.left{ text-align: left;}
.cl_title {font-family: 'PretendardSB'; font-size: 45px; color: #424242; margin-bottom: 30px;}
.cl_title .corB { color: #007FFF;}
.cl_subText {font-family: 'PretendardSB'; font-size: 22px; color: #666;}


/*
 * ********* 카드 박스*********
*/
.cl_cardList { border-radius: 30px;border:1px solid transparent; box-sizing: border-box; cursor: pointer;}
.cl_cardList:hover { border: 1px solid #005F99; }
.cl_cardList img { display: block; width: 100%; margin-bottom: 25px; border-radius: 30px 30px 0 0; box-sizing: border-box;}

.cl_cardList .textArea { position: relative; padding: 30px 10px 10px; box-sizing: border-box;}
.cl_cardList .textArea .infoArea { position: absolute; top: 0; left: 10px; display: flex; align-items: center; gap: 10px;}
.cl_cardList .textArea .infoArea .list { display: flex; justify-content: center; align-items: center; padding: 5px; box-sizing: border-box; font-size: 14px; color: #fff; font-family: 'PretendardSB'; border-radius: 4px;}
.cl_cardList .textArea .infoArea .list.red{background-color: #FF4500;}
.cl_cardList .textArea .infoArea .list.sky{ background-color: #87CEEB;}
.cl_cardList .textArea .name { font-size: 20px; font-family: 'PretendardM'; color: #555; }
.cl_cardList .textArea .amountArea { display: flex; justify-content: space-between; align-items: flex-end;}
.cl_cardList .textArea .amountArea .amount { font-size: 20px; color: #333; font-family: 'PretendardB';}
.cl_cardList .textArea .amountArea .amount .number { font-size: 50px;}
.cl_cardList .textArea .amountArea .sale { font-size: 30px; font-family: 'PretendardB'; color: #F00;}


/*
 * ***** 카드 박스 그리드 ***
*/

.cl_gridWrap {overflow:hidden;}
.cl_gridWrap .grid {display:flex; flex-wrap:wrap; padding:20px 0 0 20px; margin:-20px}
.cl_gridWrap .grid .gridCell {
    box-sizing:border-box;
    width:calc(100% / 4);
    border:0 solid transparent;
    border-width:0 20px 100px 0;
}



/*
 * ***** 페이지네이션 ***
*/

.cl_pagination { display: flex ;justify-content: center; align-items: center}
.cl_pagination img { vertical-align: middle;}
.cl_pagination > span {; cursor: pointer; }

.cl_pagination .numberArea { display: flex ;justify-content: center; align-items: center}
.cl_pagination .number { font-size: 20px; color: #4F4F4F; font-family: 'PretendardM'; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 6px;  margin-right: 15px;}
.cl_pagination .number:last-child { margin-right: 0;}
.cl_pagination .number.on { background-color: #007FFF; color: #fff;}
.cl_pagination .number:hover { background-color: #F2F2F2;}
.cl_pagination .number.on:hover { background-color: #007FFF; color: #fff;}


/*
 * ***** 인풋 ***
*/
.input { display: inline-flex; align-items: center; justify-content: center; height: 54px; font-size: 18px; border-radius: 10px; background-color: #F2F2F2; padding: 10px 20px;  box-sizing: border-box; color: #333; font-family: 'PretendardM';}
.input.default { width: 300px; padding: 20px; }
.input.full { width: 100%; }
.input::placeholder { font-size: 18px; color: #CBCBCB; font-family: 'PretendardM'; }


/*체크박스*/
.cl_checkbox { display: flex; align-items: center; justify-content: center; gap: 10px; }
input[type="checkbox"] { width: 25px; height: 25px; cursor: pointer; }
input[type="checkbox"] + label { font-size: 20px; font-family: 'PretendardM'; cursor: pointer; color: #333; }

input.small[type="checkbox"] { width: 20px; height: 20px; }
input.small[type="checkbox"] + label { font-size: 18px;  }

/*파일*/
#file { display: none; }
.input.file { height: 54px; font-size: 20px; color: #4F4F4F; font-family: 'PretendardM'; padding: 0 20px; border-radius: 8px; border: 2px solid #C8C8C8; box-sizing: border-box;  background-color: #fff;}
/*.input[type="file"] { padding: 10px 20px; box-sizing: border-box; }*/

/*
 * ***** textarea ***
*/
.textarea { resize: none; width: 100%; height: 500px; padding: 30px; box-sizing: border-box; border-radius: 30px; border: 1px solid #007FFF; font-size: 18px; color: #333; font-family: 'PretendardM'; }
.textarea::placeholder { font-size: 18px; color: #C8C8C8; font-family: 'PretendardM'; }


/*
 * ***** borderBox ***
*/

.cl_borderBox { border: 1px solid #c8c8c8; border-radius: 30px; box-sizing: border-box; background-color: #fff;}

/*
 * *****  테이블 ***
*/

.cl_tableWrap  { width: 100%; margin-top: 65px; }
.cl_tableWrap .tableWrap { width: 100%; table-layout: fixed;}

.cl_tableWrap .tableWrap tr td:nth-of-type(1){ width: 6%}
.cl_tableWrap .tableWrap tr td:nth-of-type(2){ width: 11%}
.cl_tableWrap .tableWrap tr td:nth-of-type(3){ width: 60%}
.cl_tableWrap .tableWrap tr td:nth-of-type(4){ width: 15%}
.cl_tableWrap .tableWrap tr td:nth-of-type(5){ width: 8%}

.cl_tableWrap .tableWrap tr { border-bottom: 1px solid #c8c8c8;}
.cl_tableWrap .tableWrap td { padding: 10px 0; box-sizing: border-box; text-align: center; font-size: 20px; color: #4f4f4f; font-family: 'PretendardM'; }

.cl_tableWrap .tableWrap thead td { background-color: #EEF6FF; }
.cl_tableWrap .tableWrap thead tr { border-bottom: none;}
.cl_tableWrap .tableWrap thead td:first-child { border-radius: 10px 0 0 10px;}
.cl_tableWrap .tableWrap thead td:last-child { border-radius: 0 10px 10px 0;}


.cl_tableWrap .tableWrap td.cor { color: #999;}

.cl_tableWrap .tableWrap td.subject { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 1000px; width: 60%; cursor: pointer;}

.cl_tableWrap .tableWrap td.delivery { color: #00B900;}
.cl_tableWrap .tableWrap td.delivery.end { color: #FF7D7D;}




@media (max-width: 1668px) {
    .cl_gridWrap .grid .gridCell {
        width:calc(100% / 3);
    }

    /*
     * ********* 카테고리 *********
    */
/*    .cl_categorySwiper { padding-left: 20px; padding-right: 20px; box-sizing: border-box}*/


    /*
     * ***** 인풋 ***
    */
    .input.default { width: 280px; height: 50px; font-size: 16px; padding: 15px; }
    .input::placeholder { font-size: 16px; }

    /*체크박스*/
    input[type="checkbox"] { width: 20px; height: 20px; }
    input[type="checkbox"] + label { font-size: 20px; }

    .input.file { font-size: 18px; }

}

@media (max-width: 1200px) {

    /*
     * ********* 버튼 *********
    */

    /*기본*/
    .cl_button {  height: 50px; font-size: 18px;}
}

@media (max-width: 1024px) {
    /*
      * ********* 버튼 *********
     */
    /*기본*/
    .cl_button.heightM  { height: 40px; }
    /* 라운드 버튼*/
    .cl_roundButton.heightM { height: 40px;}
    /* 더보기 버튼*/
    .cl_roundButton.more { padding: 15px 25px; }

    /*
     * ********* 타이틀 *********
    */
    .cl_titleArea { margin-bottom: 30px;}
    .cl_title { margin-bottom: 20px; font-size: 35px;}
    .cl_subText { font-size: 18px;}
    /*
     * ********* 카드 박스*********
    */
    .cl_cardList { border-radius: 10px;}
    .cl_cardList img { margin-bottom: 10px; border-radius: 10px 10px 0 0;}

    .cl_cardList .textArea { padding: 30px 5px 10px;}
    .cl_cardList .textArea .infoArea { left: 5px; gap: 5px;}
    .cl_cardList .textArea .infoArea .list { font-size: 12px;}

    .cl_cardList .textArea .name { font-size: 16px;}
    .cl_cardList .textArea .amountArea .amount { font-size: 18px;}
    .cl_cardList .textArea .amountArea .amount .number { font-size: 22px;}
    .cl_cardList .textArea .amountArea .sale { font-size: 18px;}

    /*
     * ***** 카드 박스 그리드 ***
    */
    .cl_gridWrap .grid {padding:10px 0 0 10px; margin:-10px}
    .cl_gridWrap .grid .gridCell {
       border-width:0 10px 60px 0;
    }

    /*
     * ***** 인풋 ***
    */
    .input.default { width: 250px; height: 45px; }

    /*체크박스*/
    .cl_checkbox { gap: 5px; }
    input[type="checkbox"] { width: 15px; height: 15px; }
    input[type="checkbox"] + label { font-size: 18px; }

    /*
     * *****  테이블 ***
    */

    .cl_tableWrap  {  margin-top: 40px; }
    .cl_tableWrap .tableWrap td { font-size: 16px;}





}

@media (max-width: 768px) {
    /*
     * ********* 버튼 *********
    */
    /*기본*/
    .cl_button { font-size: 16px;}
    .cl_button.heightM { height: 40px;}
    .cl_button.padding { padding: 0 20px;}

    /* 라운드 버튼*/
    .cl_roundButton { font-size: 16px;  padding: 15px 25px; border-width: 1px;}
    .cl_roundButton.heightM { height: 40px;}

    /* 더보기 버튼*/
    .cl_roundButton.more a img { margin-left: 15px;}



    /*
     * ********* 타이틀 *********
    */
    .cl_titleArea { margin-bottom: 20px;}
    .cl_title { font-size: 26px; margin-bottom: 10px;}
    .cl_subText { font-size: 14px; }

    /*
     * ********* 카드 박스*********
    */
    .cl_cardList { border:none;}
    .cl_cardList:hover { border:none; }
    .cl_cardList img { margin-bottom: 5px;}

    .cl_cardList .textArea { padding: 18px 0 10px;}
    .cl_cardList .textArea .infoArea { left: 0;}
    .cl_cardList .textArea .infoArea .list { font-size: 8px; padding: 3px 5px;}

    .cl_cardList .textArea .name { font-size: 14px;}
    .cl_cardList .textArea .amountArea .amount { font-size: 16px;}
    .cl_cardList .textArea .amountArea .amount .number { font-size: 20px;}
    .cl_cardList .textArea .amountArea .sale { font-size: 16px;}

    /*
       * ***** 카드 박스 그리드 *********
      */
    .cl_gridWrap .grid {padding:20px 0 0 20px; margin:-20px}
    .cl_gridWrap .grid .gridCell {
        width:calc(100% / 2);
        border-width:0 20px 30px 0;
    }

    /*
      * ********* 카테고리 *********
    */
    .cl_categorySwiper { display: block; overflow: visible;}


    /*
     * ********* 페이지네이션 *********
    */

    .cl_pagination img { width: 33px;}
    .cl_pagination .number { font-size: 14px;  width: 25px; height: 25px;  margin-right: 5px;}

    /*
     * ***** 인풋 ***
    */
    .input.default { width: 100%; height: 50px; }
    .input.file { font-size: 16px; height: 50px;}
    /*체크박스*/
    input[type="checkbox"] { width: 20px; height: 20px;  }
    input[type="checkbox"] + label { font-size: 16px; }

    /*
     * ***** textarea ***
    */
    .textarea { border-radius: 15px; padding: 20px; font-size: 16px;}
    .textarea::placeholder { font-size: 16px; }


    /*
     * ***** borderBox ***
    */

    .cl_borderBox { border-radius: 15px;}

    /*
     * *****  테이블 ***
    */

    .cl_tableWrap  { margin-top: 30px; }

    .cl_tableWrap .tableWrap tr td:nth-of-type(1){ width: 12%}
    .cl_tableWrap .tableWrap tr td:nth-of-type(2){ width: 15%}
    .cl_tableWrap .tableWrap tr td:nth-of-type(3){ width: 50%}
    .cl_tableWrap .tableWrap tr td:nth-of-type(4){ width: 0}
    .cl_tableWrap .tableWrap tr td:nth-of-type(5){ width: 17%}

    .cl_tableWrap .tableWrap td { font-size: 14px;}
    .cl_tableWrap .tableWrap .hideText { display: none;}
    .cl_tableWrap .tableWrap tr { border-bottom: none;}

}