@charset "utf-8";

@media (max-width:1200px){
    /* 웹진 갤러리 게시판 - 리스트 페이지 */
    .webzine-list ul li .img-box {max-width: 240px;}
    .webzine-list ul li .text-box {padding-top: 10px;}

    /* 문의폼 */
    .inquiry-table .input-item .input-md {max-width: 210px; flex: 0 0 210px;}

    /* 가족친화인증 - 인증사업소개 - 가족친화인증이란? */
    .policy-intro {padding: 46px 300px 43px 70px;}
}

@media (max-width:1024px){
    .sub-visual {margin: 110px 0 70px; padding: 0;}
    .sub-visual .inner {height: 280px; border-radius: 0;}
    .sub-visual .inner:after {bottom: 44px; right: 14px; width: 127px; background-size: 127px auto;}
    .sub-visual-inner .title-wrap {text-align: left; padding-top: 80px;}
    .sub-visual-inner .title {font-size: 36px; margin-bottom: 20px;}
    .sub-visual-inner .path ol {justify-content: flex-start; margin: 0 -14px;}
    .sub-visual-inner .path ol li {padding: 0 14px;} 

    .sub-visual-inner .page-actions {top: 105px; right: 0;}
    .sub-visual-inner .page-actions .btn-share {margin-right: 0;}
    .sub-visual-inner .page-actions .btn-print {display: none;}
    .share-popup {top: calc(100% - 20px); right: 0;}

    .lnb {width: calc(100% - 40px); z-index: 20;}
    .lnb ul {display: none; flex-direction: column;}
    .btn-lnb-toggle {position: relative; display: block; width: 100%; padding: 19px 16px; background: var(--primary); color: #fff; border: none; border-radius: 10px 10px 0 0; font-size: 16px; font-weight: 600; text-align: left;}
    .btn-lnb-toggle:after {position: absolute; top: 50%; right: 20px; transform: translateY(-50%); content: ''; width: 24px; height: 24px; background: url('../images/sub/icon-lnb-open.png') no-repeat center center; z-index: 10; transition: all 0.5s;}
    .btn-lnb-toggle.active:after {transform: translateY(-50%) rotate(180deg);} 
    .lnb ul {display: none; border-radius: 0 0 10px 10px; background: #fff; border-radius: 0 0 10px 10px; box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.13);}
    .lnb ul li a {display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 56px; font-size: 16px; font-weight: 600; line-height: normal; color: #fff; text-align: left; background: #fff; color: var(--font02); border-right: 0; padding: 16px 20px;}
    .lnb ul li:last-child a {border-right: 0;}
    .lnb ul li a[aria-current="page"] {color: #222; background: #F5F7FB;} 

    .sub-cont {padding-bottom: 80px;}
    .sub-cont .page-title {margin-bottom: 30px;}
    .sub-cont .page-title.mb-20 {margin-bottom: 20px;} 
    .sub-cont .page-title h3 {font-size: 30px; letter-spacing: -0.65px;}

    /* 서브 탭메뉴 */
    .sub-tab-menu {margin-bottom: 40px;}
    .sub-tab-menu ul {display: flex; flex-wrap: wrap; border-radius: 10px; border: 1px solid var(--line); overflow: hidden;}
    .sub-tab-menu ul li {flex: 1;}
    .sub-tab-menu a {height: 100%; align-content: center; font-size: 16px; padding: 16px; border-bottom: 0; border-right: 1px solid var(--line);}
    .sub-tab-menu li:last-child a {border-right: 0;}
    .sub-tab-menu a[aria-current="page"] {font-weight: 600; background: var(--primary); color: #fff;}
    .sub-tab-menu a:hover {color: var(--font03);}
    .sub-tab-menu a[aria-current="page"]:hover {color: #fff;}
    .sub-tab-menu a[aria-current="page"]:after {display: none;}

    /* 기본 갤러리 게시판 - 리스트 페이지 */
    .gallery-list ul li {width: 33.3333%;}

    /* 웹진 갤러리 게시판 - 리스트 페이지 */
    .webzine-list ul li {width: 100%;}   
    .webzine-list ul li a {gap: 20px; padding: 20px 0;}
    .webzine-list ul li:nth-child(odd) {border-right: 0;}
    .webzine-list ul li:nth-child(even) a {padding-left: 0;} 
    .webzine-list ul li .img-box {max-width: 240px;}
    .webzine-list ul li .text-box {padding-top: 10px;}
    .webzine-list ul li .text-box .cate-title {font-size: 13px; margin-bottom: 6px;}
    .webzine-list ul li .text-box h4 {font-size: 16px;}

    /* pagination */
    .pagination {margin-top: 40px;}

    /* 관심등록 갤러리 게시판 - 리스트 페이지 */
    .gallery-like-list ul li {width: 33.3333%;}

    /* 게시판 기본 뷰페이지 */
    .board-view .view-header .view-title {font-size: 21px; margin-bottom: 12px;}
    .board-view .view-cont {padding: 40px 0 60px;}
    .btn-area {margin-top: 50px;}
    .btn-area a {width: 150px; height: 60px;}

    /* 문의폼이 있는 뷰페이지 */
    .view-inquiry-form {margin-top: 40px;}

    /* 답변 기능이 있는 뷰페이지 */
    .view-answer {padding: 20px 20px 30px; margin-top: 40px;}

    /* 일반 게시판 멤버 작성 리스트페이지 */
    .board-btn {margin-top: 10px;}
    .board-btn .btn-write {width: 90px; line-height: 40px; padding-left: 20px;}
    .board-btn .btn-write:after {left: 15px;}

    /* faq */
    .faq-list .faq-question {padding: 30px 50px; font-size: 18px;}
    .faq-list .faq-question span {top: 24px; width: 40px; height: 40px; font-size: 22px; line-height: 40px;}
    .faq-list .faq-answer {padding: 30px;}

    /* 마이페이지 - 비밀번호 확인 */
    .login-box {max-width: 440px;}
    .login-box .login-title {margin-bottom: 25px;}
    .login-box .login-title h3 {font-size: 26px; margin-bottom: 10px;}
    .login-box .login-title p {font-size: 16px;} 
    .login-box .btn-submit {margin-top: 20px;}

    /* 로그인 */
    .login-section {margin: 150px 0 80px;}
    .login-section .login-box {padding: 60px 59px;}
    .login-links {margin: 20px -16px 40px;}
    .sns-login-title {font-size: 18px;}

    /* 로그인 - 아이디/비밀번호찾기 */
    .login-section .login-box.find-box {padding: 60px 40px;}
    .tab-list li button {font-size: 16px;}
    .login-box .tab-panel {margin-top: 50px;}
    .login-box .tab-panel .text-box {margin-bottom: 25px;}
    .login-box .tab-panel .text-box p {font-size: 16px;}

    /* 문의폼 */
    .inquiry-form:not(:last-child) {margin-bottom: 60px;}
    .inquiry-form .form-header {margin-bottom: 15px;}
    .inquiry-form .form-title {font-size: 22px;}
    .inquiry-table col:nth-child(odd) {width: 180px !important;}
  
    /* 문의폼 수상 및 인증  */
    .award-row {gap: 10px;}
    #award-list .input-item:nth-child(1) {margin-right: 0; width: 100%;}
    #award-list .input-item:nth-child(2) {margin-right: 0; width: calc(100% - 102px);}
    #award-list .input-item label {max-width: 90px; width: 100%;} 
    #award-list .input-item input {width: 1%; flex: 1 1 auto;}
    #award-list .input-item .input-md {max-width: none;}

    /* 문의폼 input group */
    .inquiry-table .inquiry-item-employee-num .input-item,
    .inquiry-table .inquiry-item-revenue .input-item {width: 100%;}
    .inquiry-table .inquiry-item-employee-num .input-item label,
    .inquiry-table .inquiry-item-revenue .input-item label {max-width: 50px; width: 100%;}
    .inquiry-table .inquiry-item-employee-num .input-item .input-md,
    .inquiry-table .inquiry-item-revenue .input-item .input-md {max-width: none; width: 1%; flex: 1 1 auto;}

    .inquiry-table .inquiry-item-student .input-expected-num {gap: 10px 20px;}
    .inquiry-table .inquiry-item-student .input-expected-num .input-title {width: 100%;}

    /* 개인정보처리방침 */
    .consent-item:not(:last-child) {margin-bottom: 40px;}
    .consent-header {font-size: 22px; margin-bottom: 10px;}
    .consent-content {border-radius: 10px; padding: 20px; margin-bottom: 16px;} 

    /* 회원가입 */
    .join-section {margin: 130px 0 80px;}
    .join-title h3 {font-size: 26px; margin-bottom: 20px;}
    .join-steps {margin-bottom: 40px;}
    .terms-all-check {padding: 25px 10px;}

    /* 센터소개 - 인사말 */
    .greeting .wrap {gap: 40px;}
    .greeting .img-box {max-width: 280px; height: 400px;}
    .greeting .text-box h4 {font-size: 28px; margin-bottom: 20px;}
    .greeting .text-box p:not(last-of-type) {margin-bottom: 24px;}
    .greeting .text-box .name {margin-top: 20px;}

    /* 센터소개 - 찾아오시는 길 */
    .location .map-box {margin-bottom: 20px;}
    .location .map-box .root_daum_roughmap {height: 300px !important;}
    .location .map-box .root_daum_roughmap .wrap_map {height: 300px !important;}
    .location .info-box .address {font-size: 20px; padding-left: 32px;}
    .location .info-box .address:before {top: 0; background-size: 18px auto;}
    .location .info-box ul {margin: 0 -15px;}
    .location .info-box li {padding: 0 15px;}

    /* 가족친화인증 - 인증사업소개 - 가족친화인증이란? */
    .policy-intro {padding: 155px 40px 40px 40px;}
    .family-friendly-intro .policy-intro:after {top: 40px; right: auto; left: 40px; transform: translateY(0);}
    .policy-intro h4 {font-size: 20px; margin-bottom: 16px;}

    .sub-section .section-title {margin-bottom: 16px;}
    .sub-section .section-title h4 {font-size: 22px; letter-spacing: -0.55px;}
    .sub-group-title {font-size: 18px; margin-bottom: 10px;}

    .sub-list-check li:not(:last-child) {margin-bottom: 16px;}
    .sub-list-check li:before {position: absolute; top: 0; left: 0; content: ''; width: 22px; height: 22px; background: url('../images/sub/icon-list-check.png') no-repeat center center;}
    .sub-list-check a {display: inline-block; color: var(--primary); text-decoration: underline;}
    .sub-list-check .sub-list-desc {display: block; font-size: 16px; font-weight: 500; line-height: 1.5em; color: var(--font03); margin-top: 10px;}

    /* 가족친화인증 - 인천시 가족친화인증기업 */
    .company-list ul {margin: -30px -15px;}
    .company-list ul li {width: 50%; padding: 30px 15px;}
    .company-list .text-box {padding: 30px;}

    /* 일생활균형 지원사업 - 가족친화기업확대 컨설팅 */
    .work-life-consulting .policy-intro {padding: 40px 40px 155px 40px;}
    .work-life-consulting .policy-intro:after {right: 20px; background-size: 200px auto; background-position: right bottom;}

    .sub-list-process li figure img {width: 90px;}

    /* 일생활균형 지원사업 - 직장교육 */
    .work-life-education .policy-intro {padding: 40px 40px 155px 40px;}
    .work-life-education .policy-intro:after {right: 20px; background-size: 230px auto; background-position: right bottom;}

    /* 일생활균형 지원사업 - 근로자 여가지원 */
    .work-life-leisure .policy-intro {padding: 40px 40px 155px 40px;}
    .work-life-leisure .policy-intro:after {right: 40px; background-size: 210px auto; background-position: right bottom;}
    .work-life-leisure .sub-list-process {gap: 30px 0;}
    .work-life-leisure .sub-list-process li {width: 20%;}
    .work-life-leisure .sub-list-process li figure:after {right: -24px;}

    /* 워라밸 상담 리스트페이지 */
    .counseling-list.sub-cont section:not(:last-child) {margin-bottom: 20px;}
    .counseling-list .policy-intro {padding: 155px 40px 40px 40px;}
    .counseling-list .policy-intro:after {top: 40px; right: auto; left: 40px; transform: translateY(0);}
    .counseling-list .counseling-field {margin-bottom: 60px;}
    .counseling-list .counseling-field .wrap {padding: 40px 40px;}
    .counseling-list .counseling-field .title {max-width: 140px;}
    .counseling-list .counseling-field .title h5 {font-size: 18px;}
    .counseling-list .counseling-field .sub-list-check li {width: 100%;}
    .counseling-list .counseling-field .sub-list-check li:nth-child(3) {margin-bottom: 16px;}
}

@media (max-width:768px){
    .sub-visual {margin: 66px 0 50px;}
    .sub-visual .inner {height: 230px;}
    .sub-visual-inner .title-wrap {text-align: left; padding-top: 60px;}
    .sub-visual-inner .title {font-size: 30px;}
    .sub-visual-inner .page-actions {top: 60px;}

    .sub-cont .page-title h3 {font-size: 26px;}

    /* 서브 탭메뉴 */
    .sub-tab-menu {margin-bottom: 30px;}
    .sub-tab-menu ul {flex-wrap: wrap;}
    .sub-tab-menu ul li {width: 50%; flex: auto;}
    .sub-tab-menu a {height: 52px; padding: 0 10px;}
    .sub-tab-menu li:nth-child(even) a {border-right: 0;}
    .sub-tab-menu li:nth-child(n+3) a {border-top: 1px solid var(--line);}

    /* board-top */
    .board-top {flex-direction: column-reverse; align-items: flex-start; margin-bottom: 20px;}
    .board-top .board-info p {font-size: 16px;}
    .board-top .board-search {width: 100%; margin-bottom: 30px;}
    .board-top .board-search .search-group {flex-direction: column; width: 100%;}
    .board-top .board-search select {min-width: auto; width: 100%;}
    .board-top .search-box  {position: relative; width: 100%;}

    /* 기본 갤러리 게시판 - 리스트 페이지 */
    .gallery-list ul {margin: -15px -10px;}
    .gallery-list ul li {width: 50%; padding: 15px 10px;}    

    /* 웹진 갤러리 게시판 - 리스트 페이지 */
    .webzine-list ul li a {gap: 16px;}
    .webzine-list ul li .img-box {max-width: 200px;}
    .webzine-list ul li .text-box {padding-top: 10px;}
    .webzine-list ul li .text-box .cate-title {font-size: 13px; margin-bottom: 6px;}
    .webzine-list ul li .text-box h4 {font-size: 16px; height:calc(1.5em * 1 * 4); -webkit-line-clamp:4;}

    /* 관심등록 갤러리 게시판 - 리스트 페이지 */
    .gallery-like-list ul {margin: -15px -10px;}
    .gallery-like-list ul li {width: 50%; padding: 15px 10px;}

    /* 게시판 기본 뷰페이지 */
    .board-view .view-header .view-title {font-size: 21px; margin-bottom: 12px;}
    .board-view .view-header .view-info ul {margin: 0 -10px;}
    .board-view .view-header .view-info ul li {padding: 0 10px; font-size: 14px; letter-spacing: -0.28px;}
    .board-view .view-header .view-btns {margin: 0 -10px;}
    .board-view .view-header .view-btns li {padding: 0 10px;}
    .board-view .view-header .view-btns .btn {font-size: 14px; letter-spacing: -0.28px;}
    .board-view .view-cont {min-height: 250px; padding: 30px 0 40px;}
    .btn-area {margin-top: 50px;}
    .btn-area a {width: 150px; height: 60px;}

    /* 게시판 첨부파일있는 뷰페이지 */
    .view-file table tbody th {width: 100px;}
    .view-file .btn-file-download {min-width: auto; width: 100%;}

    /* 일반 게시판 리스트페이지 */
    .board-table {table-layout: unset;}
    .board-table colgroup col {width: 100% !important;}
    .board-table thead {display: none;}
    .board-table tbody tr {display: block; width: 100%; padding: 20px 15px;}
    .board-table tbody td {display: flex; padding: 0;}
    .board-table tbody td.num {display: none;}
    .board-table tbody .board-notice td.num {display: block; text-align: left;}
    .board-table tbody td:not(:last-child) {margin-bottom: 5px;}
    .table-with-box tbody td {padding: 0;}
    .board-table tbody td .mob-only {display: block;}

    /* 마이페이지 - 비밀번호 확인 */
    .login-box {max-width: 380px;}
    .login-box .login-title h3 {font-size: 24px;}

    /* 로그인 */
    .login-section {margin: 120px 0 80px;}
    .login-section .login-box {padding: 50px 29px;}
    .login-links {margin: 20px -16px 40px;}
    .sns-login-title {font-size: 18px;}

    /* 로그인 - 아이디/비밀번호찾기 */
    .login-section .login-box.find-box {padding: 60px 30px;}

    /* 문의폼 */
    .inquiry-form:not(:last-child) {margin-bottom: 60px;}
    .inquiry-form .form-header {margin-bottom: 15px;}
    .inquiry-form .form-title {font-size: 20px;}
    .inquiry-table {display: block; width: 100%;}
    .inquiry-table tbody {display: block; width: 100%;}
    .inquiry-table col:nth-child(odd) {width: 100% !important;}
    .inquiry-table tr {display: block; border-bottom: 0;}
    .inquiry-table th {display: block; width: 100% !important; font-size: 16px; padding: 30px 0 10px; background: transparent;}
    .inquiry-table td {display: block; width: 100% !important; padding: 0;}
    .inquiry-table input {max-width: none; padding: 9px 10px;}
    .inquiry-table select {max-width: none; padding: 9px 20px 9px 10px; background: url('../images/sub/icon-option-open.png') no-repeat right 4px center;}
    .inquiry-table textarea {padding: 10px 10px;}
    .inquiry-table .phone-inputs select,
    .inquiry-table .phone-inputs input,
    .inquiry-table .email-inputs select,
    .inquiry-table .email-inputs input {max-width: none; width: 33.33333%;}
    .inquiry-table .time-inputs input {max-width: none; width: calc(50% - 15px);}

    .inquiry-table .wrap {flex-direction: column; align-items: flex-start; gap: 10px;}
  
    /* 문의폼 첨부파일 */
    .filebox {max-width: none; flex-direction: column; align-items: flex-start; gap: 10px;}
    .filebox input {padding: 11px 10px;}

    /* 개인정보처리방침 */
    .consent-item:not(:last-child) {margin-bottom: 40px;}
    .consent-header {font-size: 20px; margin-bottom: 10px;}
    .consent-content {border-radius: 10px; padding: 15px;} 
    
    .inquiry-table .text-guide-absolute {position: relative; left: 0;}

    /* 문의폼 최하단 버튼 */
    .form-actions {gap: 10px; margin-top: 50px;}
    .form-actions .btn {width: 150px; line-height: 58px; font-size: 16px;}

    /* 회원가입 */
    .join-title h3 {font-size: 24px; margin-bottom: 20px;}
    .join-steps {margin-bottom: 40px;}
    .terms-all-check {padding: 25px 10px;}   
 
    /* 센터소개 - 인사말 */
    .greeting .wrap {flex-direction: column;}
    .greeting .img-box {max-width: none; height: 188px; background-image: url('../images/sub/greeting-img-mob.jpg');}
    .greeting .text-box {width: 100%; flex: auto;}
    .greeting .text-box h4 {font-size: 24px;}

    /* 센터소개 - 찾아오시는 길 */
    .location .info-box ul {display: block; margin: -2px -15px;}
    .location .info-box li {padding: 2px 15px;}
    .location .info-box li:after {display: none;}
    
    /* 가족친화인증 - 인증사업소개 - 가족친화인증이란? */
    .grid-box {display: flex; flex-direction: column;}
    .grid-box .grid-item:not(:last-child) .grid-title,
    .grid-box .grid-item:not(:last-child) .grid-content {border-right: 0;}

    /* 워라밸 상담 리스트페이지 */
    .counseling-list .counseling-field {margin-bottom: 50px;}
    .counseling-list .counseling-field .wrap {flex-direction: column;}
    .counseling-list .counseling-field .title {max-width: none; margin-bottom: 20px;}

    /* 가족친화인증 - 인천시 가족친화인증기업 */
    .company-list ul {margin: -15px;}
    .company-list ul li {width: 100%; padding: 15px;}

    /* 일생활균형 지원사업 - 가족친화기업확대 컨설팅 */
    .sub-list-process {gap: 30px 0; padding: 0;}
    .sub-list-process li {width: 33.333%;}
    .sub-list-process li figure:after {right: -24px; background-size: 38px auto;}

    /* 일생활균형 지원사업 - 근로자 여가지원 */
    .work-life-leisure .sub-list-process li {width: 33.333%;}
}

@media (max-width:480px){
    /* 기본 갤러리 게시판 - 리스트 페이지 */
    .gallery-list ul li {width: 100%;}  

    /* 웹진 갤러리 게시판 - 리스트 페이지 */
    .webzine-list ul li a {gap: 16px;}
    .webzine-list ul li .img-box {max-width: 140px;}
    .webzine-list ul li .text-box {padding-top: 0;}
    .webzine-list ul li .text-box .cate-title {font-size: 13px; margin-bottom: 4px;}
    .webzine-list ul li .text-box h4 {font-size: 16px; height:calc(1.5em * 1 * 3); -webkit-line-clamp:3;}

    /* 관심등록 갤러리 게시판 - 리스트 페이지 */
    .gallery-like-list ul li {width: 100%;}

    /* 일생활균형 지원사업 - 가족친화기업확대 컨설팅 */
    .sub-list-process li {width: 50%;}
    .sub-list-process li figure:after {right: -24px; background-size: 30px auto;}

    /* 일생활균형 지원사업 - 근로자 여가지원 */
    .work-life-leisure .sub-list-process li {width: 50%;}
}