#header.color{ background: #fff; } #header.on{ background: none; } @media screen and(max-width: 1200px){ #header.on{ background: #F3F3F3; } } /* 서브 비주얼 배경이미지 */ #sub-visual .bg.bg1::before{ background: url("/img/sub/company_bg.jpg") no-repeat center center / cover; } #sub-visual .bg.bg2::before{ background: url("/img/sub/business_bg.jpg") no-repeat center center / cover; } #sub-visual .bg.bg3::before{ background: url("/img/sub/news_bg.jpg") no-repeat center center / cover; } #sub-visual .bg.bg4::before{ background: url("/img/sub/esg_bg.jpg") no-repeat center center / cover; } #sub-visual .bg.bg5::before{ background: url("/img/sub/recruit_bg.jpg") no-repeat center center / cover; } #sub-visual .bg.bg6::before{ background: url("/img/sub/news_bg.jpg") no-repeat center center / cover; } /* 서브 비주얼 */ #sub-visual{ position: relative; z-index: 50; text-align: center; color: #fff; /* padding: 16% 0; */ padding: 9% 0 7%; } #sub-visual .bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -10; overflow: hidden; } #sub-visual .bg::before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: scale(1.2); transform-origin: center center; animation: scale 1s 0.5s forwards; } #sub-visual .text-box p{ font-size: 2rem; font-weight: 500; } #sub-visual .text-box h2{ font-size: 7rem; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; margin: 15px 0 70px; } #sub-visual .text-box h2 span{ display: inline-block; transform: translateY(30px); opacity: 0; animation: text-up 1.3s 1s forwards; } @keyframes scale{ 0%{ transform: scale(1.2); } 100%{ transform: scale(1); } } @keyframes text-up{ 0%{ transform: translateY(30px); opacity: 0; } 100%{ transform: translateY(0); opacity: 1; } } /* lnb */ #sub-visual .lnb-box{ overflow: hidden; animation: hidden 0.8s 1s forwards; } #sub-visual .lnb{ display: flex; justify-content: center; align-items: center; transform: translateY(100%); animation: up 0.8s 1s forwards; } #sub-visual .lnb li a, #sub-visual .lnb li button{ font-size: 1.7rem; font-weight: 500; color: #fff; line-height: 1.3; } #sub-visual .lnb li{ position: relative; } #sub-visual .lnb > li::after{ content: url("/img/sub/lnb_after.png"); position: absolute; top: 53%; right: -3px; transform: translateY(-50%); opacity: 0.6; } #sub-visual .lnb > li:last-of-type::after{ display: none; } #sub-visual .lnb li a{ display: inline-block; } #sub-visual .lnb > li > a, #sub-visual .lnb li button{ padding: 12px 24px; } #sub-visual .lnb > li > a img{ position: relative; top: 4px; } #sub-visual .lnb li button{ background: none; border: none; font-family: var(--baseFont); color: #fff; padding-right: 52px; position: relative; cursor: pointer; } #sub-visual .lnb li button::after{ content: url("/img/sub/depth_arrow.png"); position: absolute; top: 42%; right: 12px; transform: translateY(-50%); transition: all 0.5s; } #sub-visual .lnb .depth02{ min-width: fit-content; width: calc(100% + 5px); position: absolute; left: 50%; z-index: 50; transform: translateX(-50%); background: #fff; padding: 10px 0; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15); text-align: left; display: none; } #sub-visual .lnb .depth02::before{ content: ""; width: 100%; height: 2px; background: var(--mainColor); position: absolute; top: 0; left: 50%; transform: translateX(-50%); } #sub-visual .lnb .depth02 li{ overflow: hidden; } #sub-visual .lnb .depth02 li a{ width: 100%; color: #111; padding: 5px 24px; transition: all 0.5s; } #sub-visual .lnb .depth02 li a:hover{ font-weight: 600; color: var(--mainColor); } #sub-visual .lnb li.active button::after{ top: 58%; transform: translateY(-50%) scaleY(-1); } @keyframes hidden{ 0%{ overflow: hidden; } 100%{ overflow: visible; } } @keyframes up{ 0%{ transform: translateY(100%); } 100%{ transform: translateY(0); } } /* 서브 공통 */ .sub-content{ padding: 128px 0 175px; } .page-title{ font-size: 5rem; font-weight: 700; color: #111; text-align: center; margin-bottom: 90px; letter-spacing: 0.02em; } .page-title span:not(.ch){ font-size: 2rem; } .page-title .ch{ font-weight: 600; } .section-title{ font-size: 4.5rem; font-weight: 700; color: #111; text-align: center; } .sub-title{ font-size: 3rem; font-weight: 700; color: #111; text-align: center; } .gray-bg{ background: #F6F6F6; } /* 페이징 - paging */ .paging{ display: flex; justify-content: center; align-items: center; margin-top: 70px; } .paging a{ display: flex; justify-content: center; align-items: center; width: 34px; height: 34px; background: none; border: none; line-height: 1; } .paging .arr{ display: flex; justify-content: center; align-items: center; } .paging .arr a{ font-size: 2rem; color: #666; } .paging .arr a.first i:first-of-type, .paging .arr a.last i:first-of-type{ margin-right: -12px; } .paging ul{ display: flex; justify-content: center; align-items: center; margin: 0 15px; } .paging ul li a{ border-radius: 50%; font-size: 1.5rem; font-weight: 400; color: #111; } .paging ul li.on a{ background: var(--mainColor); color: #fff; } /* 한자 */ .ch{ font-family: var(--Pretendard); font-weight: 300; } /* 버튼 */ .button{ width: 190px; height: 70px; display: flex; justify-content: center; align-items: center; border: none; background: var(--mainColor); border-radius: 100px; font-family: var(--baseFont); font-size: 1.7rem; font-weight: 500; color: #fff; } .button:link, .button:visited{ color: #fff; } .button.gray{ background: #F6F6F6; color: #222; } .button.gray:link, .button.gray:visited{ color: #222; } .button.light{ background: #1E9F33; } /* 네이버 인증하기 버튼 */ #naverIdLogin a{ display: inline-block; } #naverIdLogin img{ width: 220px; height: auto; } /* 스크롤바 커스텀 */ .scroll-y{ overflow-y: scroll; } .scroll-y::-webkit-scrollbar{ width: 45px; } .scroll-y::-webkit-scrollbar-thumb{ background: #555; background-clip: padding-box; border: 20px solid transparent; border-radius: 100px; } .scroll-y::-webkit-scrollbar-track{ background: #EEE; background-clip: padding-box; border: 20px; border: 20px solid transparent; border-radius: 100px; } @media screen and (max-width: 1600px){ #sub-visual .text-box h2{ margin-bottom: 40px; } } @media screen and (max-width: 1500px){ /* 서브 비주얼 */ #sub-visual .text-box h2{ font-size: 6rem; } /* 서브 공통 */ .sub-content{ padding: 100px 0 130px; } .page-title{ font-size: 4.5rem; margin-bottom: 60px; } .section-title{ font-size: 3.5rem; } .sub-title{ font-size: 2.7rem; } /* 버튼 */ .button{ width: 160px; height: 60px; } /* 네이버 인증하기 버튼 */ #naverIdLogin img{ width: auto; height: 58px; } } @media screen and (max-width: 1200px){ /* 서브 비주얼 */ #sub-visual{ padding: 100px 0 80px; } #sub-visual .text-box h2{ font-size: 5rem; margin-bottom: 20px; } /* 서브 공통 */ .sub-content{ padding: 60px 0 100px; } .page-title{ font-size: 4rem; margin-bottom: 30px; } .page-title span:not(.ch){ font-size: 1.7rem; } .section-title{ font-size: 3.2rem; } .sub-title{ font-size: 2.3rem; } /* 버튼 */ .button{ width: 140px; height: 50px; font-size: 1.6rem; } } @media screen and (max-width: 850px){ /* 서브 비주얼 */ #sub-visual{ padding: 100px 0 50px; } #sub-visual .text-box h2{ font-size: 4.5rem; } #sub-visual .lnb li a{ font-size: 1.6rem; } /* 서브 공통 */ .page-title{ font-size: 3.2rem; } .section-title{ font-size: 2.8rem; } .sub-title{ font-size: 2rem; } /* 페이징 - paging */ .paging{ margin-top: 30px; } .paging a{ width: 30px; height: 30px; } .paging .arr a{ width: 25px; height: 25px; } } @media screen and (max-width: 750px){ /* 페이징 - paging */ .paging ul{ margin: 0; } } @media screen and (max-width: 500px){ /* 버튼 */ .button{ width: calc((100% - 40px) / 3); } } /* 검색박스 */ .search-box{ margin-bottom: 60px; } .search-box .flex-box{ height: 75px; display: flex; justify-content: space-between; align-items: center; } .search-box .flex-box *{ height: 100%; font-family: var(--baseFont); font-size: 1.7rem; font-weight: 400; color: #111; } .search-box .flex-box select{ width: 340px; border: none; border-radius: 0; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: #F6F6F6 url("/img/sub/recruit/select_icon.png") no-repeat center right 30px / auto; padding: 0 50px 0 30px; } .search-box .flex-box input{ width: calc(100% - 910px); background: #F6F6F6; border: none; padding: 0 30px; } .search-box .flex-box input::placeholder{ color: #ccc; } .search-box .flex-box button{ width: 200px; background: var(--mainColor); border: none; color: #fff; } /* 검색박스 - select 1개 */ .search-box.one .flex-box select{ width: 490px; } .search-box.one .flex-box input{ width: calc(100% - 710px); } /* 탭 메뉴 - .tab-menu */ .tab-menu{ margin-bottom: 25px; } .tab-menu ul{ display: flex; } .tab-menu ul li:not(:last-of-type){ margin-right: 10px; } .tab-menu ul li a{ width: 170px; height: 65px; display: flex; justify-content: center; align-items: center; background: #F6F6F6; border-radius: 100px; font-size: 1.7rem; font-weight: 500; color: #222; line-height: 0; } .tab-menu ul li.active a{ background: #1E1E1E; color: #fff; } /* 탭 메뉴 - .tabMenu */ .tabMenu{ margin-bottom: 90px; } .tabMenu ul{ display: flex; } .tabMenu ul li{ width: 50%; text-align: center; } .tabMenu ul li a{ display: flex; justify-content: center; align-items: center; width: 100%; height: 80px; font-size: 2rem; font-weight: 300; color: #666; border: 1px solid #D8D8D8; } .tabMenu ul li.active a{ background: var(--mainColor); border: 1px solid var(--mainColor); color: #fff; } /* table-list */ .table-list *{ text-align: center; font-size: 1.7rem; } .table-list table th, .table-list table td{ position: relative; } .table-list thead tr{ border-top: 1px solid #C1C1C1; border-bottom: 1px solid #C1C1C1; } .table-list thead th{ font-weight: 600; color: #222; padding: 30px 10px; } .table-list thead th::after{ content: ""; width: 1px; height: 20px; background: #ccc; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .table-list thead th:last-of-type::after{ display: none; } .table-list tbody tr{ border-bottom: 1px solid #ddd; } .table-list tbody td{ font-weight: 300; color: #333; padding: 20px 10px; } .table-list tbody td p{ font-family: var(--Pretendard); font-size: 1.8rem; width: calc(100% - 100px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .table-list tbody td a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* 상세 페이지 - view */ #view .title-box{ text-align: center; padding-bottom: 95px; } #view .title-box h3{ font-family: var(--Pretendard); font-size: 4rem; font-weight: 700; color: #111; margin-bottom: 25px; } #view .title-box ul{ display: flex; justify-content: center; } #view .title-box ul li{ font-size: 1.6rem; font-weight: 400; color: #999; padding: 0 12px; position: relative; } #view .title-box ul li::after{ content: ""; width: 1px; height: 12px; background: #999; position: absolute; top: 43%; right: 0; transform: translateY(-50%); } #view .title-box ul li:last-of-type::after{ display: none; } #view .content-box{ border-top: 1px solid #C1C1C1; border-bottom: 1px solid #C1C1C1; padding: 60px; font-size: 15px; } #view .link-box tr{ border-bottom: 1px solid #C1C1C1; } #view .link-box th{ width: 185px; background: #F6F6F6; font-size: 1.7rem; font-weight: 500; color: #111; padding: 0 30px; } #view .link-box td{ padding: 25px 35px; font-size: 1.7rem; font-weight: 300; color: #333; position: relative; } #view .link-box td p{ width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #view .link-box td p + a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; } #view .button-box{ display: flex; justify-content: center; margin-top: 90px; } #view .button-box *:not(:last-child){ margin-right: 20px; } @media screen and (max-width: 1500px){ /* 검색박스 */ .search-box{ margin-bottom: 40px; } .search-box .flex-box{ height: 70px; } .search-box .flex-box select{ width: 300px; } .search-box .flex-box input{ width: calc(100% - 820px); } .search-box .flex-box button{ width: 180px; } /* 검색박스 - select 1개 */ .search-box.one .flex-box select{ width: 400px; } .search-box.one .flex-box input{ width: calc(100% - 600px); } /* 상세 페이지 - view */ #view .title-box{ padding-bottom: 60px; } #view .title-box h3{ font-size: 3.5rem; } #view .link-box th{ font-size: 1.7rem; } #view .link-box td{ font-size: 1.7rem; padding: 20px 30px; } #view .button-box{ margin-top: 60px; } /* 탭 메뉴 - .tabMenu */ .tabMenu ul li a{ height: 70px; } } @media screen and (max-width: 1300px){ /* 검색박스 */ .search-box .flex-box{ height: 60px; } .search-box .flex-box select{ width: 250px; } .search-box .flex-box input{ width: calc(100% - 670px); padding: 0 20px; } .search-box .flex-box button{ width: 150px; } /* 검색박스 - select 1개 */ .search-box.one .flex-box select{ width: 250px; } .search-box.one .flex-box input{ width: calc(100% - 420px); } /* 탭 메뉴 */ .tabMenu{ margin-bottom: 60px; } .tab-menu ul li a{ width: 150px; height: 60px; font-size: 1.6rem; } } @media screen and (max-width: 1200px){ /* 검색박스 */ .search-box .flex-box *{ font-size: 1.7rem; } .search-box .flex-box select{ padding: 0 40px 0 20px; background-position: center right 20px; } .search-box .flex-box input{ padding: 0 20px; } /* table-list */ .table-list *{ font-size: 1.7rem; } .table-list table th{ padding: 20px 10px; } .table-list tbody td{ padding: 10px; } /* 상세 페이지 - view */ #view .title-box{ padding-bottom: 40px; } #view .title-box h3{ margin-bottom: 15px; } #view .content-box{ padding: 40px; } #view .link-box th{ width: 150px; font-size: 1.6rem; padding: 0 20px; } #view .link-box td{ font-size: 1.6rem; padding: 17px 20px; } /* 탭 메뉴 - .tabMenu */ .tabMenu ul li a{ height: 65px; font-size: 1.8rem; } } @media screen and (max-width: 1000px){ /* 검색박스 */ .search-box .flex-box{ flex-wrap: wrap; height: 130px; } .search-box .flex-box *{ height: 60px; } .search-box .flex-box select{ width: calc((100% - 10px) / 2); margin-bottom: 10px; } .search-box .flex-box input{ width: calc(100% - 160px); } .search-box .flex-box button{ width: 150px; } /* 검색박스 - select 1개 */ .search-box.one .flex-box select{ margin-bottom: 0; } /* 탭 메뉴 */ .tab-menu ul li a{ width: 130px; height: 55px; } /* 탭 메뉴 - .tabMenu */ .tabMenu{ margin-bottom: 40px; } .tabMenu ul li a{ height: 55px; font-size: 1.7rem; } } @media screen and (max-width: 850px){ /* 검색박스 - select 1개 */ .search-box.one .flex-box select{ width: 100%; margin-bottom: 10px; } .search-box.one .flex-box input{ width: calc(100% - 160px); } } @media screen and (max-width: 700px){ /* 상세 페이지 - view */ #view .title-box{ padding-bottom: 20px; } #view .title-box h3{ font-size: 3rem; margin-bottom: 10px; } #view .content-box{ padding: 30px 20px; } #view .link-box th{ width: 100px; } #view .button-box{ margin-top: 40px; } } @media screen and (max-width: 600px){ /* 검색박스 */ .search-box .flex-box input{ width: calc(100% - 110px); } .search-box .flex-box button{ width: 100px; } /* 검색박스 - select 1개 */ .search-box.one .flex-box input{ width: calc(100% - 110px); } .search-box.one .flex-box button{ width: 100px; } } @media screen and (max-width: 500px){ /* 탭 메뉴 */ .tab-menu ul{ flex-wrap: wrap; } .tab-menu ul li{ width: calc((100% - 20px) / 3); } .tab-menu ul li:nth-of-type(3n){ margin-right: 0; } .tab-menu ul li a{ width: 100%; } } /* sub-content 공통 */ .sub-content .intro .flex-box{ display: flex; justify-content: space-between; align-items: center; } .sub-content .intro .img-box{ width: 50%; } .sub-content .intro .img-box figure{ width: auto; border-radius: 30px; overflow: hidden; } .sub-content .intro .text-box{ width: 45%; } .sub-content .intro .text-box .section-title{ text-align: left; } .sub-content .intro .text-box h4{ margin-bottom: 35px; } .sub-content .intro .text-box h5{ font-size: 3rem; font-weight: 700; color: #111; margin-bottom: 40px; } .sub-content .intro .text-box p{ font-size: 1.7rem; font-weight: 400; color: #333; line-height: 1.5; } .sub-content .intro .text-box p:not(:last-of-type){ margin-bottom: 15px; } @media screen and (max-width: 1500px){ .sub-content .intro .text-box h5{ font-size: 2.5rem; } } @media screen and (max-width: 1250px){ .sub-content .intro .text-box h4{ margin-bottom: 15px; } .sub-content .intro .text-box h5{ font-size: 2.2rem; margin-bottom: 25px; } .sub-content .intro .text-box p:not(:last-of-type){ margin-bottom: 10px; } } @media screen and (max-width: 1000px){ .sub-content .intro .flex-box{ flex-direction: column; } .sub-content .intro .img-box{ width: 100%; text-align: center; } .sub-content .intro .text-box{ width: 100%; margin-top: 30px; } } @media screen and (max-width: 850px){ .sub-content .intro .text-box h5{ font-size: 2rem; } } /* 회사소개 */ /* 가치체계 */ #value section{ overflow: hidden; } #value section:not(:first-of-type){ padding-top: 130px; } #value section:not(:last-of-type){ padding-bottom: 150px; } #value .mission .section-title{ margin-bottom: 40px; } #value .mission .flex-box{ display: flex; justify-content: center; align-items: center; } #value .mission .box{ width: 52%; display: flex; align-items: center; } #value .mission .box .icon{ width: 360px; height: 360px; display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.5); border-radius: 50%; box-shadow: 0px 0px 30px 0px var(--shadow); position: relative; } #value .mission .box .icon::before{ content: ""; width: 160px; height: 160px; background: var(--bg); border-radius: 50%; opacity: 0.2; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #value .mission .box .text p:first-of-type{ font-size: 2rem; font-weight: 400; color: #111; line-height: 1.4; } #value .mission .box .text p:last-of-type{ font-size: 1.7rem; font-weight: 400; color: #333; line-height: 1.5; margin-top: 15px; } #value .mission .box.green{ flex-direction: column-reverse; text-align: center; margin: 0 auto; --bg: #048674; --shadow: rgba(4, 134, 116, 0.14); margin-bottom: -100px; } #value .mission .box.light{ flex-direction: row-reverse; --bg: #578E3B; --shadow: rgba(55, 39, 28, 0.09); margin-right: -70px; } #value .mission .box.brown{ --bg: #37271C; --shadow: rgba(87, 142, 59, 0.20); } #value .mission .box.green .text{ margin-bottom: 15px; } #value .mission .box.light .text{ margin-right: 80px; } #value .mission .box.brown .text{ margin-left: 80px; } #value .core{ text-align: center; } #value .core .section-title{ margin-bottom: 15px; } #value .core .section-title + p{ font-size: 1.7rem; font-weight: 400; color: #333; } #value .core ul{ display: flex; margin-top: 130px; } #value .core ul li{ width: calc((100% - 70px) / 3); background: #F6F6F6; padding: 50px 40px; border-radius: 20px; } #value .core ul li:not(:last-of-type){ margin-right: 35px; } #value .core ul li h6{ font-size: 2.5rem; font-weight: 700; color: #111; margin: 45px 0 15px; } #value .core ul li p{ font-size: 1.7rem; font-weight: 400; color: #333; line-height: 1.75; padding: 0 20px; } @media screen and (max-width: 1600px){ #value .mission .box.green{ margin-bottom: -90px; } #value .mission .box.light{ margin-right: -35px; } #value .mission .box .icon{ width: 330px; height: 330px; } #value .mission .box .icon img{ transform: scale(0.85); } } @media screen and (max-width: 1560px){ #value .core ul li br{ display: none; } } @media screen and (max-width: 1500px){ #value section:not(:first-of-type){ padding-top: 80px; } #value section:not(:last-of-type){ padding-bottom: 100px; } #value .intro .text-box p br{ display: none; } #value .mission .box br{ display: none; } #value .mission .box .text{ width: calc(100% - 370px); } #value .mission .box.light .text{ margin-right: 40px; } #value .mission .box.brown .text{ margin-left: 40px; } #value .core ul{ margin-top: 80px; } #value .core ul li{ padding: 40px 30px; } } @media screen and (max-width: 1300px){ #value .mission .box.green{ margin-bottom: -72px; } #value .mission .box .icon{ width: 280px; height: 280px; } #value .mission .box .icon::before{ width: 130px; height: 130px; } #value .mission .box .icon img{ transform: scale(0.75); } #value .mission .box .text{ width: calc(100% - 320px); } } @media screen and (max-width: 1250px){ #value .mission .section-title{ margin-bottom: 20px; } #value .mission .box .text p:first-of-type{ font-size: 1.8rem; } #value .core ul{ margin-top: 50px; } #value .core ul li h6{ font-size: 2.2rem; margin: 30px 0 10px; } #value .core ul li p{ padding: 0; } } @media screen and (max-width: 1200px){ #value section:not(:first-of-type){ padding-top: 50px; } #value section:not(:last-of-type){ padding-bottom: 80px; } } @media screen and (max-width: 1100px){ #value .mission .flex-box{ flex-direction: column; } #value .mission .box{ width: 100%; } #value .mission .box.green{ flex-direction: row; margin-bottom: 60px; text-align: left; } #value .mission .box.light{ flex-direction: row; margin-bottom: 60px; margin-right: 0; } #value .mission .box.green .text{ margin-left: 40px; } #value .mission .box.light .text{ margin-right: 0; margin-left: 40px; } #value .core ul{ flex-direction: column; } #value .core ul li{ display: flex; justify-content: space-between; align-items: center; width: 100%; } #value .core ul li:not(:last-of-type){ margin-right: 0; margin-bottom: 35px; } #value .core ul li .text{ width: calc(100% - 300px); } #value .core ul li h6{ margin-top: 0; } } @media screen and (max-width: 1000px){ #value .mission .box .icon{ width: 230px; height: 230px; } #value .mission .box .icon::before{ width: 110px; height: 110px; } #value .mission .box .icon img{ transform: scale(0.7); } #value .mission .box .text{ width: calc(100% - 270px); } } @media screen and (max-width: 850px){ #value .core ul li h6{ font-size: 2rem; } } @media screen and (max-width: 750px){ #value .core ul li{ flex-direction: column; } #value .core ul li .text{ width: 100%; } #value .core ul li h6{ margin-top: 30px; } } @media screen and (max-width: 600px){ #value .mission .box{ flex-direction: column; } #value .mission .box.green{ flex-direction: column; } #value .mission .box.light{ flex-direction: column; } #value .mission .box .text{ width: 70%; text-align: center; } #value .mission .box.green .text{ margin: 0; margin-top: 30px; } #value .mission .box.light .text{ margin: 0; margin-top: 30px; } #value .mission .box.brown .text{ margin: 0; margin-top: 30px; } } /* CEO 인사말 */ #ceo{ overflow: hidden; } #ceo .intro{ color: #111; padding: 10.8% 80px; border-radius: 30px; position: relative; overflow: hidden; } #ceo .intro .bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } #ceo .intro .bg div{ width: 100%; height: 100%; background: url("/img/sub/company/ceo_bg.jpg") no-repeat center right / cover; } #ceo .intro .text{ width: 50%; } #ceo .intro h4{ font-size: 4rem; font-weight: 700; line-height: 1.4; margin-bottom: 15px; } #ceo .intro h5{ font-size: 2.5rem; font-weight: 700; line-height: 1.5; } #ceo .intro p{ font-size: 1.7rem; font-weight: 400; text-align: right; margin-top: 45px; } #ceo .flex-box{ display: flex; justify-content: space-between; margin-top: 70px; } #ceo .flex-box div{ width: calc((100% - 80px) / 2); } #ceo .flex-box p{ font-size: 1.7rem; font-weight: 400; color: #333; line-height: 1.75; } #ceo .flex-box p:not(:last-of-type){ margin-bottom: 20px; } #ceo .flex-box p.last{ margin-top: 35px; } @media screen and (max-width: 1500px){ #ceo .intro{ padding: 10.8% 40px; } #ceo .intro h4{ font-size: 3.5rem; } #ceo .intro h5{ font-size: 2.3rem; } } @media screen and (max-width: 1490px){ #ceo .flex-box br{ display: none; } } @media screen and (max-width: 1250px){ #ceo .intro h4{ font-size: 3rem; } #ceo .intro h5{ font-size: 2rem; } #ceo .flex-box{ margin-top: 40px; } } @media screen and (max-width: 1000px){ #ceo .intro{ padding: 0; border-radius: 0; } #ceo .intro .bg{ position: relative; border-radius: 30px; margin-bottom: 40px; padding: 0; overflow: hidden; } #ceo .intro .bg div{ padding-bottom: 50%; } #ceo .intro .text{ width: 100%; } #ceo .flex-box{ flex-direction: column; } #ceo .flex-box div{ width: 100%; } #ceo .flex-box div:last-of-type{ margin-top: 20px; } } @media screen and (max-width: 850px){ #ceo .intro h4{ font-size: 2.3rem; } } @media screen and (max-width: 650px){ #ceo .intro .bg div{ padding-bottom: 55%; } } /* 연혁 */ #history .flex-box{ display: flex; justify-content: space-between; } #history .flex-box > div{ padding: 80px 0; } #history .flex-box > div.sticky-box{ padding-right: 50px; } #history .flex-box > div.history-box{ padding-left: 95px; } #history .sticky-box{ width: 37%; min-height: 100vh; background: #006557; position: relative; color: #fff; } #history .sticky-box::before{ content: ""; width: calc((100vw - 1600px) / 2); height: 100%; background: #006557; position: absolute; top: 0; right: 100%; } #history .sticky-box ul{ position: sticky; top: 200px; } #history .sticky-box ul li:not(:last-of-type){ margin-bottom: 160px; } #history .sticky-box ul li p{ font-size: 5.5rem; font-weight: 700; opacity: 0.2; transition: opacity 0.5s; cursor: pointer; } #history .sticky-box ul li figure{ max-width: 425px; width: 100%; position: relative; overflow: hidden; margin-top: 25px; padding: 0; transition: padding 0.5s; } #history .sticky-box ul li figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #history .sticky-box ul li.on p{ opacity: 1; } #history .sticky-box ul li.on figure{ padding-bottom: 54%; } #history .history-box{ width: 63%; } #history .history-box .offset:not(:last-of-type), #history .history-box dl:not(:last-of-type){ padding-bottom: 100px; } #history .history-box .title-box{ max-width: 425px; margin-bottom: 30px; display: none; } #history .history-box .title-box figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 68%; } #history .history-box .title-box figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #history .history-box .title-box h4{ font-size: 3rem; font-weight: 700; color: #111; margin-bottom: 10px; } #history .history-box dl dt{ font-size: 4.5rem; font-weight: 700; color: #111; margin-bottom: 25px; } #history .history-box dl dd{ font-size: 1.7rem; font-weight: 400; color: #333; line-height: 1.75; padding-left: 50px; position: relative; } #history .history-box dl dd:not(:last-of-type){ margin-bottom: 30px; } #history .history-box dl dd *{ line-height: 1.75; } #history .history-box dl dd::before{ content: attr(data-month); font-weight: 700; position: absolute; top: 0; left: 0; } #history .partners{ padding-top: 130px; } #history .partners ul{ display: flex; flex-wrap: wrap; margin-top: 40px; margin-bottom: -20px; } #history .partners ul li{ width: calc((100% - 60px) / 4); height: 100px; margin-right: 20px; margin-bottom: 20px; } #history .partners ul li:nth-of-type(4n){ margin-right: 0; } #history .partners ul li figure{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; border: 1px solid #D8D8D8; padding: 20px; } @media screen and (max-width: 1640px){ #history .sticky-box::before{ width: 20px; } #history .flex-box > div.sticky-box{ padding-right: 20px; } } @media screen and (max-width: 1500px){ #history .history-box .offset:not(:last-of-type), #history .history-box dl:not(:last-of-type){ padding-bottom: 60px; } #history .sticky-box ul li:not(:last-of-type){ margin-bottom: 100px; } #history .sticky-box ul li p{ font-size: 4.5rem; } #history .history-box dl dt{ font-size: 3rem; } } @media screen and (max-width: 1300px){ #history .flex-box > div.history-box{ padding-left: 50px; } } @media screen and (max-width: 1250px){ #history .sticky-box ul li p{ font-size: 3.8rem; } #history .history-box dl dt{ font-size: 2.5rem; margin-bottom: 10px; } #history .history-box dl dd:not(:last-of-type){ margin-bottom: 15px; } #history .partners ul li{ width: calc((100% - 40px) / 3); } #history .partners ul li:nth-of-type(4n){ margin-right: 20px; } #history .partners ul li:nth-of-type(3n){ margin-right: 0; } } @media screen and (max-width: 1200px){ #history .sticky-box{ width: 40%; } #history .sticky-box ul{ top: 150px; } #history .sticky-box ul li:not(:last-of-type){ margin-bottom: 60px; } #history .history-box{ width: 60%; } #history .history-box .title-box{ display: block; } #history .partners{ padding-top: 80px; } #history .partners ul li{ height: 90px; } } @media screen and (max-width: 1000px){ #history .flex-box{ flex-direction: column; } #history .flex-box > div{ padding: 10px 0; } #history .flex-box > div.sticky-box{ padding-right: 0; } #history .sticky-box{ width: 100%; min-height: auto; background: none; } #history .sticky-box::before{ display: none; } #history .sticky-box ul{ display: flex; flex-wrap: wrap; } #history .sticky-box ul li{ width: 50%; padding: 0; position: relative; text-align: center; margin-bottom: 0; border: 1px solid #D8D8D8; } #history .sticky-box ul li:not(:last-of-type){ margin-bottom: 0; border-right: none; } #history .sticky-box ul li p{ display: flex; justify-content: center; align-items: center; height: 55px; font-size: 1.7rem; font-weight: 400; color: #666; opacity: 1; } #history .sticky-box ul li.on{ background: var(--mainColor); border: 1px solid var(--mainColor); } #history .sticky-box ul li.on p{ color: #fff; } /* #history .sticky-box ul li{ width: 50%; padding: 25px; position: relative; text-align: center; } #history .sticky-box ul li::after{ content: ""; width: 4px; height: 15px; background: #fff; opacity: 0.2; position: absolute; top: 50%; right: -2px; transform: translateY(-50%); } #history .sticky-box ul li:nth-of-type(2n)::after{ display: none; } #history .sticky-box ul li:not(:last-of-type){ margin: 0; } */ #history .sticky-box ul li figure{ display: none; } #history .flex-box > div.history-box{ padding: 50px 0 0; } #history .history-box{ width: 100%; } } @media screen and (max-width: 850px){ /* #history .sticky-box ul li{ padding: 15px 25px; } #history .sticky-box ul li p{ font-size: 2.5rem; } */ } @media screen and (max-width: 800px){ #history .partners ul li{ width: calc((100% - 20px) / 2); height: 85px; } #history .partners ul li:nth-of-type(3n){ margin-right: 20px; } #history .partners ul li:nth-of-type(2n){ margin-right: 0; } } /* 사가 */ #song{ overflow: hidden; } #song .flex-box{ display: flex; justify-content: space-between; } #song .flex-box > div{ width: calc((100% - 30px) / 2); } #song .img-box figure{ width: 100%; padding: 45px 25px; border: 1px solid #CDCDCD; } #song .song-box .video{ text-align: center; position: relative; } #song .song-box .video a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #song ul{ display: flex; justify-content: flex-end; margin-top: 35px; } #song ul li:not(:last-of-type){ margin-right: 35px; } #song ul li a{ display: flex; justify-content: center; align-items: center; width: 200px; height: 70px; font-size: 1.7rem; font-weight: 400; color: #fff; } #song ul li a img{ margin-left: 10px; } #song ul li:first-of-type a{ background: var(--mainColor); } #song ul li:last-of-type a{ background: #333; } @media screen and (max-width: 1500px){ #song ul{ margin-top: 20px; } #song ul li:not(:last-of-type){ margin-right: 20px; } #song ul li a{ width: 180px; height: 65px; } } @media screen and (max-width: 1250px){ #song ul li a{ width: 160px; height: 50px; font-size: 1.6rem; } } @media screen and (max-width: 1000px){ #song .flex-box{ flex-direction: column; align-items: center; } #song .flex-box > div{ width: 100%; text-align: center; } #song .img-box{ margin-bottom: 60px; } #song .img-box figure{ width: fit-content; padding: 25px; } } /* 사업장 */ #location{ overflow: hidden; } #location *{ letter-spacing: 0; } #location section:not(:last-of-type){ padding-bottom: 170px; } #location .section-title{ margin-bottom: 45px; } #location .flex-box{ display: flex; margin-top: 35px; } #location .flex-box h5{ font-size: 4.5rem; font-weight: 700; color: #111; padding-right: 240px; } #location .flex-box ul{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 80px; } #location .flex-box ul li{ display: flex; align-items: flex-start; font-size: 1.7rem; font-weight: 400; color: #333; } #location .flex-box ul li img{ margin-right: 10px; } #location .flex-box ul li span{ display: inline-block; font-weight: 700; margin-right: 15px; } #location .button{ width: 200px; margin: 0 auto; margin-top: 45px; } @media screen and (max-width: 1500px){ #location section:not(:last-of-type){ padding-bottom: 100px; } #location .flex-box h5{ font-size: 3.5rem; padding-right: 200px; } #location .button{ width: 180px; height: 55px; } } @media screen and (max-width: 1250px){ #location section:not(:last-of-type){ padding-bottom: 70px; } #location .section-title{ margin-bottom: 30px; } #location .flex-box{ margin-top: 15px; } #location .flex-box h5{ font-size: 2.5rem; padding-right: 160px; } } @media screen and (max-width: 850px){ #location .section-title{ margin-bottom: 20px; } #location .flex-box{ flex-direction: column; } #location .flex-box h5{ font-size: 2rem; padding-right: 0; } #location .flex-box ul{ margin-top: 15px; } #location .button{ width: 175px; height: 50px; margin-top: 25px; } } /* 제휴제안 */ #contact .title{ text-align: center; margin-bottom: 45px; } #contact .title p{ font-size: 2rem; font-weight: 400; color: #333; margin-top: 25px; } #contact section:not(:last-of-type){ padding-bottom: 130px; } #contact .agree p.small{ font-size: 1.5rem; font-weight: 400; color: #333; text-align: right; } #contact .agree p.small span{ font-weight: 700; color: #EF1313; } #contact .agree .policy-box{ border: 1px solid #D8D8D8; padding: 40px; margin-top: 15px; } #contact .agree .policy-box dt{ font-size: 1.7rem; font-weight: 700; color: #111; line-height: 2; padding-left: 10px; position: relative; } #contact .agree .policy-box dt::before{ content: ""; width: 3px; height: 3px; background: #111; border-radius: 50%; position: absolute; top: 15px; left: 0; } #contact .agree .policy-box dd{ margin-top: 45px; } #contact .agree .policy-box dd *{ font-weight: 400; color: #333; } #contact .agree .policy-box dd p{ font-size: 1.7rem; } #contact .agree .policy-box dd ul{ margin: 25px 0; } #contact .agree .policy-box dd ul li{ display: flex; align-items: baseline; font-size: 1.6rem; line-height: 1.9444; } #contact .agree .policy-box dd ul li span{ display: inline-block; margin-right: 5px; } #contact .agree .check{ text-align: center; margin-top: 35px; } #contact .agree .check input{ display: none; } #contact .agree .check label{ display: inline-block; font-size: 1.7rem; font-weight: 400; color: #333; padding: 10px 25px; position: relative; cursor: pointer; } #contact .agree .check label::before{ content: ""; width: 15px; height: 15px; border: 1px solid #828282; border-radius: 50%; position: absolute; top: 12px; left: 0; } #contact .agree .check input:checked + label::after{ content: ""; width: 7px; height: 7px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 17px; left: 5px; } @media screen and (max-width: 1500px){ #contact section:not(:last-of-type){ padding-bottom: 100px; } } @media screen and (max-width: 1250px){ #contact .title p{ font-size: 1.8rem; margin-top: 10px; } #contact section:not(:last-of-type){ padding-bottom: 60px; } #contact .agree .policy-box{ padding: 25px; } #contact .agree .policy-box dd{ margin-top: 30px; } #contact .agree .policy-box dd ul{ margin: 15px 0; } #contact .agree .policy-box dd p{ font-size: 1.6rem; } #contact .agree .policy-box dd ul li{ font-size: 1.5rem; } #contact .agree .check{ margin-top: 15px; } #contact .agree .check label{ font-size: 1.6rem; } } @media screen and (max-width: 850px){ #contact .title p{ font-size: 1.7rem; } #contact .agree .check{ margin-top: 5px; } #contact .form-table textarea{ height: 300px !important; } } /* 사업 */ /* 콘텐츠운영사업 */ #content{ overflow: hidden; } #content .flex-box{ display: flex; justify-content: space-between; } #content .text-box{ width: calc(50% - 120px); } #content .section-title{ text-align: left; margin-bottom: 40px; } #content .text-box dl:first-of-type{ border-top: 1px solid #DFDFDF; } #content .text-box dl{ border-bottom: 1px solid #DFDFDF; padding: 40px 20px; } #content .text-box dl dt{ font-size: 2.2rem; font-weight: 700; color: #111; margin-bottom: 10px; } #content .text-box dl dd{ font-size: 1.7rem; font-weight: 400; color: #333; line-height: 1.5; } #content .map-box{ width: 50%; border: 1px solid #DEDEDE; border-radius: 30px; padding: 25px 30px; } #content .map-box ul{ display: flex; } #content .map-box ul li{ display: flex; justify-content: center; align-items: center; width: 75px; height: 40px; border: 1px solid #C8C8C8; border-radius: 50px; font-size: 2rem; font-weight: 400; color: #333; line-height: 1; cursor: pointer; } #content .map-box ul li:not(:last-of-type){ margin-right: 5px; } #content .map-box ul li.active{ background: var(--mainColor); border: 1px solid var(--mainColor); font-weight: 700; color: #fff; } #content .map-box .svg{ text-align: center; padding-top: 40px; } #content .map-box .svg svg{ max-width: 100%; width: auto; height: auto; } #content .map-box .svg text{ font-size: 1.8rem; font-weight: 700; fill: #111; } #content .map-box .svg circle{ opacity: 0; } #content .map-box .svg .area.active text{ fill: #fff; } #content .map-box .svg .area.active circle:first-of-type{ animation: opacity1 1s forwards; } #content .map-box .svg .area.active circle:not(:first-of-type){ animation: opacity2 2s infinite; } @keyframes opacity1{ 0%{ opacity: 0; } 100%{ opacity: 1; } } @keyframes opacity2{ 0%{ opacity: 0; } 50%{ opacity: 1; } 100%{ opacity: 0; } } @media screen and (max-width: 1540px){ #content .flex-box{ align-items: center; } #content dl br{ display: none; } } @media screen and (max-width: 1500px){ #content .section-title{ margin-bottom: 25px; } #content .text-box{ width: calc(50% - 60px); } #content .text-box dl{ padding: 30px 20px; } } @media screen and (max-width: 1200px){ #content .text-box dl{ padding: 20px; } #content .text-box dl dt{ font-size: 2rem; } #content .map-box ul li{ font-size: 1.8rem; } } @media screen and (max-width: 1000px){ #content .flex-box{ flex-direction: column-reverse; } #content .text-box{ width: 100%; margin-top: 40px; } #content .map-box{ width: 100%; } } @media screen and (max-width: 850px){ #content .section-title{ margin-bottom: 10px; } #content .text-box dl dt{ font-size: 1.9rem; } #content .map-box{ padding: 25px; } #content .map-box ul li{ width: 65px; height: 37px; } } /* 에버영아카데미 */ #academy figure{ width: 100%; text-align: center; } #academy .mobile{ display: none; } #academy .mobile ul{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 80px; margin-bottom: -60px; } #academy .mobile ul li{ width: calc((100% - 60px) / 3); margin-bottom: 60px; } #academy .mobile ul li figure{ /* text-align: left; */ margin-bottom: 20px; } #academy .mobile ul li h5{ font-size: 2.5rem; font-weight: 700; color: #111; margin-bottom: 15px; } #academy .mobile ul li dl:not(:last-of-type){ margin-bottom: 20px; } #academy .mobile ul li dt, #academy .mobile ul li dd{ line-height: 1.5; padding-left: 10px; position: relative; } #academy .mobile ul li dt{ font-size: 1.8rem; font-weight: 700; color: var(--color); } #academy .mobile ul li dt::before{ content: ""; width: 3px; height: 3px; background: var(--color); border-radius: 50%; position: absolute; top: 11px; left: 0; } #academy .mobile ul li dd{ font-size: 1.7rem; font-weight: 400; color: #333; } #academy .mobile ul li dd.dot::before{ content: ""; width: 2px; height: 2px; background: #333; border-radius: 50%; position: absolute; top: 11px; left: 0; } @media screen and (max-width: 1100px){ #academy .pc{ display: none; } #academy .mobile{ display: block; } } @media screen and (max-width: 900px){ #academy .mobile ul li{ width: calc((100% - 50px) / 2); } } @media screen and (max-width: 850px){ #academy .mobile ul li h5{ font-size: 2.2rem; } } @media screen and (max-width: 600px){ #academy .mobile ul li{ width: 100%; } } /* 스마트솔루션연구소 */ #smart.sub-content{ overflow: hidden; padding-bottom: 0; } #smart .intro{ padding-bottom: 150px; } #smart .research{ padding: 130px 0; text-align: center; } #smart .research .wrap{ position: relative; margin-bottom: 310px; } #smart .research .wrap::after{ content: url("/img/sub/business/smart_arrow.png"); position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%); } #smart .research .flex-box{ display: flex; flex-wrap: wrap; justify-content: space-between; /* align-items: center; */ margin-top: 75px; margin-bottom: -90px; } #smart .research .box{ width: 30%; margin-right: 40%; margin-bottom: 90px; } #smart .research .box:nth-of-type(2n){ margin-right: 0; } #smart .research .box .icon{ margin-bottom: 25px; } #smart .research .box dl dt{ font-size: 2.3rem; font-weight: 700; color: #111; margin-bottom: 10px; } #smart .research .box dl dd{ font-size: 1.7rem; font-weight: 400; color: #333; line-height: 1.5; } #smart .research .center-box{ width: 34%; padding-bottom: 34%; position: absolute; top: 50%; left: 50%; z-index: 10; transform: translate(-50%, -50%); background: url("/img/sub/business/circle_bg.png") no-repeat center center / contain; } #smart .research .center-box .text-box{ width: 60%; height: 60%; box-shadow: 0px 0px 50px 0px rgba(4, 134, 116, 0.11); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; justify-content: center; align-items: center; } #smart .research .center-box h5{ font-size: 3rem; font-weight: 700; color: #111; margin-bottom: 15px; } #smart .research .center-box p{ font-size: 1.7rem; font-weight: 400; color: #333; } #smart .research .radius p{ display: inline-block; background: var(--mainColor); font-size: 3.5rem; font-weight: 700; color: #fff; border-radius: 300px; padding: 80px 200px; } @media screen and (max-width: 1500px){ #smart .intro{ padding-bottom: 100px; } #smart .research .wrap{ margin-bottom: 250px; } #smart .research .flex-box{ margin-top: 40px; } #smart .research .center-box h5{ font-size: 2.5rem; } #smart .research .radius p{ font-size: 3rem; padding: 60px 150px; } } @media screen and (max-width: 1450px){ #smart .intro br{ display: none; } } @media screen and (max-width: 1250px){ #smart .intro{ padding-bottom: 70px; } #smart .research .flex-box{ margin-bottom: -50px; } #smart .research .box{ margin-bottom: 50px; } #smart .research .box dl dt{ font-size: 2rem; } #smart .research .center-box h5{ font-size: 2.2rem; margin-bottom: 5px; } #smart .research .radius p{ font-size: 2.3rem; padding: 40px 100px; } } @media screen and (max-width: 1200px){ #smart .research{ padding: 80px 0 100px; } } @media screen and (max-width: 1150px){ #smart .research br{ display: none; } #smart .research .wrap{ margin-bottom: 200px; } } @media screen and (max-width: 1000px){ #smart .research .wrap{ margin-bottom: 170px; } #smart .research .wrap::after{ bottom: -30px; } #smart .research .flex-box{ align-items: flex-start; } #smart .research .box{ width: calc((100% - 100px) / 2); margin-right: 100px; } #smart .research .center-box{ width: 50%; padding-bottom: 50%; position: relative; top: 0; left: 50%; transform: translateX(-50%); margin-top: 60px; } } @media screen and (max-width: 850px){ #smart .research .box{ width: calc((100% - 50px) / 2); margin-right: 50px; } #smart .research .box dl dt{ font-size: 1.8rem; } #smart .research .box dl dd{ font-size: 1.6rem; } #smart .research .center-box{ width: 60%; padding-bottom: 60%; } #smart .research .center-box h5{ font-size: 2rem; } #smart .research .center-box p{ font-size: 1.6rem; } #smart .research .radius p{ font-size: 2rem; padding: 20px 50px; } } @media screen and (max-width: 650px){ #smart .research .wrap{ margin-bottom: 120px; } #smart .research .wrap::after{ bottom: 0; transform: translate(-50%, 100%) scale(0.8); transform-origin: bottom center; } } @media screen and (max-width: 600px){ #smart .research .box{ width: calc((100% - 30px) / 2); margin-right: 30px; } #smart .research .center-box{ width: 70%; padding-bottom: 70%; } } /* 뉴스 */ /* 썸네일 있는 리스트 */ .thumbnail-list{ display: flex; flex-wrap: wrap; margin-bottom: -40px; } .thumbnail-list li{ width: calc((100% - 99px) / 4); margin-right: 33px; margin-bottom: 40px; padding: 20px; border: 1px solid #DEDEDE; border-radius: 20px; position: relative; } .thumbnail-list li:nth-of-type(4n){ margin-right: 0; } .thumbnail-list li figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 70%; border-radius: 20px; margin-bottom: -5px; } .thumbnail-list li figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .thumbnail-list li h5{ font-family: var(--Pretendard); font-size: 2.2rem; font-weight: 700; color: #111; margin: 25px 0 30px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .thumbnail-list li span{ font-size: 1.5rem; font-weight: 300; color: #666; } .thumbnail-list li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; } @media screen and (max-width: 1500px){ .thumbnail-list li h5{ font-size: 2rem; } } @media screen and (max-width: 1350px){ .thumbnail-list li{ width: calc((100% - 66px) / 3); } .thumbnail-list li:nth-of-type(4n){ margin-right: 33px; } .thumbnail-list li:nth-of-type(3n){ margin-right: 0; } } @media screen and (max-width: 1250px){ .thumbnail-list li h5{ font-size: 1.8rem; } } @media screen and (max-width: 950px){ .thumbnail-list li{ width: calc((100% - 33px) / 2); } .thumbnail-list li:nth-of-type(3n){ margin-right: 33px; } .thumbnail-list li:nth-of-type(2n){ margin-right: 0; } } @media screen and (max-width: 700px){ .thumbnail-list{ margin-bottom: -25px; } .thumbnail-list li{ width: calc((100% - 20px) / 2); margin-right: 20px; margin-bottom: 25px; } .thumbnail-list li:nth-of-type(4n){ margin-right: 20px; } .thumbnail-list li:nth-of-type(3n){ margin-right: 20px; } .thumbnail-list li:nth-of-type(2n){ margin-right: 0; } } @media screen and (max-width: 600px){ .thumbnail-list li{ width: 100%; margin-right: 0; } .thumbnail-list li:nth-of-type(4n){ margin-right: 0; } .thumbnail-list li:nth-of-type(3n){ margin-right: 0; } } /* 기본 게시판 */ #board .table-box table{ border-top: 2px solid var(--mainColor); } #board .table-box thead th, #board .table-box td{ padding: 28px 15px; } #board .table-box thead th{ font-size: 1.8rem; font-weight: 400; color: #111; background: #F6F6F6; } #board .table-box th.small{ width: 100px; } #board .table-box th.middle{ width: 150px; } #board .table-box tr{ border-bottom: 1px solid #E8E8E8; } #board .table-box td{ font-size: 1.7rem; font-weight: 400; color: #666; text-align: center; position: relative; } #board .table-box td p{ max-width: 665px; width: 100%; font-family: var(--Pretendard); font-size: 1.8rem; font-weight: 700; color: #111; line-height: 1; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 0 50px; margin-bottom: -5px; position: relative; top: -3px; } #board .table-box td a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; } @media screen and (max-width: 1500px){ #board .table-box thead th, #board .table-box td{ padding: 23px 15px; } } @media screen and (max-width: 1250px){ #board .table-box thead th{ font-size: 1.7rem; } #board .table-box td p{ font-size: 1.7rem; } } @media screen and (max-width: 850px){ #board .table-box td p{ padding: 0; } } @media screen and (max-width: 700px){ #board .table-box table tr{ display: flex; flex-direction: column; } #board .table-box thead{ display: none; } #board .table-box td{ text-align: left; padding: 15px; } #board .table-box td:nth-of-type(1){ display: none; } #board .table-box td:nth-of-type(2), #board .table-box td:nth-of-type(3){ width: 100%; } #board .table-box td:nth-of-type(3){ padding-top: 0; } #board .table-box td p{ top: 0; } } /* 에버영人이야기 */ #story .page-title .ch{ font-weight: 600; } #story .thumbnail-list li h5{ margin-bottom: 5px; } /* ESG */ /* ESG 공통 */ #esg{ padding-bottom: 0; } #esg section:first-of-type{ padding-bottom: 95px; } #esg section:not(:first-of-type){ padding: 140px 0; } #esg .page-title{ margin-bottom: 30px; } #esg .sub-title{ margin-bottom: 20px; } #esg .page-title + p, #esg.coding .sub-title + p{ font-size: 1.7rem; font-weight: 400; color: #333; line-height: 1.5; text-align: center; } #esg .figure-box{ margin-top: 65px; position: relative; } #esg .figure-box figure{ text-align: center; } #esg .figure-box ul{ display: flex; flex-wrap: wrap; margin-bottom: -30px; } #esg .figure-box ul li{ margin-right: 30px; margin-bottom: 30px; } #esg .figure-box ul li img{ width: 100%; } #esg .figure-box ul li figure{ width: 100%; } #esg .figure-box ul li figure img{ width: 100%; } #esg .figure-box ul li p, #esg .figure-box ul + p{ font-size: 2.2rem; font-weight: 600; color: #111; line-height: 1.4; text-align: center; margin-top: 25px; } #esg .figure-box ul.two li{ width: calc((100% - 30px) / 2); } #esg .figure-box ul.two li:nth-of-type(2n){ margin-right: 0; } #esg .figure-box ul.three li{ width: calc((100% - 60px) / 3); } #esg .figure-box ul.three li:nth-of-type(3n){ margin-right: 0; } #esg .figure-box ul.four li{ width: calc((100% - 90px) / 4); } #esg .figure-box ul.four li:nth-of-type(4n){ margin-right: 0; } @media screen and (max-width: 1500px){ #esg .figure-box ul li p, #esg .figure-box ul + p{ font-size: 2rem; } } @media screen and (max-width: 1250px){ #esg section:not(:first-of-type){ padding: 100px 0; } #esg .page-title{ margin-bottom: 15px; } #esg .figure-box{ margin-top: 35px; } #esg .figure-box ul li p, #esg .figure-box ul + p{ font-size: 1.8rem; margin-top: 10px; } } @media screen and (max-width: 1100px){ #esg .figure-box ul.four li{ width: calc((100% - 30px) / 2); } #esg .figure-box ul.four li:nth-of-type(4n){ margin-right: 30px; } #esg .figure-box ul.four li:nth-of-type(2n){ margin-right: 0; } #esg .figure-box ul.three li{ width: calc((100% - 30px) / 2); } #esg .figure-box ul.three li:nth-of-type(3n){ margin-right: 30px; } #esg .figure-box ul.three li:nth-of-type(2n){ margin-right: 0; } } @media screen and (max-width: 800px){ #esg section:first-of-type{ padding-bottom: 70px; } #esg section:not(:first-of-type){ padding: 50px 0 70px; } #esg section:last-of-type{ padding-bottom: 100px; } #esg .sub-title{ margin-bottom: 10px; } #esg .figure-box{ margin-top: 20px; } #esg .figure-box ul{ margin-bottom: -10px; } #esg .figure-box ul li{ margin-right: 10px; margin-bottom: 10px; } #esg .figure-box ul.two li{ width: calc((100% - 10px) / 2); } #esg .figure-box ul.three li{ width: calc((100% - 10px) / 2); } #esg .figure-box ul.three li:nth-of-type(3n){ margin-right: 10px; } #esg .figure-box ul.three li:nth-of-type(2n){ margin-right: 0; } #esg .figure-box ul.four li{ width: calc((100% - 10px) / 2); } #esg .figure-box ul.four li:nth-of-type(4n){ margin-right: 1px; } #esg .figure-box ul.four li:nth-of-type(2n){ margin-right: 0; } #esg .figure-box ul li p, #esg .figure-box ul + p{ font-size: 1.7rem; margin-top: 5px; } } .radius{ border-radius: 20px; overflow: hidden; } /* 윤리 · 준법경영 */ #ethics .title-box .sub-title{ margin-bottom: 30px; } #ethics .title-box p{ font-size: 2.5rem; font-weight: 700; color: var(--mainColor); text-align: center; } #ethics .ethics-box{ background: #F6F6F6; border: 1px solid var(--mainColor); border-radius: 30px; padding: 50px 70px; margin: 60px 0; } #ethics .ethics-box *{ font-size: 1.7rem; font-weight: 300; color: #333; line-height: 1.75; } #ethics .ethics-box ul li{ padding-left: 10px; position: relative; } #ethics .ethics-box ul li::before{ content: ""; width: 2px; height: 2px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 12px; left: 0; } #ethics .ethics-box dl{ margin-top: 60px; } #ethics .ethics-box dt{ font-size: 2.3rem; font-weight: 700; color: #111; margin-bottom: 15px; } #ethics .ethics-box dd{ padding-left: 2.4rem; text-indent: -2.4rem; } #ethics .sign-box{ text-align: center; } #ethics .sign-box p{ font-size: 2.3rem; font-weight: 500; color: #111; } #ethics .sign-box p.sign{ font-size: 1.7rem; font-weight: 300; color: #333; margin-top: 20px; } #ethics .sign-box p.sign:last-of-type{ margin-top: 45px; } #ethics .sign-box p.sign span{ font-size: 2.5rem; font-weight: 700; color: #111; } @media screen and (max-width: 1500px){ #ethics .title-box p{ font-size: 2.3rem; } #ethics .ethics-box dt{ font-size: 2.1rem; } #ethics .ethics-box{ margin: 30px 0; } #ethics .sign-box p{ font-size: 2.1rem; } #ethics .sign-box p.sign span{ font-size: 2.3rem; } } @media screen and (max-width: 1250px){ #ethics .title-box .sub-title{ margin-bottom: 15px; } #ethics .title-box p{ font-size: 2.1rem; } #ethics .ethics-box{ padding: 50px; } #ethics .ethics-box dl{ margin-top: 40px; } #ethics .ethics-box dt{ font-size: 1.9rem; margin-bottom: 10px; } #ethics .sign-box p{ font-size: 1.9rem; } #ethics .sign-box p.sign{ margin-top: 15px; } #ethics .sign-box p.sign:last-of-type{ margin-top: 30px; } } @media screen and (max-width: 850px){ #ethics .title-box p{ font-size: 1.8rem; } #ethics .ethics-box{ padding: 35px; } #ethics .ethics-box *{ font-size: 1.6rem; } #ethics .ethics-box dl{ margin-top: 30px; } #ethics .ethics-box dt{ font-size: 1.8rem; margin-bottom: 5px; } #ethics .sign-box p{ font-size: 1.7rem; } #ethics .sign-box p.sign{ font-size: 1.6rem; margin-top: 10px; } #ethics .sign-box p.sign span{ font-size: 2.1rem; } #ethics .sign-box p.sign:last-of-type{ margin-top: 20px; } } /* 어린이코딩 교육과정 */ #esg.coding .figure-wrap figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 40%; } #esg.coding .figure-wrap figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #esg.coding .figure-wrap + .buttons{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 10px; pointer-events: none; } #esg.coding .figure-wrap + .buttons button{ width: 90px; height: 90px; background: #fff; border: none; border-radius: 50%; pointer-events: auto; } @media screen and (max-width: 1500px){ #esg.coding .figure-wrap + .buttons button{ width: 80px; height: 80px; } } @media screen and (max-width: 1250px){ #esg.coding .figure-wrap + .buttons button{ width: 65px; height: 65px; } } @media screen and (max-width: 800px){ #esg.coding br{ display: none; } #esg.coding .figure-wrap + .buttons button{ width: 50px; height: 50px; } } /* 스마트폰IT 재능봉사단 */ @media screen and (max-width: 700px){ #esg.smartphone br{ display: none; } } /* VR체험힐링봉사단 */ #esg.vr .diagram{ text-align: center; margin-top: 130px; } #esg.vr .diagram p{ display: inline-block; font-size: 2.5rem; font-weight: 700; color: #fff; background: var(--mainColor); padding: 25px 30px; border-radius: 100px; } #esg.vr .diagram .flex-box{ display: flex; background: #fff; border: 1px solid var(--mainColor); border-radius: 500px; padding: 80px 180px; margin-top: -41.25px; } #esg.vr .diagram .flex-box .box{ width: calc((100% - 160px) / 3); background: var(--bg); border-radius: 50%; padding-bottom: calc((100% - 160px) / 3); margin-right: 80px; position: relative; } #esg.vr .diagram .flex-box .box:last-of-type{ margin-right: 0; } #esg.vr .diagram .flex-box .box::after{ content: url("/img/sub/esg/esg_arrow.png"); position: absolute; top: 50%; right: -47px; transform: translateY(-50%); } #esg.vr .diagram .flex-box .box:last-of-type::after{ display: none; } #esg.vr .diagram .box div{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; justify-content: center; align-items: center; } #esg.vr .diagram .box div span{ display: inline-block; font-size: 2rem; font-weight: 600; color: var(--color); margin-top: 55px; } #esg.vr .figure-box{ margin-top: 100px; } @media screen and (max-width: 1500px){ #esg.vr .diagram{ margin-top: 70px; } #esg.vr .diagram p{ font-size: 2.2rem; padding: 22px 27px; } #esg.vr .diagram .flex-box{ padding: 70px 100px; margin-top: -36.5px: } #esg.vr .diagram .box div span{ margin-top: 30px; } } @media screen and (max-width: 1200px){ #esg.vr .diagram{ margin-top: 40px; } #esg.vr .diagram p{ font-size: 2rem; padding: 20px 25px; } #esg.vr .diagram .flex-box{ padding: 70px 60px 60px; margin-top: -33px; } #esg.vr .diagram .box div img{ transform: scale(0.9); transform-origin: top center; } #esg.vr .diagram .box div span{ font-size: 1.8rem; margin-top: 10px; } } @media screen and (max-width: 1000px){ #esg.vr .diagram .flex-box{ padding: 50px 40px; } #esg.vr .diagram .flex-box .box{ width: calc((100% - 120px) / 3); padding-bottom: calc((100% - 120px) / 3); margin-right: 60px; } #esg.vr .diagram .flex-box .box::after{ right: -38px; } } @media screen and (max-width: 900px){ #esg.vr .diagram{ margin-top: 30px; } #esg.vr .diagram .flex-box{ width: fit-content; flex-direction: column; align-items: center; margin: 0 auto; margin-top: -33px; } #esg.vr .diagram .flex-box .box{ width: 230px; padding-bottom: 230px; margin-right: 0; margin-bottom: 60px; } #esg.vr .diagram .flex-box .box:last-of-type{ margin-bottom: 0; } #esg.vr .diagram .flex-box .box::after{ top: calc(100% + 18px); right: 50%; transform: translateX(50%) rotate(90deg); } #esg.vr .diagram .box div img{ transform: scale(0.8); } #esg.vr .diagram .box div span{ margin-top: 0; } } @media screen and (max-width: 850px){ #esg.vr br{ display: none; } } /* GITEC SW교육 봉사단 */ #esg.gitec section:first-of-type{ padding-bottom: 140px; } @media screen and (max-width: 1250px){ #esg.gitec section:first-of-type{ padding-bottom: 100px; } } @media screen and (max-width: 950px){ #esg.gitec br{ display: none; } } @media screen and (max-width: 850px){ #esg.gitec section:first-of-type{ padding-bottom: 70px; } } /* 따뜻한 나눔과 봉사 */ @media screen and (max-width: 950px){ #esg.volunteer br{ display: none; } } /* 채용 */ /* 복리후생 */ #welfare .sub-title{ margin-bottom: 110px; } #welfare section:not(:first-of-type){ padding-top: 150px; } #welfare section:not(:last-of-type){ padding-bottom: 150px; } #welfare .welfare-box h5{ font-size: 2.5rem; font-weight: 700; color: #111; text-align: center; margin-bottom: 50px; } #welfare section .welfare-box ul{ display: flex; flex-wrap: wrap; margin-bottom: -40px; } #welfare section .welfare-box ul li{ width: calc((100% - 70px) / 3); background: #F6F6F6; border-radius: 20px; padding: 50px 40px; margin-right: 35px; margin-bottom: 40px; } #welfare section.gray-bg .welfare-box ul li{ background: #fff; } #welfare section .welfare-box ul li:nth-of-type(3n){ margin-right: 0; } #welfare section .welfare-box dl{ margin-top: 70px; } #welfare section .welfare-box dt{ font-size: 2.5rem; font-weight: 700; color: #111; margin-bottom: 15px; } #welfare section .welfare-box dd{ font-size: 1.7rem; font-weight: 400; color: #333; line-height: 1.75; } @media screen and (max-width: 1510px){ #welfare br{ display: none; } } @media screen and (max-width: 1500px){ #welfare section:not(:first-of-type){ padding-top: 100px; } #welfare section:not(:last-of-type){ padding-bottom: 100px; } #welfare .sub-title{ margin-bottom: 70px; } #welfare .welfare-box h5{ font-size: 2.3rem; margin-bottom: 20px; } #welfare section .welfare-box dt{ font-size: 2.2rem; } } @media screen and (max-width: 1250px){ #welfare section:not(:first-of-type){ padding-top: 60px; } #welfare section:not(:last-of-type){ padding-bottom: 70px; } #welfare .sub-title{ margin-bottom: 50px; } #welfare .welfare-box h5{ font-size: 2.1rem; margin-bottom: 20px; } #welfare section .welfare-box ul{ margin-bottom: -25px; } #welfare section .welfare-box ul li{ width: calc((100% - 40px) / 3); padding: 35px 25px; margin-right: 20px; margin-bottom: 25px; } #welfare section .welfare-box dl{ margin-top: 40px; } #welfare section .welfare-box dt{ font-size: 2rem; margin-bottom: 5px; } } @media screen and (max-width: 1000px){ #welfare section .welfare-box ul li{ width: calc((100% - 20px) / 2); } #welfare section .welfare-box ul li:nth-of-type(3n){ margin-right: 20px; } #welfare section .welfare-box ul li:nth-of-type(2n){ margin-right: 0; } } @media screen and (max-width: 850px){ #welfare .welfare-box h5{ font-size: 2rem; } #welfare section .welfare-box ul li{ padding: 30px 25px; } #welfare section .welfare-box dt{ font-size: 1.9rem; } } @media screen and (max-width: 700px){ #welfare section .welfare-box ul li{ width: 100%; margin-right: 0; } #welfare section .welfare-box ul li:nth-of-type(3n){ margin-right: 0; } #welfare section .welfare-box dl{ margin-top: 25px; } } /* 채용안내 */ #guide .sub-title{ margin-bottom: 20px; } #guide .sub-title + p{ font-size: 1.7rem; font-weight: 400; color: #333; text-align: center; } #guide .guide-box{ margin: 75px 0 90px; } #guide .guide-box ul{ display: flex; flex-wrap: wrap; margin-bottom: -40px; } #guide .guide-box ul li{ width: calc((100% - 160px) / 6); margin-right: 32px; margin-bottom: 40px; text-align: center; } #guide .guide-box ul li:last-of-type{ margin-right: 0; } #guide .guide-box ul li .icon{ width: 100%; padding-bottom: 100%; border: 1px solid var(--mainColor); border-radius: 50%; position: relative; } #guide .guide-box ul li:last-of-type .icon{ background: var(--mainColor); } #guide .guide-box ul li .icon::after{ content: url("/img/sub/recruit/guide_arrow.png"); position: absolute; top: 50%; right: 0; transform: translate(100% , -50%); } #guide .guide-box ul li:last-of-type .icon::after{ display: none; } #guide .guide-box ul li .text{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #guide .guide-box ul li .text span{ display: inline-block; width: 100%; font-size: 1.6rem; font-weight: 900; color: var(--mainColor); margin-bottom: 35px; } #guide .guide-box ul li:last-of-type .text span{ color: #fff; } #guide .guide-box ul li p{ font-size: 2.2rem; font-weight: 700; color: #111; margin-top: 35px; } #guide .gray-bg{ padding: 45px 50px; } #guide .gray-bg p{ font-size: 1.7rem; font-weight: 400; color: #333; line-height: 1.75; padding-left: 15px; position: relative; } #guide .gray-bg p::before{ content: ""; width: 2px; height: 2px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 12px; left: 0; } @media screen and (max-width: 1500px){ #guide .guide-box ul li p{ font-size: 2rem; } } @media screen and (max-width: 1300px){ #guide .guide-box{ margin: 60px 0 75px; } #guide .guide-box ul{ width: 80%; margin: 0 auto -40px; } #guide .guide-box ul li{ width: calc((100% - 64px) / 3); } #guide .guide-box ul li:nth-of-type(3n){ margin-right: 0; } #guide .guide-box ul li:nth-of-type(3n) .icon::after{ display: none; } #guide .guide-box ul li .text span{ margin-bottom: 20px; } #guide .guide-box ul li p{ margin-top: 20px; } } @media screen and (max-width: 1250px){ #guide .gray-bg{ padding: 30px 35px; } } @media screen and (max-width: 1000px){ #guide .guide-box ul{ width: 90%; } } @media screen and (max-width: 850px){ #guide .guide-box{ margin: 40px 0 60px; } #guide .guide-box ul{ width: 100%; } #guide .guide-box ul li p{ font-size: 1.9rem; margin-top: 15px; } } @media screen and (max-width: 700px){ #guide .guide-box ul li{ width: calc((100% - 32px) / 2); } #guide .guide-box ul li:nth-of-type(3n){ margin-right: 32px; } #guide .guide-box ul li:nth-of-type(2n){ margin-right: 0; } #guide .guide-box ul li:nth-of-type(3n) .icon::after{ display: block; } #guide .guide-box ul li:nth-of-type(2n) .icon::after{ display: none; } } /* 채용공고 */ /* 리스트 */ #list.recruit .table-list thead th.small{ width: 110px; } #list.recruit .table-list thead th.middle{ width: 200px; } #list.recruit .table-list thead th.large{ width: 255px; } #list.recruit .table-list tbody td > span{ max-width: 120px; width: 100%; height: 46px; display: flex; justify-content: center; align-items: center; background: var(--mainColor); border: 1px solid var(--mainColor); border-radius: 30px; font-size: 1.5rem; font-weight: 600; color: #fff; line-height: 0; margin: 0 auto; } #list.recruit .table-list tbody td > span.wait{ background: #F6F6F6; border: 1px solid #F6F6F6; color: #C6C6C6; } #list.recruit .table-list tbody td > span.close{ background: transparent; border: 1px solid #C6C6C6; font-weight: 300; color: #777; } /* 상세 */ #view.recruit .title-box > span{ width: 120px; height: 46px; display: flex; justify-content: center; align-items: center; background: var(--mainColor); border: 1px solid var(--mainColor); border-radius: 30px; font-size: 1.5rem; font-weight: 600; color: #fff; line-height: 0; margin: 0 auto; margin-bottom: 30px; } #view.recruit > span.wait{ background: #F6F6F6; border: 1px solid #F6F6F6; color: #C6C6C6; } #view.recruit > span.close{ background: transparent; border: 1px solid #C6C6C6; font-weight: 300; color: #777; } @media screen and (max-width: 1500px){ /* 리스트 */ #list.recruit .table-list thead th.small{ width: 10%; } #list.recruit .table-list thead th.middle{ width: 15%; } #list.recruit .table-list thead th.large{ width: 20%; } } @media screen and (max-width: 1200px){ /* 리스트 */ #list.recruit .table-list *{ font-size: 1.7rem; } #list.recruit .table-list thead th.middle{ width: 12%; } #list.recruit .table-list thead th.large{ width: 17%; } /* 상세 */ #view.recruit .title-box > span{ width: 100px; height: 40px; margin-bottom: 15px; } } @media screen and (max-width: 1000px){ /* 리스트 */ #list.recruit .table-list thead{ display: none; } #list.recruit .table-list tbody tr:first-of-type{ border-top: 1px solid #C1C1C1; } #list.recruit .table-list tbody tr{ display: flex; flex-wrap: wrap; position: relative; } #list.recruit .table-list tbody tr td{ display: inline-block; padding: 10px; } #list.recruit .table-list tbody tr td:nth-of-type(1){ display: none; } #list.recruit .table-list tbody tr td:nth-of-type(2){ width: auto; font-weight: 500; color: var(--mainColor); } #list.recruit .table-list tbody tr td:nth-of-type(3){ width: 100%; position: static; padding-top: 0; } #list.recruit .table-list tbody tr td:nth-of-type(4), #list.recruit .table-list tbody tr td:nth-of-type(5){ padding-top: 0; font-size: 1.5rem; } #list.recruit .table-list tbody tr td:last-of-type{ width: 100px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } #list.recruit .table-list tbody td p{ text-align: left;} #list.recruit .table-list tbody td > span{ font-size: 1.5rem; } } @media screen and (max-width: 700px){ /* 상세 */ #view.recruit .title-box > span{ width: 85px; height: 35px; } } /* 지원서 등록 - 개인정보 수집 및 이용에 대한 안내 */ #agree h5{ font-size: 2rem; font-weight: 600; color: #222; margin-bottom: 25px; } #agree .agree-box{ height: 700px; border: 1px solid #C1C1C1; padding: 30px; margin-bottom: 20px; } #agree .agree-box *{ font-size: 1.7rem; font-weight: 300; color: #222; line-height: 2; } #agree .agree-box h6{ font-weight: 600; line-height: 1.3; margin-bottom: 20px; } #agree .agree-box dl{ margin-top: 30px; } #agree .agree-box dd{ padding-left: 1em; text-indent: -0.6em; } #agree .check input{ display: none; } #agree .check input + label{ display: inline-block; font-size: 1.8rem; font-weight: 300; color: #222; padding-left: 40px; position: relative; cursor: pointer; } #agree .check input + label::before, #agree .check input + label::after{ position: absolute; top: -1px; left: 0; } #agree .check input + label::before{ content: url("/img/sub/recruit/agree_check_x.png"); } #agree .check input + label::after{ content: url("/img/sub/recruit/agree_check_o.png"); opacity: 0; } #agree .check input:checked + label{ color: var(--mainColor); } #agree .check input:checked + label::before{ opacity: 0; } #agree .check input:checked + label::after{ opacity: 1; } #agree .center{ margin-top: 90px; } #agree .center button{ border: none; background: none; padding: 0; margin-right: 20px; } @media screen and (max-width: 1500px){ #agree .center button img{ height: 58px; } } @media screen and (max-width: 1200px){ #agree h5{ font-size: 1.9rem; margin-bottom: 10px; } #agree .agree-box{ height: 600px; } #agree .agree-box *{ font-size: 1.7rem; } #agree .agree-box h6{ margin-bottom: 10px; } #agree .agree-box dl{ margin-top: 20px; } #agree .center{ margin-top: 60px; } } @media screen and (max-width: 850px){ #agree h5{ font-size: 1.7rem; } #agree .agree-box{ height: 500px; padding: 20px; margin-bottom: 10px+; } #agree .agree-box *{ font-size: 1.6rem; } #agree .check input + label{ font-size: 1.7rem; padding-left: 30px; } #agree .check input + label::before, #agree .check input + label::after{ top: -1px; transform: scale(0.9); } #agree .center{ margin-top: 40px; } } /* 지원서 등록 - 공통 */ .form-table{ border-top: 1px solid #222; } .form-table tr{ border-bottom: 1px solid #E1E1E1; } .form-table th{ background: #F6F6F6; font-size: 1.7rem; font-weight: 500; color: #222; padding: 0 20px; } .form-table th span{ color: var(--red); } .form-table td{ padding: 10px 20px; } .form-table td *{ font-family: var(--baseFont); font-size: 1.7rem; font-weight: 300; color: #222; } .form-table td span.small-text{ display: inline-block; width: 100%; font-size: 1.6rem; font-weight: 300; color: #666; margin-top: 10px; } .form-table select, .form-table input[type="text"], .form-table input[type="tel"], .form-table td p, .form-table td .min-height{ width: 100%; min-height: 65px; } .form-table select, .form-table input[type="text"], .form-table input[type="tel"], .form-table textarea{ border: 1px solid #CCC; padding: 0 20px; appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; } .form-table select{ appearance: none; -moz-appearance: none; -webkit-appearance: none; padding-right: 50px; background: #fff url("/img/sub/recruit/select_icon.png") no-repeat center right 20px; } .form-table input[type="text"]:not(.placeholder)::placeholder{ color: #222; } .form-table textarea{ resize: none; width: 100%; height: 180px; padding: 20px; } .form-table td p{ display: flex; align-items: center; } .form-table td .min-height{ display: flex; align-items: center; } .form-table td .black{ width: 210px; height: 60px; background: #333; border: none; font-weight: 300; color: #fff; } .form-table .hyphen td span{ display: inline-block; width: 20px; height: 1px; background: #CCC; margin: 0 10px; } #step .hyphen .flex input{ width: calc((100% - 44px) / 2); } /* 세로 형태 표 */ .vertical .form-table tr th, .vertical .form-table tr td{ border-right: 1px solid #CCC; } .vertical .form-table tr th:last-of-type, .vertical .form-table tr td:last-of-type{ border-right: none; } .vertical .form-table th{ height: 70px; } /* 가로 길이가 넓은 표 */ .wide .form-table th{ width: 440px; padding: 20px 25px; text-align: left; vertical-align: top; position: relative; } .wide .form-table th div{ display: flex; } .wide .form-table th div span{ display: inline-block; color: #222; margin-right: 5px; } .wide .form-table td{ padding: 20px; } .wide .form-table td .radio{ flex-direction: column; align-items: flex-start; gap: 23px; } /* 임시저장, 이전단계, 다음단계 버튼 */ form .center{ display: flex; justify-content: center; align-items: center; margin-top: 90px; } form .center .button:not(:last-of-type){ margin-right: 20px; } .form-table .flex{ display: flex; align-items: center; } .form-table td.email span{ display: inline-block; padding: 0 20px; } .max740{ max-width: 740px; } .max416{ max-width: 416px; } .max300{ max-width: 300px; } .max250{ max-width: 250px; } .max200{ max-width: 200px; } /* input[type="radio"] 커스텀 */ ul.radio{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; } ul.radio li input{ display: none; } ul.radio li input + label{ display: inline-block; font-size: 1.7rem; font-weight: 300; color: #222; padding-left: 30px; position: relative; cursor: pointer; } ul.radio li input + label::before{ content: ""; width: 15px; height: 15px; border: 2px solid #222; border-radius: 50%; position: absolute; top: 1px; left: 0; } ul.radio li input:checked + label::after{ content: ""; width: 9px; height: 9px; background: #222; border-radius: 50%; position: absolute; top: 6px; left: 5px; } /* input[type="checkbox"] 커스텀 */ ul.checkbox{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 50px; } ul.checkbox li input{ display: none; } ul.checkbox li input + label{ display: inline-block; padding-left: 30px; font-size: 1.7rem; font-weight: 500; color: #222; position: relative; cursor: pointer; } ul.checkbox li input + label::before{ content: ""; width: 15px; height: 15px; border: 2px solid #222; border-radius: 5px; position: absolute; top: 2px; left: 0; } ul.checkbox li input:checked + label::after{ content: url("/img/sub/recruit/checkbox_checked.png"); position: absolute; top: 1px; left: 4px; } /* 추가/삭제 버튼 */ .button-list{ display: flex; justify-content: flex-end; margin-top: 20px; } .button-list button{ display: flex; justify-content: space-between; align-items: center; width: 115px; height: 60px; background: #fff; border: 1px solid #333; font-family: var(--baseFont); font-size: 1.7rem; font-weight: 300; color: #222; padding: 0 25px 0 20px; } .button-list button::before{ position: relative; top: 2px; } .button-list button.plus::before{ content: url("/img/sub/recruit/plus_icon.png"); } .button-list button.minus::before{ content: url("/img/sub/recruit/minus_icon.png"); } .button-list button:not(:last-of-type){ margin-right: 13px; } @media screen and (max-width: 1200px){ /* 지원서 등록 - 공통 */ .form-table select, .form-table input[type="text"], .form-table input[type="tel"], .form-table td p, .form-table td .min-height{ min-height: 60px; } #step .hyphen .flex input{ width: calc(100% / 2); } #step .hyphen td span{ width: 10px; margin: 0 5px; } form .center{ margin-top: 60px; } .form-table td .black{ width: 160px; } /* input[type="radio"] 커스텀 */ ul.radio li input + label{ font-size: 1.7rem; } ul.radio li input + label::before{ top: 1px; } ul.radio li input:checked + label::after{ top: 6px; } /* input[type="checkbox"] 커스텀 */ ul.checkbox li input + label{ font-size: 1.7rem; } ul.checkbox li input + label::before{ top: 0; } ul.checkbox li input:checked + label::after{ top: 0; } /* 추가/삭제 버튼 */ .button-list button{ width: 100px; height: 50px; padding: 0 20px 0 15px; font-size: 1.7rem; } .button-list button::before{ top: 1px; transform: scale(0.9); } } @media screen and (max-width: 1000px){ /* 지원서 등록 - 공통 */ .form-table colgroup col{ display: none; } .form-table table{ background: #F6F6F6; } .form-table tr{ display: flex; flex-wrap: wrap; align-items: center; border-bottom: none; } .form-table th{ width: 150px; } .form-table td{ width: calc(100% - 150px); background: #fff; position: relative; } .form-table td::after{ content: ""; width: calc(100% + 150px); height: 1px; background: #E1E1E1; position: absolute; bottom: 0; right: 0; } /* 세로 형태 표 */ .vertical .form-table th{ display: none; } .vertical .form-table tr th, .vertical .form-table tr td{ border-right: none; } .vertical .form-table tr td{ width: 100%; padding-left: 170px; position: relative; } .vertical .form-table tr td::before{ content: attr(data-th); width: 150px; height: 100%; background: #F6F6F6; font-size: 1.7rem; font-weight: 500; color: #222; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; } /* 가로 길이가 넓은 표 */ .wide .form-table th{ width: 100%; } .wide .form-table td{ width: 100%; } } @media screen and (max-width: 850px){ /* 지원서 등록 - 공통 */ .form-table th{ font-size: 1.6rem; } .form-table td *{ font-size: 1.6rem; } .form-table select, .form-table input[type="text"], .form-table input[type="tel"], .form-table td p, .form-table td .min-height{ min-height: 50px; } form .center{ margin-top: 40px; } .form-table td .black{ width: 140px; height: 50px; } /* 세로 형태 표 */ .vertical .form-table tr td::before{ font-size: 1.6rem; } /* input[type="radio"] 커스텀 */ ul.radio li input + label{ font-size: 1.6rem; } ul.radio li input + label::before{ top: 0px; } ul.radio li input:checked + label::after{ top: 5px; } /* input[type="checkbox"] 커스텀 */ ul.checkbox li input + label{ font-size: 1.6rem; } /* 추가/삭제 버튼 */ .button-list button{ width: 90px; height: 45px; padding: 0 15px 0 10px; font-size: 1.6rem; } .button-list button::before{ top: 0px; transform: scale(0.8); } } @media screen and (max-width: 650px){ /* 지원서 등록 - 공통 */ .form-table select, .form-table input[type="text"], .form-table input[type="tel"], .form-table td p, .form-table td .min-height{ min-height: 45px; } .form-table select, .form-table input[type="text"], .form-table input[type="tel"], .form-table textarea{ padding: 0 10px; } .form-table select{ padding: 0 10px; padding-right: 40px; background-position: center right 5px; } .form-table td .black{ width: 130px; height: 45px; } .form-table tr{ display: flex; flex-direction: column; } .form-table th{ width: 100%; height: auto; padding: 10px 20px; text-align: left; border-bottom: 1px solid #E1E1E1; } .form-table td{ width: 100%; overflow: hidden; } /* 세로 형태 표 */ .vertical .form-table tr td{ padding-left: 20px; padding-top: 0; } .vertical .form-table tr td.flex{ flex-wrap: wrap; justify-content: center; padding: 0; padding-bottom: 10px; } .vertical .form-table tr td::before{ position: relative; width: 100%; left: -20px; padding: 10px 20px; justify-content: flex-start; margin-bottom: 10px; border-bottom: 1px solid #E1E1E1; } .vertical .form-table tr td.flex::before{ left: 0; } /* 가로 길이가 넓은 표 */ .wide .form-table th{ padding: 10px 20px; } .wide .form-table td{ padding: 10px 20px; } } @media screen and (max-width: 500px){ /* 지원서 등록 - 공통 */ .max416{ max-width: 100%; } .max300{ max-width: 100%; } } /* 지원서 등록 - 기본 */ .form-table.basic th{ width: 250px; } @media screen and (max-width: 1200px){ .form-table.basic th{ width: 180px; } } @media screen and (max-width: 850px){ .form-table.basic th{ width: 150px; } } @media screen and (max-width: 650px){ .form-table.basic th{ display: block; width: 100%; } } /* step */ #step .step-list{ margin-bottom: 60px; overflow: hidden; } #step .step-list ul{ display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: -20px; } #step .step-list li{ width: calc((100% - 160px) / 5); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: #fff; border: 1px solid #CCC; border-radius: 50px; padding: 20px; margin-right: 40px; margin-bottom: 20px; position: relative; } #step .step-list li::after{ content: ""; width: 100%; height: 1px; background: #CCC; position: absolute; top: 50%; right: -100%; z-index: -1; transform: translateY(-50%); } #step .step-list li:last-of-type::after{ display: none; } #step .step-list li:nth-of-type(5){ margin-right: 0; } #step .step-list li *{ color: #222; line-height: 1.7; } #step .step-list li span{ font-size: 1.5rem; font-weight: 300; } #step .step-list li p{ font-size: 1.7rem; font-weight: 500; } #step .step-list li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; } #step .step-list li.active{ background: var(--mainColor); border: 1px solid var(--mainColor); } #step .step-list li.active *{ color: #fff; } #step section{ overflow: hidden; } #step section:not(:last-of-type){ margin-bottom: 60px; } #step section > .flex-box{ display: flex; /* justify-content: space-between; */ align-items: flex-start; } #step section > .flex-box ul.checkbox{ margin-left: 20px; } #step section > .flex-box ul.checkbox li input + label{ font-size: 1.8rem; } #step section .form-table:not(:last-of-type){ margin-bottom: 40px; border-top: 1px solid #222; } #step .section-title{ display: flex; align-items: center; margin-bottom: 25px; } #step .section-title h5{ font-size: 2rem; font-weight: 700; color: #222; } #step .section-title p{ font-size: 1.5rem; font-weight: 300; color: #333; margin-left: 20px; } #step .section-title p span{ font-weight: 600; color: var(--red); } /* 표 제목 가로 사이즈 */ #step .form-table colgroup col:nth-of-type(odd){ width: 250px; } #step .three .form-table colgroup col:nth-of-type(odd){ width: 150px; } /* step - 회색박스 */ #step form .gray-box{ margin-bottom: 20px; } #step .gray-box{ background: #F6F6F6; padding: 20px; } #step .gray-box *{ font-size: 1.7rem; font-weight: 300; color: #333; } #step .gray-box .flex-box{ display: flex; justify-content: space-between; align-items: center; padding: 40px; } #step .gray-box h4{ font-size: 3rem; font-weight: 700; color: #222; margin-bottom: 10px; } #step .gray-box p.red{ color: var(--red); margin-top: 40px; } #step .gray-box select{ max-width: 480px; width: 100%; height: 60px; border: 1px solid #E1E1E1; font-family: var(--baseFont); padding: 0 20px; padding-right: 50px; border-radius: 0; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: #F6F6F6 url("/img/sub/recruit/select_icon.png") no-repeat center right 20px / auto; } #step .gray-box ul li{ line-height: 2; padding-left: 13px; position: relative; } #step .gray-box ul li::before{ content: ""; width: 3px; height: 3px; border-radius: 50%; background: #333; position: absolute; top: 17px; left: 0; } /* border-button */ .border-button{ width: 65px; height: 70px; background: #fff; border: 1px solid #CCC; margin-left: 10px; } @media screen and (max-width: 1500px){ #step .step-list li{ padding: 15px; } /* step - 회색박스 */ #step .gray-box h4{ font-size: 2.5rem; } #step .gray-box select{ max-width: 400px; } /* 표 제목 가로 사이즈 */ #step .form-table colgroup col:nth-of-type(odd){ width: 200px; } #step .three .form-table colgroup col:nth-of-type(odd){ width: 126px; } } @media screen and (max-width: 1200px){ #step .step-list li p{ font-size: 1.7rem; } #step .section-title{ margin-bottom: 15px; } #step .section-title h5{ font-size: 1.8rem; } /* step - 회색박스 */ #step .gray-box .flex-box{ padding: 15px; } #step .gray-box *{ font-size: 1.7rem; } #step .gray-box select{ max-width: 350px; } /* border-button */ .border-button{ width: 60px; height: 60px; } } @media screen and (max-width: 1000px){ #step .step-list li{ width: calc((100% - 40px) / 3); margin-right: 20px; } #step .step-list li:nth-of-type(5n){ margin-right: 20px; } #step .step-list li:nth-of-type(3n){ margin-right: 0; } /* step - 회색박스 */ #step .gray-box .flex-box{ flex-direction: column; align-items: flex-start; } #step .gray-box p.red{ margin-top: 15px; margin-bottom: 25px; } } @media screen and (max-width: 850px){ /* step - 회색박스 */ #step .gray-box *{ font-size: 1.6rem; } #step .gray-box h4{ font-size: 2.2rem; } #step .gray-box select{ height: 50px; } /* border-button */ .border-button{ width: 50px; height: 50px; } } @media screen and (max-width: 650px){ #step .step-list li{ width: calc((100% - 20px) / 2); padding: 10px; } #step .step-list li:nth-of-type(3n){ margin-right: 20px; } #step .step-list li:nth-of-type(2n){ margin-right: 0; } #step .step-list li p{ font-size: 1.6rem; } #step .step-list li span{ font-size: 1.4rem; } /* step - 회색박스 */ #step .gray-box select{ height: 45px; padding: 0 10px; padding-right: 40px; background-position: center right 5px; } #step .form-table th{ width: 100%; } #step .form-table td{ width: 100%; } /* border-button */ .border-button{ height: 45px; } } /* step01 - 기본정보 작성 */ #step.step1 section{ overflow: hidden; } #step.step1 section .form-table:not(:last-of-type){ margin-bottom: 20px; } #step.step1 colgroup col:nth-of-type(odd){ width: 250px; } #step.step1 .flex-box{ display: flex; flex-wrap: wrap; } #step.step1 .flex-box .flex:not(:last-of-type){ margin-right: 50px; } #step.step1 .flex-box .flex span{ display: inline-block; font-weight: 500; color: #222; margin-right: 10px; } #step.step1 .birth select:not(:last-of-type){ margin-right: 20px; } #step.step1 .max220{ max-width: 220px; } #step.step1 .basic-info .form-table{ display: flex; justify-content: flex-end; } #step.step1 .basic-info table{ width: calc(100% - 240px); } #step.step1 .basic-info .profile{ display: flex; flex-direction: column; justify-content: center; width: 240px; border-bottom: 1px solid #E1E1E1; padding: 0 20px; } #step.step1 .basic-info .profile > div{ width: 100%; } #step.step1 .basic-info .profile .img{ position: relative; margin-bottom: 15px; } #step.step1 .basic-info .profile .img > div{ display: flex; justify-content: center; align-items: center; height: 290px; background: #F6F6F6; font-size: 1.6rem; font-weight: 300; color: #555; line-height: 1.7; text-align: center; } #step.step1 .basic-info .profile .img figure{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; } #step.step1 .basic-info .profile .img figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #step.step1 .basic-info .profile.change .img > div{ opacity: 0; } #step.step1 .basic-info .profile .file input{ display: none; } #step.step1 .basic-info .profile .file label{ display: inline-block; width: 100%; font-size: 1.6rem; font-weight: 500; color: #222; text-align: center; padding: 10px; border: 1px solid #CCC; cursor: pointer; } #step.step1 .basic-info .profile > p{ font-size: 1.5rem; font-weight: 300; color: #222; text-align: center; margin-top: 25px; } #step.step1 .basic-info .profile > p .red{ color: var(--red); } #step.step1 .form-table .address input[type="text"]{ min-height: 60px; } #step.step1 .form-table .address td > input{ margin-top: 5px; } #step.step1 .form-table .address button{ margin-left: 10px; } #step.step1 .form-table .number input{ width: calc((100% - 78px) / 3); } @media screen and (max-width: 1200px){ #step.step1 colgroup col:nth-of-type(odd){ width: 200px; } #step.step1 .form-table .name .flex{ width: calc((100% - 50px) / 2); } #step.step1 .form-table .flex input{ width: calc(100% - 50px); } } @media screen and (max-width: 1100px){ #step.step1 .form-table table{ background: #F6F6F6; } #step.step1 .form-table colgroup{ display: none; } #step.step1 .form-table tr{ display: flex; flex-wrap: wrap; align-items: center; } #step.step1 .form-table tr:not(:last-of-type){ border-bottom: 1px solid #E1E1E1; } #step.step1 .form-table th{ width: 200px; } #step.step1 .form-table td{ width: calc(100% - 200px); background: #fff; position: relative; } #step.step1 .form-table td::after{ content: ""; width: calc(100% + 200px); height: 1px; background: #E1E1E1; position: absolute; bottom: -1px; right: 0; z-index: 10; } #step.step1 .form-table tr td:last-of-type::after{ display: none; } } @media screen and (max-width: 1000px){ #step.step1 .form-table table{ border-bottom: 1px solid #E1E1E1; } #step.step1 .basic-info .form-table{ flex-direction: column; align-items: center; } #step.step1 .basic-info .profile{ padding: 10px 20px; border-bottom: none; } #step.step1 .basic-info .profile > p{ margin-top: 10px; } #step.step1 .basic-info table{ width: 100%; border-top: 1px solid #E1E1E1; } } @media screen and (max-width: 850px){ #step.step1 .form-table th{ width: 160px; } #step.step1 .form-table td{ width: calc(100% - 160px); } #step.step1 .form-table .name .flex{ width: calc((100% - 30px) / 2); } #step.step1 .flex-box .flex:not(:last-of-type){ margin-right: 30px; } #step.step1 .form-table .address input[type="text"]{ min-height: 50px; } } @media screen and (max-width: 650px){ #step.step1 .form-table tr.name th{ border-top: none; } #step.step1 .form-table tr{ border-bottom: none; } #step.step1 .form-table th{ width: 100%; } #step.step1 .form-table td{ width: 100%; } #step.step1 .form-table td::after{ display: none; } #step.step1 .form-table .address input[type="text"]{ min-height: 45px; } } /* step02 - 학력사항*/ #step.step2 form section:first-of-type{ margin-top: 60px; } /* step03 - 경력 및 자격, 어학 능력사항*/ #step.step3 td.flex input{ width: calc(100% - 75px); } #step.step3 .vertical col{ width: calc(100% / 4); } #step.step3 .vertical col:nth-of-type(2){ width: 20%; } #step.step3 .vertical col:nth-of-type(4){ width: 30%; } #step.step3 .vertical2 col:nth-of-type(1){ width: 25%; } #step.step3 .vertical2 col:nth-of-type(2){ width: 20%; } @media screen and (max-width: 1200px){ #step.step3 td.flex input{ width: calc(100% - 70px); } } @media screen and (max-width: 850px){ #step.step3 td.flex input{ width: calc(100% - 60px); } } @media screen and (max-width: 650px){ #step.step3 td.flex input{ width: calc(100% - 100px); } } /* step04 - 컴퓨터/인터넷 활용성 조사 */ #step.step4 .section-title{ flex-direction: column; align-items: flex-start; } #step.step4 .section-title h5{ margin-bottom: 20px; } #step.step4 .section-title p{ font-size: 1.6rem; line-height: 1.875; letter-spacing: -0.01em; margin-left: 0; } #step.step4 .section-title p.red{ color: var(--red); } @media screen and (max-width: 850px){ #step.step4 .section-title h5{ margin-bottom: 10px; } #step.step4 .section-title p{ font-size: 1.5rem; } } /* step05 - 자기소개서 */ #step.step5 .form-table textarea{ height: 280px; } @media screen and (max-width: 1000px){ #step.step5 br{ display: none; } } /* 제출 완료 페이지 */ #submit{ padding-bottom: 0; } #submit .text-box{ text-align: center; } #submit .text-box h3.page-title{ margin-bottom: 30px; } #submit .text-box p{ font-size: 2rem; font-weight: 400; color: #222; } #submit figure{ width: 100%; text-align: center; margin-top: 150px; padding: 0 30px; overflow: hidden; margin-bottom: -5px; } @media screen and (max-width: 1500px){ #submit .text-box p{ font-size: 1.8rem; } } @media screen and (max-width: 1200px){ #submit .text-box h3.page-title{ margin-bottom: 15px; } #submit figure{ margin-top: 100px; } } @media screen and (max-width: 850px){ #submit .text-box h3.page-title{ margin-bottom: 10px; } #submit .text-box p{ font-size: 1.7rem; } #submit figure{ margin-top: 70px; } } /* 지원조회 - 지원현황 조회 */ #inquire .border-box{ max-width: 990px; width: 100%; margin: 0 auto; border: 1px solid #CCC; text-align: center; padding: 60px; } #inquire .border-box h3.page-title{ margin-bottom: 30px; } #inquire .border-box p{ font-size: 1.8rem; font-weight: 500; color: #222; margin-bottom: 80px; } #inquire .border-box .button{ margin: 0 auto; } @media screen and (max-width: 1200px){ #inquire .border-box h3.page-title{ margin-bottom: 15px; } #inquire .border-box p{ margin-bottom: 40px; } } @media screen and (max-width: 850px){ #inquire .border-box{ padding: 40px 30px; } #inquire .border-box h3.page-title{ margin-bottom: 10px; } #inquire .border-box p{ font-size: 1.7rem; } } @media screen and (max-width: 500px){ #inquire .border-box .button{ width: 140px; } } /* 지원조회 - 지원 현황 확인 */ #check .table-list colgroup col:nth-of-type(1){ width: 23%; } #check .table-list colgroup col:nth-of-type(2){ width: 24%; } #check .table-list .mark{ display: inline-block; width: fit-content; position: static; background: var(--mainColor); border-radius: 6px; font-size: 1.5rem; font-weight: 500; color: #fff; padding: 15px 10px; margin-left: 20px; } @media screen and (max-width: 1200px){ #check .table-list .mark{ padding: 10px; } } @media screen and (max-width: 1000px){ #check .table-list thead tr{ border: none; } #check .table-list th, #check .table-list colgroup{ display: none; } #check .table-list tr{ display: flex; flex-direction: column; border-top: 1px solid #ddd; border-bottom: none; } #check .table-list tr:not(:last-of-type){ margin-bottom: 20px; } #check .table-list td{ width: 100%; display: flex; flex-direction: column; align-items: center; padding-left: 30%; border-bottom: 1px solid #ddd; } #check .table-list td::before{ width: 30%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } #check .table-list td:nth-of-type(1)::before{ content: "공고명"; } #check .table-list td:nth-of-type(2)::before{ content: "지원자명"; } #check .table-list td:nth-of-type(3)::before{ content: "진행 상황"; } #check .table-list .mark{ margin-left: 0; margin-top: 5px; } } /* 제휴제안 - form-table */ #contact .form-table th{ width: 250px; } #contact .form-table .hyphen input{ width: 140px; } #contact .form-table textarea{ height: 400px; } #contact .max320{ max-width: 320px; } #contact .form-table button, #contact .form-table .file label{ display: flex; justify-content: center; align-items: center; width: 200px; height: 65px; border: none; background: #333; font-size: 1.7rem; font-weight: 400; color: #fff; cursor: pointer; } #contact .form-table .file{ margin: 0 10px; } #contact .form-table .file input{ display: none; } #contact .form-table .file label{ background: var(--mainColor); } @media screen and (max-width: 1200px){ #contact .form-table button, #contact .form-table .file label{ width: 150px; height: 60px; } } @media screen and (max-width: 1000px){ #contact .form-table{ overflow: hidden; } #contact .form-table th{ width: 100%; padding: 10px 20px; text-align: left; } #contact .form-table td{ width: 100%; } } @media screen and (max-width: 850px){ #contact .form-table button, #contact .form-table .file label{ width: 120px; height: 50px; font-size: 1.5rem; } } @media screen and (max-width: 650px){ #contact .form-table .hyphen input{ width: calc((100% - 40px) / 3); } #contact .form-table .wrap{ flex-wrap: wrap; } #contact .max320{ max-width: 100%; } #contact .form-table button, #contact .form-table .file label{ width: 100px; height: 45px; margin-top: 10px; } #contact .form-table .file{ margin-left: 0; } .form-table textarea{ padding: 10px; } } /* 채용공고 - 상시채용 템플릿 */ #template{ max-width: 1300px; width: 100%; margin: 0 auto; font-family: var(--Pretendard); } #template > div{ padding: 80px 70px; } #template .flex-box{ display: flex; } #template .template-tit{ font-size: 4.5rem; font-weight: 700; } #template .notice-list li{ font-size: 1.7rem; font-weight: 200; padding-left: 10px; position: relative; line-height: 1.7647; } #template .notice-list li::before{ content: ""; width: 3px; height: 3px; background: #fff; border-radius: 50%; position: absolute; top: 13px; left: 0; } #template .template-title{ padding-right: 55px; padding-bottom: 0; color: #111; overflow: hidden; } #template .template-title .flex-box{ justify-content: space-between; } #template .template-title .text-box{ width: calc(50% - 100px); } #template .template-title p{ font-size: 2.8rem; font-weight: 500; margin: 40px 0 20px; } #template .template-title h4{ font-size: 10rem; font-weight: 700; line-height: 1.2; } #template .template-title h4 span{ color: var(--mainColor); } #template .template-title .img-box{ width: 50%; margin-bottom: -4px; } #template .template-info{ background: var(--mainColor); } #template .template-info *{ color: #fff; } #template .template-info table{ border-top: 2px solid #fff; margin-top: 30px; } #template .template-info table tr{ border-bottom: 1px solid rgba(255, 255, 255, 0.3); } #template .template-info table th, #template .template-info table td{ padding: 30px; } #template .template-info table th{ width: 160px; font-size: 2.3rem; font-weight: 600; vertical-align: top; } #template .template-info table td{ font-size: 2rem; font-weight: 500; padding: 30px; } #template .template-info table td ul li{ position: relative; font-weight: 200; line-height: 2; padding-left: 15px; } #template .template-info table td ul li::before{ content: ""; width: 3px; height: 3px; background: #fff; border-radius: 50%; position: absolute; top: 18px; left: 0; } #template .template-info table td dl{ margin-bottom: 75px; } #template .template-info table td dl dt span{ display: inline-block; font-weight: 600; color: var(--mainColor); padding: 10px 20px; background: #fff; border-radius: 30px; line-height: 1; } #template .template-info table td dl dt{ margin-bottom: 25px; } #template .template-info table td dl dd .bold{ display: block; font-weight: 500; } #template .template-info .condition{ padding-top: 200px; } #template .template-info .condition-box{ background: #fff; border-radius: 30px; padding: 90px 40px; padding-bottom: 100px; } #template .template-info .condition-box *{ color: #111; } #template .template-info .condition-title{ display: flex; border-bottom: 1px solid #DBDBDB; padding: 0 30px; } #template .template-info .condition-title h5{ width: 55%; padding-bottom: 90px; } #template .template-info .condition-title .img{ width: 45%; position: relative; } #template .template-info .condition-title .img img{ position: absolute; bottom: 0; left: 0; } #template .template-info .condition-content ul{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 85px; margin-bottom: -55px; padding: 0 30px; } #template .template-info .condition-content ul li{ width: calc((100% - 20px) / 2); display: flex; justify-content: space-between; align-items: center; margin-bottom: 55px; } #template .template-info .condition-content ul li .icon{ width: 110px; height: 110px; display: flex; justify-content: center; align-items: center; background: #f3f3f3; border-radius: 50%; } #template .template-info .condition-content ul li dl{ width: calc(100% - 135px); } #template .template-info .condition-content ul li dl dt{ font-size: 2.3rem; font-weight: 600; margin-bottom: 10px; } #template .template-info .condition-content ul li dl dd{ font-size: 2rem; font-weight: 300; color: #333; } #template .template-info .condition-content ul li dl dd *{ line-height: 1.5; } #template .template-info .condition-content ul li dl dd strong{ display: inline-block; width: 100%; font-weight: 500; } #template .template-info .condition-content ul li dl dd .red{ color: var(--red); } #template .template-info .condition .notice-list{ margin-top: 30px; } #template .template-schedule{ background: #202020; color: #fff; } #template .template-schedule .schedule-list{ margin-top: 45px; } #template .template-schedule .schedule-list ul{ display: flex; flex-wrap: wrap; margin-bottom: -38px; } #template .template-schedule .schedule-list ul li{ width: calc((100% - 190px) / 6); margin-right: 38px; margin-bottom: 38px; background: #fff; border: 4px solid #fff; border-radius: 50%; padding-bottom: calc((100% - 238px) / 6); position: relative; } #template .template-schedule .schedule-list ul li::before{ content: ""; width: 20px; height: 1px; background: #fff; position: absolute; top: 50%; right: -20px; transform: transalteY(-50%); } #template .template-schedule .schedule-list ul li::after{ content: ""; width: 5px; height: 5px; background: #fff; border-radius: 50%; position: absolute; top: 50%; right: -25px; transform: translateY(-50%); } #template .template-schedule .schedule-list ul li:last-of-type{ margin-right: 0; } #template .template-schedule .schedule-list ul li:last-of-type::before, #template .template-schedule .schedule-list ul li:last-of-type::after{ display: none; } #template .template-schedule .schedule-list ul li span{ width: 100%; font-size: 2.3rem; font-weight: 700; color: #111; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #template .template-schedule .schedule-list ul li.last{ background: var(--mainColor); border: 4px solid #0BAB95; } #template .template-schedule .schedule-list ul li.last span{ color: #fff; } #template .template-schedule .notice-list{ margin: 50px 0 60px; } #template .template-schedule .notice-list li{ font-size: 2rem; line-height: 1.5; padding-left: 15px; } #template .template-schedule .schedule-box{ background: #fff; border-radius: 30px; padding: 45px 40px; } #template .template-schedule .schedule-box h6{ font-size: 3rem; font-weight: 700; color: #111; margin-bottom: 20px; } #template .template-schedule .schedule-box ul{ display: flex; flex-wrap: wrap; margin-bottom: -20px; } #template .template-schedule .schedule-box ul li{ width: calc((100% - 40px) / 2); color: #333; padding-left: 45px; position: relative; font-size: 2rem; font-weight: 300; color: #333; margin-bottom: 20px; } #template .template-schedule .schedule-box ul li:nth-of-type(odd){ margin-right: 40px; } #template .template-schedule .schedule-box ul li::before{ content: attr(data-num); width: 35px; height: 35px; background: var(--mainColor); border-radius: 50%; position: absolute; top: -5px; left: 0; display: flex; justify-content: center; align-items: center; color: #fff; } #template .template-schedule .schedule-box ul li a{ text-decoration: underline; text-decoration-thickness: from-font; } #template .template-guide{ color: #111; } #template .template-guide ul{ margin-top: 50px; } #template .template-guide ul li{ display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 20px; padding: 40px 30px; } #template .template-guide ul li:not(:last-of-type){ margin-bottom: 15px; } #template .template-guide ul li .title{ width: 145px; display: flex; flex-direction: column; align-items: center; } #template .template-guide ul li .title span{ display: inline-block; font-size: 2.3rem; font-weight: 600; text-align: center; margin-top: 20px; } #template .template-guide ul li .content{ width: calc(100% - 220px); } #template .template-guide ul li .content p{ font-size: 2rem; font-weight: 300; line-height: 1.5; } @media screen and (max-width: 1500px){ #template .template-tit{ font-size: 3.5rem; } #template .template-title h4{ font-size: 7.5rem; } #template .template-title p{ font-size: 2.3rem; } #template .template-info table th{ font-size: 2rem; } #template .template-info table td{ font-size: 1.8rem; } #template .template-info .condition-content ul{ margin-top: 60px; } #template .template-info .condition-content ul li .icon{ width: 90px; height: 90px; } #template .template-info .condition-content ul li dl{ width: calc(100% - 115px); } #template .template-info .condition-content ul li dl dt{ font-size: 2rem; } #template .template-info .condition-content ul li dl dd{ font-size: 1.8rem; } #template .template-schedule .schedule-list ul li span{ font-size: 1.8rem; } #template .template-schedule .notice-list li{ font-size: 1.8rem; } #template .template-schedule .schedule-box h6{ font-size: 2.5rem; } #template .template-schedule .schedule-box ul{ flex-direction: column; } #template .template-schedule .schedule-box ul li{ width: 100%; font-size: 1.8rem; } #template .template-guide ul li .title span{ font-size: 2rem; } #template .template-guide ul li .content p{ font-size: 1.8rem; } } @media screen and (max-width: 1360px){ #template .template-guide ul li .content p br{ display: none; } } @media screen and (max-width: 1200px){ #template > div{ padding: 40px 50px; } #template .template-tit{ font-size: 2.8rem; } #template .template-title p{ font-size: 2rem; } #template .template-info .condition-box{ padding: 60px 25px; } #template .template-info table th{ font-size: 1.8rem; } #template .template-info table td{ font-size: 1.7rem; } #template .template-info table td dl{ margin-bottom: 40px; } #template .template-info table td dl dt{ margin-bottom: 15px; } #template .template-info table td dl dt span{ padding: 10px 12px; } #template .template-info .condition{ padding-top: 180px; } #template .template-info .condition-title{ padding: 0 15px; } #template .template-info .condition-title h5{ padding-bottom: 45px; } #template .template-info .condition-content ul{ padding: 0 15px; margin-top: 35px; } #template .template-info .condition-content ul li dl dt{ font-size: 1.8rem; } #template .template-info .condition-content ul li dl dd{ font-size: 1.7rem; } #template .template-info .condition .notice-list{ margin-top: 15px; } #template .template-schedule .schedule-box{ padding: 25px 30px 30px; } #template .template-schedule .schedule-box ul li{ font-size: 1.7rem; } #template .template-schedule .schedule-box ul li::before{ width: 30px; height: 30px; top: -3px; font-size: 1.5rem; } #template .template-schedule .schedule-list{ margin-top: 15px; } #template .template-schedule .notice-list{ margin: 20px 0 40px; } #template .template-schedule .notice-list li{ font-size: 1.7rem; } #template .template-guide ul li{ padding: 30px 20px; } #template .template-guide ul li .title span{ font-size: 1.8rem; } #template .template-guide ul li .content p{ font-size: 1.7rem; } } @media screen and (max-width: 1000px){ #template .template-title h4{ font-size: 6rem; } #template .template-info table th{ width: 120px; } #template .template-info .condition{ padding-top: 140px; } #template .template-info .condition-content ul li{ flex-direction: column; justify-content: flex-start; } #template .template-info .condition-content ul li dl{ width: 100%; text-align: center; margin-top: 15px; } #template .template-schedule .schedule-list ul{ justify-content: center; } #template .template-schedule .schedule-list ul li{ width: calc((100% - 76px) / 3); padding-bottom: calc((100% - 100px) / 3); } #template .template-schedule .schedule-list ul li:nth-of-type(3n){ margin-right: 0; } #template .template-schedule .schedule-list ul li:nth-of-type(3n)::before, #template .template-schedule .schedule-list ul li:nth-of-type(3n)::after{ display: none; } #template .template-guide ul{ margin-top: 25px; } } @media screen and (max-width: 920px){ #template .template-title{ padding-right: 50px; } #template .template-title .flex-box{ flex-direction: column; align-items: flex-end; } #template .template-title .text-box{ width: 100%; } #template .template-title .img-box{ width: 60%; margin-top: -15%; } } @media screen and (max-width: 850px){ #template > div{ padding: 30px 25px; } #template .template-tit{ font-size: 2.3rem; } #template .template-title{ padding-right: 25px; } #template .template-title h4{ font-size: 4.8rem; } #template .template-title p{ margin: 20px 0 5px; } #template .template-info table{ margin-top: 15px; } #template .template-info table th{ width: 100px; } #template .template-info table th, #template .template-info table td{ padding: 20px; } #template .template-info table td dl:last-of-type{ margin-bottom: 0; } } @media screen and (max-width: 755px){ #template .template-info .condition-title{ flex-direction: column; } #template .template-info .condition-title h5{ width: 70%; } #template .template-info .condition-title .img{ left: 100%; transform: translateX(-100%); } } @media screen and (max-width: 700px){ #template > div{ padding: 30px 20px; } #template .template-info table tr{ display: flex; flex-direction: column; } #template .template-info table th{ width: 100%; background: #fff; color: var(--mainColor); text-align: left; padding: 8px 15px; } #template .template-guide ul li{ flex-direction: column; padding: 25px 20px 20px; } #template .template-guide ul li .content{ width: 100%; margin-top: 15px; } } @media screen and (max-width: 650px){ #template .template-title h4{ font-size: 4rem; } #template .template-info .condition{ padding-top: 30px; } #template .template-info .condition-box{ padding: 30px 20px; } #template .template-info .condition-title{ flex-direction: column; overflow: hidden; } #template .template-info .condition-title h5{ width: 100%; padding-bottom: 30px; text-align: center; } #template .template-info .condition-title .img{ display: none; } } @media screen and (max-width: 600px){ #template .template-title .img-box{ margin-top: -10%; } #template .template-info .condition-content ul{ flex-direction: column; padding: 0; margin-bottom: -30px; } #template .template-info .condition-content ul li{ width: 100%; flex-direction: row; justify-content: space-between; margin-bottom: 30px; } #template .template-info .condition-content ul li .icon{ width: 80px; height: 80px; } #template .template-info .condition-content ul li .icon img{ transform: scale(0.9); } #template .template-info .condition-content ul li dl{ width: calc(100% - 100px); text-align: left; margin-top: 0; } } @media screen and (max-width: 550px){ #template .template-schedule .schedule-list ul li{ width: calc((100% - 38px) / 2); padding-bottom: calc((100% - 54px) / 2); } #template .template-schedule .schedule-list ul li:nth-of-type(3n){ margin-right: 38px; } #template .template-schedule .schedule-list ul li:nth-of-type(3n)::before, #template .template-schedule .schedule-list ul li:nth-of-type(3n)::after{ display: block; } #template .template-schedule .schedule-list ul li:nth-of-type(2n){ margin-right: 0; } #template .template-schedule .schedule-list ul li:nth-of-type(2n)::before, #template .template-schedule .schedule-list ul li:nth-of-type(2n)::after{ display: none; } }