.pageOutWrap { padding-top: 100px;padding-bottom: 100px; }
.contentsWrap { width: 100%; max-width: 1100px; margin: 0 auto; }
.paddingNon { padding-top: 0 !important; padding-bottom: 0 !important;}
.paddingRightNon { padding-right: 0 !important; }
.textCenter { text-align: center; }


/*
    **************************************cl_mainTitle**************************************
*/
.cl_mainTitle .mainText { font-size: 70px; font-family: 'PretendardR'; color: #ffffff; margin-bottom: 10px; }
.cl_mainTitle .mainText .bold { font-family: 'PretendardB'; }
.cl_mainTitle .mainText .purple { color: #C296E5; }

.cl_mainTitle .subText { font-size: 20px; color: #ffffff; font-family: 'PretendardL'; margin-bottom: 50px; }


/*
    **************************************cl_button**************************************
*/
.cl_button { width: 200px; height: 60px; }
.cl_button a{ position: relative; display: flex; align-items: center; justify-content: flex-start; background: rgba(255,255,255,0.2); width: 100%; height: 100%;
    border-radius: 100px; font-size: 16px; font-family: 'PretendardM'; color: #ffffff; padding: 0 30px; box-sizing: border-box; cursor: pointer; }
.cl_button .icon { position: absolute; right: 10px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #C296E5; border-radius: 50%; }
.cl_button .icon i { color: #fff; }
.cl_button.gray a { background: rgba(187,187,187,0.4); }
.cl_button.gray a .icon { background: rgba(255,255,255,0.2); }
.cl_button.darkGray a { background: #777777; }
.cl_button.darkGray .icon { background: rgba(255,255,255,0.2); }
.cl_button.purple a { background: #C296E5; }
.cl_button.purple .icon { background: rgba(255,255,255,0.2); }

.cl_button.square {display: flex; align-items: center;}
.cl_button.square a{  border-radius: 5px; justify-content: center; font-size: 20px; padding: 0; height: 48px;}

.cl_button.loginButton { width: 410px; margin: 0 auto; background: #fff; display: flex; align-items: center; justify-content: center;}
.cl_button.loginButton a{ justify-content: center; width: 100%;  background: #c892de; border-radius: 30px; font-size: 24px; font-family: 'PretendardB'; cursor: pointer; color: #fff;}

/*
    ************************************** cl_menuList **************************************
*/

.cl_menuList { display: flex; align-items: center; margin: 40px 0 80px;}
.cl_menuList .list {display: flex; justify-content: center; align-items: center; margin-right: 10px; font-size: 14px; font-family: 'PretendardR'; color: #777;}
.cl_menuList .list:last-child { margin-right: 0;}
.cl_menuList .list.text img { margin-left: 10px;}

/*
    ************************************** cl_pageTitle **************************************
*/
.cl_pageTitle { margin-bottom: 60px; text-align: center; }
.cl_pageTitle .mainText { font-size: 50px; font-family: 'PretendardB'; margin-bottom: 20px; color: #222222; }
.cl_pageTitle .subText { font-size: 18px; font-family: 'PretendardR'; color: #777777; }
.cl_pageTitle .subText.fontS { font-size: 16px;}

/*
    ************************************** input **************************************
*/
.input { height: 50px; border: 1px solid #dddddd; color: #222222; font-size: 18px; padding: 0 15px; box-sizing: border-box; font-family: 'PretendardR'; border-radius: 5px; }
.input::placeholder { font-size: 18px; color: #777777; font-family: 'PretendardR'; }
.input.full { width: 100%; }
input[type=radio] + label { font-size: 20px; color: #3d3b3d; font-family: 'PretendardR'; cursor: pointer; }
input[type=radio] { border: 2px solid #7a7a7a; width: 18px; height: 18px; cursor: pointer; }

/*
    ************************************** textarea **************************************
*/
.textarea { height: 200px; width: 100%; color: #222222; font-size: 18px; padding: 10px 15px; box-sizing: border-box; border: 1px solid #dddddd; color: #222222; resize: none; font-family: 'PretendardR'; border-radius: 5px; }


/*
    ************************************** cl_gridWrapper **************************************
*/

.cl_gridWrapper {overflow:hidden;}
.cl_gridWrapper .grid {display:flex; flex-wrap:wrap; padding:10px 0 0 30px; margin: 0 -30px}
.cl_gridWrapper .grid .gridCell { box-sizing:border-box;width:calc(100% / 3);border:0 solid transparent;border-width:0 30px 80px 0;}
.cl_gridWrapper .grid .gridCell .imgArea { position: relative; margin-bottom: 40px; }
.cl_gridWrapper .grid .gridCell .imgArea img { width: 100%; }
.cl_gridWrapper .grid .gridCell .point { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 120px; height: 30px; border-radius: 100px;
    color: #ffffff; font-size: 15px; font-family: 'PretendardB'; background: #C296E5; z-index: 2; }
.cl_gridWrapper .grid .gridCell .subText { font-size: 18px; font-family: 'PretendardR'; text-align: center; color: #777777; }
.cl_gridWrapper .grid .gridCell .mainText { font-size: 16px; font-family: 'PretendardR'; color: #222222; align-items: flex-end;display: flex;justify-content: center; gap: 10px; }
.cl_gridWrapper .grid .gridCell .mainText .bold { font-size: 26px; font-family: 'PretendardB'; color: #222222;}

@media (max-width: 1350px) {
    .contentsWrap { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

    /*
        **************************************cl_mainTitle**************************************
    */
    .cl_mainTitle .mainText { font-size: 55px;margin-bottom: 10px; }

    /*
        ************************************** cl_pageTitle **************************************
    */
    .cl_pageTitle { margin-bottom: 50px; }
    .cl_pageTitle .mainText { font-size: 45px; margin-bottom: 20px; }

    /*
        ************************************** cl_gridWrapper **************************************
    */
    .cl_gridWrapper .grid .gridCell .subText { font-size: 16px;  }



}


@media (max-width: 1024px) {
    .pageOutWrap { padding-top: 80px;padding-bottom: 80px; }
    /*
    **************************************cl_mainTitle**************************************
    */
    .cl_mainTitle .mainText { font-size: 40px;margin-bottom: 10px; }
    .cl_mainTitle .subText { font-size: 18px;}


    /*
        ************************************** cl_menuList **************************************
    */

    .cl_menuList { margin: 30px 0 60px;}


    /*
        **************************************cl_button**************************************
    */

    .cl_button {  width: 140px; height: 50px;  }
    .cl_button a { font-size: 14px;  padding: 0 20px; }
    .cl_button a .icon { width: 30px; height: 30px; }

    .cl_button.loginButton { width: 280px; margin: 0 auto; }
    .cl_button.loginButton a {  font-size: 20px; }

    .cl_button.square a { font-size: 18px; }

    /*
        ************************************** cl_pageTitle **************************************
    */
    .cl_pageTitle { margin-bottom: 40px; }
    .cl_pageTitle .mainText { font-size: 36px;  margin-bottom: 10px; }
    .cl_pageTitle .subText { font-size: 16px; }

    /*
        ************************************** input **************************************
    */
    .input { height: 50px; font-size: 16px;}
    .input::placeholder { font-size: 16px;  }
    input[type=radio] + label { font-size: 16px; }

    /*
        ************************************** cl_gridWrapper **************************************
    */
    .cl_gridWrapper .grid .gridCell {
        box-sizing: border-box;
        width: calc(100% / 2);
        border: 0 solid transparent;
        border-width: 0 10px 40px 0;
    }
    .cl_gridWrapper .grid .gridCell .imgArea { margin-bottom: 20px; }
    .cl_gridWrapper .grid .gridCell .point { font-size: 13px; }
    .cl_gridWrapper .grid .gridCell {  margin-bottom: 40px; }

}







@media (max-width: 768px) {
    .pageOutWrap { padding-top: 60px;padding-bottom: 60px; }
    .contentsWrap { padding-left: 10px; padding-right: 10px;}



    /*
    **************************************cl_button**************************************
    */
    .cl_button { height: 40px; }
    .cl_button.loginButton { width: 230px; margin: 0 auto; }
    .cl_button.loginButton a {  font-size: 16px; }

    .cl_button.square a { width: 100%; height: 40px; font-size: 16px; }

    /*
    **************************************cl_mainTitle**************************************
    */
    .cl_mainTitle .mainText { font-size: 30px;}
    .cl_mainTitle .subText { font-size: 16px; margin-bottom: 15px; }

    /*
    ************************************** cl_menuList **************************************
*/

    .cl_menuList { margin: 15px 0 40px;}
    .cl_menuList .list { margin-right: 10px; font-size: 13px;}
    .cl_menuList .list.home img { width: 13px;}


    /*
    ************************************** cl_pageTitle **************************************
    */
    .cl_pageTitle { margin-bottom: 30px;}
    .cl_pageTitle.left {  text-align: left; }
    .cl_pageTitle .mainText { font-size: 30px;  margin-bottom: 10px; }
    .cl_pageTitle .subText { font-size: 15px; }
    .cl_pageTitle .subText.fontS { font-size: 12px;}
    /*
        ************************************** input **************************************
    */
    .input { height: 40px; font-size: 14px;}
    .input::placeholder { font-size: 13px;  }
    input[type=radio] { width: 13px; height: 13px; }
    input[type=radio] + label { font-size: 16px; }

    /*
        ************************************** textarea **************************************
    */
    .textarea { height: 100px; }


    /*
        ************************************** cl_gridWrapper **************************************
    */

    .cl_gridWrapper .grid .gridCell .imgArea { margin-bottom: 20px; }
    .cl_gridWrapper .grid .gridCell .point { font-size: 13px; }
    .cl_gridWrapper .grid .gridCell { width: 100%; border-width: 0; margin-bottom: 30px; }
    .cl_gridWrapper .grid { padding: 0; gap: 10px; }

}