/* home.php */
.homeWrap section .sc-title { margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between;} 
.homeWrap section .sc-title .mainTitle{ font-size: 2rem; font-weight: 700;}
.homeWrap section .sc-title .titleBtn { display: flex; align-items: center;}
.homeWrap section .sc-title .more-btn{ display: flex; align-items: center; font-size: 1.6rem; color: #777;}
.homeWrap section .sc-title .more-btn img { width: 1rem; margin-right: 0.4rem;}
.homeWrap section + section { margin-top: 3rem;}
.homeWrap .sc-visual .vis-banner { width: 100%; padding: 3rem 0;}
.homeWrap .sc-visual .container { display: flex;}
.homeWrap .sc-visual .text-area { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: baseline; justify-content: space-between;}
.homeWrap .sc-visual .text-area p { font-size: 1.6rem; font-weight: 300; line-height: 1.3; color: #fff; margin-top: 0.8rem;}
.homeWrap .sc-visual .text-area h3 { font-size: 2.2rem; font-weight: 700; line-height: 1.3; color: #fff;}
.homeWrap .sc-visual .text-area .vis-btn { background-color: #fff; color: var(--brand-color); padding: 1rem 1.6rem; font-size: 1.6rem; font-weight: 500; border-radius: 0.5rem; display: flex; align-items: center; gap: 0.4rem; margin-top: 2rem;}
.homeWrap .sc-visual .text-area .vis-btn span { width: 1rem; aspect-ratio: 1/1;  border: solid var(--brand-color); border-width: 0 2px 2px 0; transform: rotate(-45deg); display: inline-block;}

.homeWrap .sc-menu .sc-contents { display: flex; align-items: center; justify-content: space-around;  width: 100%;}
.homeWrap .sc-menu .sc-contents a { display: flex; flex-direction: column; align-items: center;}
.homeWrap .sc-menu p { text-align: center; font-size: 1.4rem; font-weight: 600; margin-top: 1rem; line-height: 1.2;}
.homeWrap .sc-menu .img-wrap { width: 4rem;}
.homeWrap .sc-menu .img-wrap img { width: 100%;}

.homeWrap .sc-banner { display: flex; flex-direction: column;}
.homeWrap .sc-banner .banner-item { padding: 3rem 0;}
.homeWrap .sc-banner .banner-item h3 { font-size: 2rem; font-weight: 700; color: #fff; line-height: 1.3;}
.homeWrap .sc-banner .banner-item p { font-size: 1.6rem; font-weight: 200; color: #fff; margin-top: 0.8rem; line-height: 1.3;}

.homeWrap .sc1 { padding-bottom: 4rem; margin-top: 4rem; }
.homeWrap .sc1 .sc-contents{ display: flex; align-items: center; gap: 2rem; width: 100%;}
.homeWrap .sc1 .news-item { display: flex; flex-direction: column; flex: 1; min-width: 0;}
.homeWrap .sc1 .news-item .img-wrap { background-color: #f2f2f2; height: 10rem; overflow: hidden;}
.homeWrap .sc1 .news-item .img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center;}
.homeWrap .sc1 .news-item .text-wrap { margin-top: 1rem;}
.homeWrap .sc1 .news-item h3 { font-size: 1.6rem; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden;}
.homeWrap .sc1 .news-item p { margin-top: 0.8rem; font-size: 1.4rem; line-height: 1.3; color: #999; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; }
.homeWrap .sc1 .news-item .date { color: #999; font-size: 1.4rem; margin-top: 1rem; display: block;}


/* subpage */
.toggle-list { display: flex; flex-direction: column; gap: 2rem; }
.toggle-list .toggle-header { display: flex; align-items: center; justify-content: space-between; padding: 2rem; background-color: #f2f2f2; width: 100%; gap: 1rem; border-radius: 1rem;}
.toggle-list .toggle-header .toggle-title { font-size: 1.6rem;  font-weight: 600; flex: 1; min-width: 0; text-align: left; line-height: 1.4;}
.toggle-list .toggle-header img { width: 2rem; flex-shrink: 0; transition: transform 0.2s;}
.toggle-list .toggle-item.active .toggle-header img { transform: rotate(180deg);}
.toggle-list .toggle-con { display: none;}
.toggle-list .toggle-con pre,
.toggle-list .toggle-con .con-item { padding: 1.6rem 2rem; font-size: 1.6rem; font-weight: 400;line-height: 1.4; color: #666;}
.toggle-list .toggle-con .con-item + .con-item { border-top: 1px solid #eee;}

.banner-top .banner-item { width: 100%; padding: 3rem 0;}
.banner-top .banner-item .container { display: flex;}
.banner-top .banner-item .text-area { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: baseline; justify-content: space-between;}
.banner-top .banner-item .text-area p { font-size: 1.6rem; font-weight: 300; line-height: 1.3; color: #fff; margin-top: 0.8rem;}
.banner-top .banner-item .text-area h3 { font-size: 2.2rem; font-weight: 700; line-height: 1.3; color: #fff;}
.banner-top .banner-item .text-area .vis-btn { background-color: #fff; color: var(--brand-color); padding: 1rem 1.6rem; font-size: 1.6rem; font-weight: 500; border-radius: 0.5rem; display: flex; align-items: center; gap: 0.4rem; margin-top: 2rem;}
.banner-top .banner-item .text-area .vis-btn span { width: 1rem; aspect-ratio: 1/1;  border: solid var(--brand-color); border-width: 0 2px 2px 0; transform: rotate(-45deg); display: inline-block;}

.banner-btm .banner-item {  width: 100%;}
.banner-btm .banner-item { padding: 3rem 0;}
.banner-btm .banner-item h3 { font-size: 2rem; font-weight: 700; color: #fff; line-height: 1.3;}
.banner-btm .banner-item p { font-size: 1.6rem; font-weight: 200; color: #fff; margin-top: 0.8rem; line-height: 1.3;}

.empty-text { color: #999; font-size: 1.8rem; font-weight: 300; margin-top: 8rem; text-align: center;}


/* guide.php */
.guideWrap .sub-contents { padding-top: 3rem;}
.guideWrap .guide-item { display: flex; align-items: center; justify-content: space-between; padding: 2rem; background-color: #f2f2f2; width: 100%; gap: 1rem; border-radius: 1rem; margin-bottom: 2rem;}
.guideWrap .guide-item:last-child { margin-bottom: 0;}
.guideWrap .guide-item .guide-title { font-size: 1.6rem;  font-weight: 600; flex: 1; min-width: 0; text-align: left; line-height: 1.4;}
.guideWrap .guide-item img { width: 0.8rem; flex-shrink: 0;}


/* guide_detail.php */
.guideDetailWrap header { border-bottom: 1px solid #ccc;}
.guideDetailWrap main { padding-top: 4rem;}
.guideDetailWrap .sub-title .subTitle { font-size: 1.8rem; font-weight: 700;}
.guideDetailWrap .guide-list { margin-top: 2rem;}
.guideDetailWrap .guide-item { padding: 3rem 2rem; background-color: #f2f2f2; border-radius: 1rem;}
.guideDetailWrap .guide-item + .guide-item { margin-top: 2rem;}
.guideDetailWrap .guide-item .strong { color: #fff; padding: 0.8rem 1.6rem ; border-radius: 0.5rem; font-size: 1.6rem; font-weight: 600; background-color: var(--brand-color); display: inline-block; margin-bottom: 2rem;}
.guideDetailWrap .guide-item .guide-desc pre { font-size: 1.6rem; line-height: 1.5; color: #666;}

/* training.php */
.trainingWrap main { display: flex; flex-direction: column; justify-content: space-between;}


/* portals.php */
.portalsWrap header { border-bottom: 1px solid #ccc;}
.portalsWrap main { padding-top: 4rem; display: flex; flex-direction: column; justify-content: space-between;}
.portalsWrap .portal-item { padding-bottom: 3rem;}
.portalsWrap .portal-item + .portal-item { padding: 3rem 0; border-top: 1px solid #eee;}
.portalsWrap .portal-item:last-child { padding-bottom: 0;}
.portalsWrap .portal-item .title-box { display: flex; align-items: center; justify-content: space-between;}
.portalsWrap .portal-item .title-box h3 { font-size: 2rem; font-weight: 600; line-height: 1.3;}
.portalsWrap .portal-item .title-box a { color: #fff; padding: 0.8rem 1.6rem ; border-radius: 0.5rem; font-size: 1.6rem; font-weight: 600; background-color: var(--brand-color);}
.portalsWrap .portal-item .portal-desc { margin-top: 2rem;}
.portalsWrap .portal-item .portal-desc pre{ font-size: 1.6rem; color: #777; font-weight: 300; line-height: 1.5;}


/* wage.php */
.wageWrap header { border-bottom: 1px solid #ccc;}
.wageWrap main { padding-top: 4rem;}
.wageWrap .text-box p{ font-size: 1.4rem; color: #999; line-height: 1.4;}
.wageWrap .text-box p + p { margin-top: 1rem;}

.wageWrap .wage-calc { margin-top: 4rem}
.wageWrap .wage-calc h3 { font-size: 1.8rem; margin-bottom: 2rem;}
.wageWrap .wage-calc .input-box { display: flex; align-items: center; justify-content: space-between; background-color: #f2f2f2; border-radius: 1rem; padding: 1.6rem 2rem;}
.wageWrap .wage-calc .input-box input { background-color: transparent;  font-size: 1.6rem; flex: 1; min-width: 0; }
.wageWrap .wage-calc .input-box span { font-size: 1.6rem; font-weight: 600; flex-shrink: 0;}
.wageWrap .wage-calc .calc-result { background-color: #f2f2f2; border-radius: 1rem; padding: 3rem 2rem; margin-top: 2rem;}
.wageWrap .wage-calc .calc-result .result-item { display: flex; align-items: center; justify-content: space-between;}
.wageWrap .wage-calc .calc-result .result-item + .result-item { margin-top: 1.6rem;}
.wageWrap .wage-calc .calc-result .result-item span { color: #fff; padding: 0.8rem 1.6rem ; border-radius: 0.5rem; font-size: 1.6rem; font-weight: 600; background-color: var(--brand-color); display: inline-block; min-width: 8rem; text-align: center;}
.wageWrap .wage-calc .calc-result .result-item p { font-size: 1.8rem; font-weight: 500;}
.wageWrap .button-wrap { margin-top: 2rem; display: flex; align-items: center; gap: 1rem;}
.wageWrap .button-wrap button { flex: 1; min-width: 0;  font-size: 1.6rem; font-weight: 200; text-align: center; padding: 1.6rem; border-radius: 0.5rem;}
.wageWrap .button-wrap .resetBtn { border: 1px solid #ccc; color: #777;}
.wageWrap .button-wrap .calcBtn { color: #fff; background-color: #666;}


/* job.php */
.jobWrap .search_form .input-box { display: flex; align-items: center; justify-content: space-between; background-color: #f2f2f2; padding: 1.6rem 2rem; border-radius: 0.5rem;}
.jobWrap .search_form .input-box .btn-search { width: 2rem;}
.jobWrap .search_form .input-box input { font-size: 1.8rem; background-color: transparent; flex: 1; min-width: 0; padding-right: 1rem;}
.jobWrap .search_form .search-filter { display: flex; align-items: center; justify-content: center; margin-top: 1rem;}
.jobWrap .search_form .search-filter .filter-list { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; display: flex; align-items: center; gap: 0.6rem; -ms-overflow-style: none;  scrollbar-width: none; white-space: nowrap;}
.jobWrap .search_form .search-filter .filter-list button { font-size: 1.4rem; padding: 1.2rem 2rem; border-radius: 100px; border: 1px solid #ccc; display: flex; align-items: center; gap: .8rem; color: #888; }
.jobWrap .search_form .filter-list::-webkit-scrollbar { display: none; width: 0;height: 0;}
.jobWrap .search_form .search-filter .filter-list button.active { border: 1px solid var(--brand-color); color: var(--brand-color);}
.jobWrap .search_form .search-filter .filter-detail { flex-shrink: 0; width: 1.6rem; box-sizing: initial; margin-left: 1rem; padding: 0 2rem 0 1rem; }


.jobWrap .sub-contents {margin-top: 4rem;}
.jobWrap .job-list { display: flex; flex-direction: column;}
.jobWrap .job-item { padding-bottom: 2rem;}
.jobWrap .job-item + .job-item { padding: 2rem 0; border-top: 1px solid #ccc;}
.jobWrap .job-item .item-header{ display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;}
.jobWrap .job-item .item-header .job-title { flex: 1; min-width: 0;}
.jobWrap .job-item .item-header .job-title span { font-size: 1.6rem; color: #999; margin-bottom: 0.4rem; display: block; font-weight: 300;}
.jobWrap .job-item .item-header .job-title h3 { font-size: 1.8rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; display: -webkit-box;}
.jobWrap .job-item .item-header .go-btn { color: #fff; padding: 0.8rem 1.6rem ; border-radius: 0.5rem; font-size: 1.6rem; font-weight: 400; background-color: var(--brand-color); display: inline-block;}
.jobWrap .job-item .item-content { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem;}
.jobWrap .job-item .item-content .con-box { display: flex; font-size: 1.6rem;}
.jobWrap .job-item .item-content .con-box span { display: inline-block; min-width: 10rem; font-size: inherit; color: #999;}
.jobWrap .job-item .item-content .con-box p { font-size: inherit; }


/* job_detail.php */
.jobDetailWrap header { border-bottom: 1px solid #ccc;}
.jobDetailWrap main { padding-top: 4rem;}

.jobDetailWrap .job-header .job-title span{ font-size: 1.6rem; color: #999; margin-bottom: 0.4rem; display: block; font-weight: 300;}
.jobDetailWrap .job-header .job-title h3 { font-size: 2rem; line-height: 1.4}
.jobDetailWrap .job-header .job-info { display: flex; flex-direction: column; gap: 1.8rem; margin-top: 3rem; line-height: 1.4;}
.jobDetailWrap .job-header .info-box { display: flex; align-items: flex-start; font-size: 1.6rem;}
.jobDetailWrap .job-header .info-box span{ min-width: 7rem; color: var(--brand-color); display: block; flex-shrink: 0; font-size: inherit; font-weight: 600; line-height: 1.2;}
.jobDetailWrap .job-header .info-box p { font-size: inherit; font-weight: 300; color: #777; flex: 1; min-width: 0; line-height: 1.5; transform: translateY(-0.2rem);}

.jobDetailWrap .job-contents { margin-top: 3rem;}
.jobDetailWrap .con-box { padding: 2rem; border-radius: 1rem; background-color: #f2f2f2;}
.jobDetailWrap .con-box + .con-box { margin-top: 2rem;}
.jobDetailWrap .con-box .job-desc { display: flex; flex-direction: column; gap: 1rem; line-height: 1.4;}
.jobDetailWrap .con-box .strong { color: #fff; padding: 0.8rem 1.6rem ; border-radius: 0.5rem; font-size: 1.6rem; font-weight: 600; background-color: var(--brand-color); display: inline-block; margin-bottom: 2.8rem;}
.jobDetailWrap .con-box .desc-box { display: flex; align-items: flex-start; font-size: 1.6rem; }
.jobDetailWrap .con-box .desc-box span{ min-width: 8rem; display: block; flex-shrink: 0; font-size: inherit; font-weight: 600; line-height: 1.2;}
.jobDetailWrap .con-box .desc-box p { font-size: inherit; font-weight: 300; color: #777; flex: 1; min-width: 0; line-height: 1.5; transform: translateY(-0.2rem);}

/* news.php */
.newsWrap .news-list { display: flex; flex-direction: column; gap: 2rem;}
.newsWrap .news-item { display: flex; align-items: center; gap: 1.6rem; height: 10rem;}
.newsWrap .news-item .thumbnail{ flex-shrink: 0; width: 16rem; height: 100%; background-color: #f2f2f2; overflow: hidden;}
.newsWrap .news-item .thumbnail img { height: 100%; width: 100%; object-fit: cover; object-position: center;}
.newsWrap .news-item .text-box { flex: 1; min-width: 0;}
.newsWrap .news-item .text-box .news-title { font-size: 1.6rem; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-overflow: ellipsis; overflow: hidden;}
.newsWrap .news-item .text-box .news-content { font-size: 1.4rem; color: #666; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; margin-top: 0.4rem;}
.newsWrap .news-item .text-box .news-date { font-size: 1.4rem; color: #999; margin-top: 0.8rem; display: block;}

/* pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1.6rem; margin-top: 4rem;}
.pagination .page-link.current { color: #333; font-weight: 700;}
.pagination .page-link { color: #666; font-size: 1.8rem;}