@charset "utf-8";

/********************
// 작은 데스크탑 분기점 (모바일/태블릿)
********************/
@media only screen and (max-width: 1399px) {
/** 공용 **/
.inner, .serviceInner { width: calc(100% - 120px); }
.ceoInner{ width: calc(100% - 120px); }
.mainCio {bottom:0; left:60px;}
.packageTabIcon{top:24px; right:24px;}

.hamburgerCon{display:grid; grid-template-columns: repeat(10, 1fr); gap:24px 12px}
.hamburgerMenuBtn{background-color:#fff}

.mainMenuGrid{display: grid; grid-template-columns: repeat( 3 , 1fr);}

.newsTabBox {    padding: 24px 24px 20px 24px;     border: 1px solid #E4E6E9;    transition: padding 0.4s ease, border-color 0.4s ease;}
.newsGrid_01, .newsGrid_02{display:grid; grid-template-columns: repeat(9 , 1fr);}

.newsViewInner{max-width: 100%;}

.studyGrid{display:grid; grid-template-columns: repeat(9 , 90px);}
.videoGrid{display:grid; grid-template-columns: repeat(3 , 1fr); gap:32px 20px;}
.videoInner{width:100dvw}
.moreVideo{position:relative; top:0;}
.reviewCount{background:#F8FAFC}

.videoReview,
.videoReviewBox {    display: none !important;}

.open-comments-mode .videoReview,
.open-comments-mode .videoReviewBox {    display: flex !important; }

.open-comments-mode .reviewCount,
.open-comments-mode .moreVideo,
.open-comments-mode .noReview {    display: none !important;}

.write-only-mode .videoReview {    display: flex !important; }

.write-only-mode .noReview,
.write-only-mode .moreVideo {    display: none !important;}

.errImg{margin-top:-60px;}

.searchMainGrid{display:grid; grid-template-columns: repeat(5 , 1fr);}
.categorySwiper .swiper-slide {width: auto;}
.searchCategoryGrid{display:grid; grid-template-columns: repeat(5 , 1fr);}

.commuteTabList, .commutePayTabList{display:grid;  grid-template-columns: repeat(4,  110px);}






/******************
** 랜딩페이지
******************/
.portfolio-slider-wrap {    grid-template-columns: repeat(2, 1fr);}
/* 3번, 4번 트랙을 숨겨서 2열만 보이도록 처리 */
.portfolio-slider-wrap .track:nth-child(3),
.portfolio-slider-wrap .track:nth-child(4) {    display: none;}

.worryBox_l{border-radius:16px 16px 16px 0}
.worryBox_l::after {    content: "";    position: absolute;    top: 100%;    left: 0;       border-top: 32px solid #F8FAFC;     border-right: 32px solid transparent; }
.worryBox_r{border-radius:16px 16px 0 16px}
.worryBox_r::after {    content: "";    position: absolute;    top: 100%;    right: 0;       border-top: 32px solid #555A65;     border-left: 32px solid transparent; }
.worryBox_green::after {    content: "";    position: absolute;    top: 100%;    left: 0;       border-top: 32px solid #34B34D;     border-right: 32px solid transparent; }
.worryBox_green_r::after {    content: "";    position: absolute;    top: 100%;    right: 0;       border-top: 32px solid #34B34D;     border-left: 32px solid transparent; }
.homepageQaBox{border-radius:16px 16px 0 0}
}







/********************
// 모바일 분기점
********************/
@media only screen and (max-width: 1023px) {
.inner, .serviceInner{width: calc(100% - 40px);}

.hamburgerCon{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px 16px}
.ceoInner{width:100dvw;}
.mf1{flex:1;}
.mainCio{top:0; right:0; left:auto;}
.mainBannerBox{max-width: 500px;}
.mainGrid{display:grid; grid-template-columns: repeat(5 , 1fr); gap:18px 6px;}
.itemBox{aspect-ratio: 1 / 1;}


.packageGrid{display:grid; grid-template-columns: repeat(1 , 1fr);}
.packageTab{box-shadow:none; border:1px solid #CCD0D5; cursor: pointer; background:#F8FAFC;}
.packageTab .wf1 p{color:#68707D}
.packageTab.active{border: 1px solid #91E4A0; background-color:#F1FCF3}
.packageTab.active .packageTabTit{color: #25943A;}
.packageTab.active .packageTabIcon_m{background-color: #34B34D; border:1px solid #34B34D;}
.packageTabIcon_m{border: 1px solid #7E8692; border-radius: 0 16px 16px 0 ;} 
.packageFoot{background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(10px);  backdrop-filter: blur(10px);  border-radius: 16px 16px 0 0; position: fixed;  left: 0; bottom: 0; width: 100%; z-index: 100;  transform: translateY(100%);  transition: transform 0.4s ease-in-out;} 
.packageFoot.show {    transform: translateY(0); }
.packageFoot a.activeBtn { background-color: #217431 !important; color: #ffffff !important; }

.reviewSwiper {overflow: hidden !important;}
.reviewSwiper .swiper-wrapper {flex-wrap: nowrap !important; gap: 0 !important;}    
.reviewSwiper .swiper-slide { width: 85% !important; flex-shrink: 0 !important; height: 100%  }    
/* 하단 점(Pagination) 스타일 */
.reviewSwiper .swiper-pagination-bullet {        background-color: #D9D9D9;         opacity: 1;        width: 8px;        height: 8px;        margin: 0 4px !important;    }
.reviewSwiper .swiper-pagination-bullet-active {        background-color: #8E939B;    }


.newsSwiper {    overflow: hidden !important; }

.newsSwiper .swiper-wrapper.newsGrid {    display: flex !important;     gap: 0 !important; }
.newsSwiper .swiper-slide {    width: 70% !important;         flex-shrink: 0 !important;    height: auto !important;}
.mainMenuGrid{display: grid; grid-template-columns: repeat( 1 , 1fr);}
.newsBox{background:#fff}

.bubble::before {    content: "";    position: absolute;    top: 0;        left: -0;      width: 1px;       height: 1px;    background-color: #F1FCF3;         transform: rotate(45deg);     border-radius: 2px;        z-index: -1;  }
.openModalBtn{background:#ECEEF0; color:#7E8692}
.modalCon, .successmodalCon{max-height:calc(100% - 140px); overflow-y: auto;}

.longTxt3{  display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 3;     overflow: hidden;}
.writeBox{background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(10px);  backdrop-filter: blur(10px); left:0; bottom:0; border-radius: 24px 24px 0 0;}
.communityOpenModal{background-color:#217431}

.communityView{background:#F8FAFC}

.shareModalBox{border-radius: 24px 24px 0 0;}
.autoTextarea { height: 44px; min-height: 44px; max-height: 90px; overflow-y: auto; resize: none; box-sizing: border-box; }


.newsTabBox {    padding: 20px 16px 16px 16px;   }
.newsGrid_01{display:grid; grid-template-columns: repeat(18 , 70px); overflow-x: auto !important; padding-bottom:16px;}
.newsGrid_02{display:grid; grid-template-columns: repeat(10, 70px); overflow-x: auto !important;  padding-bottom:16px;}
.newsTab_01 {overflow:hidden}
.newsGrid_01::-webkit-scrollbar,
.newsGrid_02::-webkit-scrollbar { height: 6px; }
.newsGrid_01::-webkit-scrollbar-thumb,
.newsGrid_02::-webkit-scrollbar-thumb { background-color: #d1d5db; border-radius: 4px;    }
.newsGrid_01::-webkit-scrollbar-track,
.newsGrid_02::-webkit-scrollbar-track { background-color: transparent;    }
.scrollWrap { position: relative; width: 100%;  }
.scrollWrap::after { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); pointer-events: none;   }

.newsTabBox:not(.is-closed) .filterBtn.whp48 {      display: none !important;  }
.newsTabBox:not(.is-closed) .wdn.mdf {      display: flex !important;   }
.newsTabBox.is-closed .wdn.mdf {      display: none !important;  }


.newsWriteGrid { display:grid; grid-template-columns: repeat(2 , 1fr); }

.studyGrid{display:grid; grid-template-columns: repeat(3 , 1fr);}
.videoGrid{display:grid; grid-template-columns: repeat(2 , 1fr); gap:24px 12px;}
.videoGrid a{min-width: 0;}
.videoTxt{  white-space: nowrap;     display:block;     overflow: hidden;     text-overflow: ellipsis;}



.errImg{margin-top:-40px;}


.pointTop{border:none}
.pointGird{display:grid; grid-template-columns: repeat(3 , 1fr);}
.pointInfoGrid{display:grid; grid-template-columns: repeat(2 , 1fr);}


.searchMainGrid{display:grid; grid-template-columns: repeat(1 , 1fr);}
.searchMainImg_2{aspect-ratio: 0; background:#fff;}
.searchMainImg_2 div{background:#F8FAFC;}
.arrowImg{right:0;}

.searchCategoryGrid{display:grid; grid-template-columns: repeat(3 , 1fr);}

.bizCardGrid{display:grid; grid-template-columns: repeat(2 , 1fr);}

.ceoCommuteTop{border:none;}
.commuteTabList, .commutePayTabList{display:grid;  grid-template-columns: repeat(3,  1fr);}
.commuteMain_m{border-top:8px solid #F8FAFC }
.weekWorkList{border:none;}
.weekWorkList div{background:#fff!important; border:none;}
.weekWorkList:last-child{border-bottom:none!important;}
.weekWorkList div:last-child {border-right:none!important;}
.mdtc{display:table-cell!important;}
.mf1{flex:1;}
.mFlexRow{display:flex!important; flex-wrap:wrap!important; border-bottom:1px solid #E4E6E9!important;}
.mFlexRow td{border-bottom:none!important;}
.mFlexCol{flex:1!important; min-width:0!important;}
.mFlexHalf{width:50%!important; max-width:50%!important; flex:1 1 50%!important; min-width:0!important; box-sizing:border-box!important;}
.mFlexFull{width:100%!important; padding-top:0!important; padding-bottom:16px!important;}
.workerViewBoxList>div{border-bottom:1px solid #E4E6E9}
.workerViewBoxList{border-bottom:none;}
/* 모바일에서는 PC용 카드 영역 숨김 */
.mobile-card-row {        display: none !important;    }
/* 모바일 달력 날짜 서식 & 선택 원형 그린 뱃지 */
.mCalDayCell[data-day]:not([data-day="-"]) {        cursor: pointer;        width: 36px;        height: 36px;        border-radius: 50%;        margin: 0 auto;        display: flex;        align-items: center;        justify-content: center;        transition: background-color 0.2s ease, color 0.2s ease;    }
.mCalDayCell.is-selected {        background-color: #25943A !important;        color: #ffffff !important;        font-weight: 700 !important;    }
.weekWorkList {        align-items: center;    }
.weekWorkList_01{display:none;}



/******************
** 랜딩페이지
******************/
.worryBox_l{border-radius:8px}
.worryBox_l::after {    content: "";    position: absolute;    top: 100%;    left: 0;       border-top: 0 solid #F8FAFC;     border-right: 0 solid transparent; }
.worryBox_r{border-radius:8px}
.worryBox_r::after {    content: "";    position: absolute;    top: 100%;    right: 0;       border-top: 0 solid #555A65;     border-left: 0 solid transparent; }
.worryBox_green::after {    content: "";    position: absolute;    top: 100%;    left: 0;       border-top: 0 solid #34B34D;     border-right: 0 solid transparent; }
.worryBox_green_r::after {    content: "";    position: absolute;    top: 100%;    right: 0;       border-top: 0 solid #34B34D;     border-left: 0 solid transparent; }
.homepageQaBox{border-radius:8px 8px 0 0}


}