@charset "utf-8";

/* 헤더 */
#header .header { width: 100%; position: fixed; top: 0; left: 0; z-index: 99999; transition: top .1s ease; } 
#header .header.fixed { border-bottom: 1.5px solid #E6E6E6; background: #fff; } 
#header .header.on { border-bottom: 1.5px solid #E6E6E6; background: #fff; } 
#header .header:before { content: ""; width: 100%; height: 0; background-color: #fff; border-top: 1.5px solid #E6E6E6; position: absolute; top: 100%; left: 0; opacity: 0; transition: all .1s ease; } 
#header .header.on:before { height: 325px; opacity: 1; border-bottom: 1.5px solid #e6e6e6; box-shadow: 0px 8px 16px -4px rgba(22, 34, 51, 0.08) } 
#header .inner { width: 100%; max-width: 1654px; padding: 0 32px; margin: 0 auto; position: relative; } 
#header .inner .logo { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); } 
#header .inner .logo a { font-size: 20px; font-weight: 600; color: #fff; font-family: SUIT; letter-spacing: -2px; } 
#header .header.fixed .inner .logo a { color: #000; } 
#header .header.on .inner .logo a { color: #000; } 
#header .nav { width: 100%; display: inline-block; } 
#header .nav .depth1 { display: flex; width: 100%; flex-direction: row; justify-content: flex-end; align-items: flex-start; } 
#header .nav .depth1 > li { position: relative; } 
#header .nav .depth1 > li > a { width: 140px; padding: 40px 0; font-size: 18px; font-weight: 600; letter-spacing: -0.75px; display: inline-block; text-align: center; color:#fff; } 
#header .header.fixed .nav .depth1 > li > a { color: #000; } 
#header .header.on .nav .depth1 > li > a { color: #000; } 
#header .nav a:after { content: ""; width: 0; height: 2px; position: absolute; bottom: 0; left: 0; background-color: #0b8000; transition: width .3s ease; } 
#header .nav .depth2 { width: 100%; text-align: center; position: absolute; height: 325px; opacity: 0; transition: opacity .5s ease; display: none; } 
#header .header.on .nav .depth2 { display: block; opacity: 1; } 
#header .nav .depth2 > li > a { font-size: 15px; padding: 25px 0; display: block; letter-spacing: -0.75px; font-weight: 600; } 
#header .nav .depth1 > li:hover > a,
#header .nav .depth2 a:hover,
#header .nav a.on,
#header .nav a.active { color: #0b8000; font-weight: 700; } 
#header .nav .depth1 > li:hover > a:after,
#header .nav a.on:after,
#header.slide-open .nav a.active:after { width: 100%; } 
#header .mobileHeader { display: none; } 
#header .nav .depth1 > li > a.on { color: #0b8000; } 
#header .header.fixed .nav .depth1 > li > a.on { color: #0b8000; } 
#header .nav .depth2 > li > a.act{color: #0b8000;}


/* section0 */
#section0 { height: 900px; width: 100%; } 
#section0 .wrap { width: 100%; height: 100%; position: relative; } 
#section0 .swiper { height: 100%; } 
#section0 .swiper .swiper-slide { background-repeat: no-repeat; background-position: 50% 10%; background-size: cover; } 
#section0 .swiper .main1 { background-image: url(../img/main01.webp); } 
#section0 .swiper .main2 { background-image: url(../img/main02.webp); } 
#section0 .swiper .main3 { background-image: url(../img/main03.webp); } 
#section0 .textBox { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 200px; gap: 20px; } 
#section0 .textBox .text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } 
#section0 .textBox .text h4 { color: #F5F5F5; font-family: SUITE; font-size: 40px; letter-spacing: -0.75px; word-break: keep-all; } 
#section0 .textBox .text h3 { color: #FFF; font-family: SUITE; font-size: 50px; letter-spacing: -0.25px; word-break: keep-all; } 
#section0 .textBox .text h2 { color: #FFF; font-size: 63px; font-weight: 800; word-break: keep-all; } 
#section0 .textBox .button .bt { display: flex; padding: 10px 15px; justify-content: center; align-items: center; gap: 50px; border-radius: 50px; border: 1.5px solid #FFF; color: #FFF; font-family: SUITE; font-size: 18px; letter-spacing: -0.75px; transition: all 0.2s; } 
#section0 .textBox .button .bt i { width: 24px; height: 24px; background-image: url(../img/arrow-right-white.svg); background-size: cover; transition: all 0.2s; } 
#section0 .textBox .button .bt:hover { background-color: #fff; color: #0b8000; } 
#section0 .textBox .button .bt:hover i { background-image: url(../img/arrow-right-green.svg); } 
#section0 .swiper-button-prev, #section0 .swiper-button-next { color: #fff; } 
#section0 .swiper-button-prev { left: 100px; } 
#section0 .swiper-button-next { right: 100px; } 
#section0 .swiper-pagination { bottom: 80px; } 
#section0 .swiper-pagination-bullet { background: #FFF; } 


/* section01 */
#section1 { width: 100%; } 
#section1 .wrap { max-width: 1440px; width: 100%; margin: 0 auto; padding: 100px 0; } 
#section1 .inner { width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } 
#section1 .title { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; width: 720px; height: 650px; } 
#section1 .title .text { gap: 20px; display: flex; flex-direction: column; align-items: flex-start; } 
#section1 .title .text .tit { font-family: Pretendard; font-size: 30px; font-weight: 900; } 
#section1 .title .text p { font-size: 18px; letter-spacing: -0.75px; color: #555; width: 350px; word-break: keep-all; line-height: 1.4; } 
#section1 .title .text b { font-size: 20px; letter-spacing: -0.75px; color: #727272; font-weight: 700; width: 320px; word-break: keep-all; line-height: 1.4; } 
#section1 .title .button .bt { display: flex; padding: 10px 15px; justify-content: center; align-items: center; gap: 50px; border-radius: 50px; border: 1.5px solid #727272; color: #727272; font-family: SUITE; font-size: 18px; letter-spacing: -0.75px; transition: all 0.2s; } 
#section1 .title .button .bt i { width: 24px; height: 24px; background-image: url(../img/arrow-right-black.svg); background-size: cover; transition: all 0.2s; } 
#section1 .title .button .bt:hover { background-color: #fff; color: #064001; border: 1px solid #064001; box-shadow:8px 8px 20px 0 rgb(0 0 0 / 10%) } 
#section1 .title .button .bt:hover i { background-image: url(../img/arrow-right-green.svg); } 
#section1 .con { width: 720px; height: 650px; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; transition: all 0.5s; position: relative; } 
#section1 .con:hover { backdrop-filter: opacity(0.5); } 
#section1 .con:hover:after { content: ''; width: 100%; height: 100%; background-color: #00000050; display: block; position: absolute; top: 0; z-index: -1; left: 0; backdrop-filter: blur(1px); } 
#section1 .con .content { width: 100%; height: 100%; display: flex; flex-direction: column; align-content: center; justify-content: center; align-items: center; transition: all 0.5s; } 
#section1 .con:hover .content { flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 60px; } 
#section1 .bsns1 { background-image: url(../img/section02-01.jpg); } 
#section1 .bsns2 { background-image: url(../img/section02-02.jpg); } 
#section1 .bsns3 { background-image: url(../img/section02-03.jpg); } 
#section1 .bsns4 { background-image: url(../img/section02-04.jpg); } 
#section1 .font { width: 720px; height: 650px; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; background-image: url(../img/spelling-col.svg); background-size: 50%; } 
#section1 .con .logo { width:420px; height: 250px; display: flex; flex-direction: column; align-items: center; gap: 30px; } 
#section1 .con .logo .tit { font-size: 30px; color: #ffffff80; font-weight: 700; letter-spacing: -0.5px; } 
#section1 .con:hover .logo { width: 160px; height: 90px; } 
#section1 .con .logo img { width: 100%; height: 100%; object-fit: contain; filter: opacity(0.8); transition: all 0.3s; } 
#section1 .con:hover .logo img { filter: opacity(1); transition: all 0.3s; } 
#section1 .con:hover .logo .tit { display: none; } 
#section1 .con .cntn .text { display: none; } 
#section1 .con:hover .cntn { display: flex; flex-direction: column; gap: 20px; } 
#section1 .con:hover .cntn .text { display: flex; flex-direction: column; gap: 10px; } 
#section1 .con:hover .cntn .text .tit { color: #FFF; font-family: Pretendard; font-size: 20px; font-weight: 900; line-height: 140%; letter-spacing: -0.75px; } 
#section1 .con:hover .cntn .text p { color: #FFF; font-family: Pretendard; font-size: 16px; font-weight: 400; line-height: 140%; letter-spacing: -0.75px; width:300px; word-break: keep-all; word-break: keep-all; } 
#section1 .con .content .bt { display: none; } 
#section1 .con:hover .content .bt { color: #FFF; font-family: Pretendard; font-size: 20px; font-weight: 400; line-height: 140%; letter-spacing: -0.5px; display: flex; gap: 5px; flex-direction: row; align-items: center; } 
#section1 .con:hover .content .yet { cursor: inherit; color: #FFF; font-family: Pretendard; font-size: 20px; font-weight: 400; line-height: 140%; letter-spacing: -0.5px; } 
#section1 .con:hover .content .bt .arrow { width: 24px; height: 24px; background-image: url(../img/arrow-right-white.svg); display: block; } 

/* section2 */
#section2 { height: 700px; width: 100%; } 
#section2 .wrap { width: 100%; height: 100%; position: relative; } 
#section2 .swiper { height: 100%; } 
#section2 .swiper .swiper-slide { background-repeat: no-repeat; background-position: 50% 10%; background-size: cover; } 
#section2 .swiper .con1 { background-image: url(../img/section03-01.webp); } 
#section2 .swiper .con2 { background-image: url(../img/section03-02.webp); } 
#section2 .content { height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; max-width: 1440px; margin: 0 auto; } 
#section2 .content .tit { color: #FFF; font-family: Pretendard; font-size: 50px; font-weight: 900; letter-spacing: -0.5px; word-break: keep-all; } 
#section2 .content .tit strong { color: #86F042;; } 
#section2 .content .txt { color: #FFF; font-family: Pretendard; font-size: 30px; font-weight: 500; letter-spacing: -0.75px; } 

/* section3 게시판 */
#section3 { width: 100%; } 
#section3 .wrap { max-width: 1440px; width: 100%; margin: 0 auto; padding: 100px 0; } 
#section3 .title { display: flex; flex-direction: column; align-items: center; gap: 20px; } 
#section3 .title .tit { color: #000; text-align: center; font-family: Pretendard; font-size: 30px; font-weight: 900; } 
#section3 .title p { color: #555; font-family: Pretendard; font-size: 18px; font-weight: 400; letter-spacing: -0.75px; } 
#section3 .table { padding: 50px 0; } 
#section3 .table .col { width:100%; border-collapse:collapse; table-layout:fixed } 
#section3 .table .col thead { display:none } 
#section3 .table .col tbody tr { border-bottom:1px solid #ddd } 
#section3 .table .col tbody tr:hover { background-color:#f8f8f8 } 
#section3 .table .col tbody td { padding:30px 0; font-size:15px; text-align:center; border:0; color:#333; font-weight: 500; } 
#section3 .table .col tbody td.dat { color:#8b8b8b; font-size: 14px; } 
#section3 .table .col tbody td a { display:block; text-align:left; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; word-break:break-all; transition: all 0.2s; } 
#section3 .table .col tbody td a:hover { text-decoration: underline; } 
#section3 .table .col tbody td .tag { padding: 7px 10px; border-radius: 30px; font-weight: 600; letter-spacing: -0.75px; } 
#section3 .table .col tbody td .notice { background-color: #555; color: #fff; } 
#section3 .button .bt { display: flex; padding: 10px 15px; justify-content: center; align-items: center; gap: 50px; border-radius: 50px; border: 1.5px solid #727272; color: #727272; font-family: SUITE; font-size: 18px; letter-spacing: -0.75px; transition: all 0.2s; } 
#section3 .button .bt i { width: 24px; height: 24px; background-image: url(../img/arrow-right-black.svg); background-size: cover; transition: all 0.2s; } 
#section3 .button .bt:hover { background-color: #fff; color: #064001; border: 1px solid #064001; box-shadow:8px 8px 20px 0 rgb(0 0 0 / 10%); } 
#section3 .button .bt:hover i { background-image: url(../img/arrow-right-green.svg); } 
#section3 .board { width: 100%; } 
#section3 .board .button { display: flex; justify-content: flex-end; } 



/* footer */
#footer { display: flex; align-items: center; justify-content: center; background: #393B3C; } 
#footer .footer { width: 100%; } 
#footer .footer .wrap { width: 100%; padding: 50px 0; max-width: 1440px; margin: 0 auto; } 
#footer .footer .content { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } 
#footer .footer .logo h2 { font-size: 14px; font-weight: 700; letter-spacing: -1px; color: #ddd; } 
#footer .footer .content .con { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px } 
 #footer .footer .content .con p { font-size: 13px; color: #ddd; letter-spacing: -0.75px; } 
.copy { width: 100%; text-align: right; padding: 30px 10px 0; } 
.copy p { font-size: 12px; color: #727272; } 





/*메인 반응형 */
@media screen and (max-width:1600px){
 #header .nav .depth1 > li > a { font-size: 16px; width: 120px; } 
 #header .nav .depth2 > li > a { font-size: 14px; } 
 }
 @media screen and (max-width:1440px){
 #section1 .inner { justify-content: center; padding: 0 10px; } 
 #section1 .title { width: 100%; height: 400px; } 
 #section1 .con { width: 50%; background-size: cover; } 
 #section1 .font { display: none; } 
 #section2 .content { align-items: center; } 
 #section3 .board { padding: 0 10px; } 
 #footer .footer .content { padding: 0 10px; } 
 }
@media screen and (max-width:1200px){
 #header .header { display: none; } 
 #header .mobileHeader { display: block; position: fixed; top: 0; left: 0; z-index: 999; width: 100%; } 
 #header .mobileHeader::before { content: ''; width: 100%; height: 80px; background-color: #ffffff; display: block; backdrop-filter: blur(5px); border-bottom: 1px solid #8c8c8c21; } 
 #header .mobileHeader .logo { position: absolute; top: 35px; left: 20px; z-index: 2000; } 
 #header .mobileHeader .logo a { font-size: 16px; font-weight: 900; color: #333; font-family: pretendard; letter-spacing: -1px; } 
 #header .mobileHeader .mBtn { display: block; position: absolute; top: 24px; right: 20px; z-index: 1000; cursor: pointer; } 
 #header .mobileHeader .mBtn span { display: block; width: 30px; height: 2px; background: #333; margin-top: 8px; border-radius: 5px; } 
 #header .mobileHeader .mBtn .bar1 { animation: bar1 .45s forwards; } 
 #header .mobileHeader .mBtn .bar2 { transition: all .25s; opacity: 1; } 
 #header .mobileHeader .mBtn .bar3 { animation: bar2 .45s forwards; } 
 #header .mobileHeader .mBtn.close span { background: #333; } 
 #header .mobileHeader .mBtn.close .bar1 { animation: close-bar1 0.45s forwards; } 
 #header .mobileHeader .mBtn.close .bar2 { opacity: 0; } 
 #header .mobileHeader .mBtn.close .bar3 { animation: close-bar3 .45s forwards; width: 100%; } 
 #header .mobileHeader .lnb { z-index: 999; display: none; background: transparent; height: 100%; position: fixed; width: 100%; top: 0; left: 0; color: #333; } 
 #header .mobileHeader .lnb:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: -1; } 
#header .mobileHeader .lnb .inner { position: relative; max-width: 500px; height: 100%; float: right; text-align: center; background: #fff; overflow: hidden; } 
#header .mobileHeader .lnb .inner .mlnb { position: relative; margin-top: 100px; width: 100%; display: block; text-align: left; } 
 #header .mobileHeader .lnb .inner .mlnb > li { font-size: 20px; letter-spacing: -0.75px; font-weight: 600; position: relative; } 
 #header .mobileHeader .lnb .inner .mlnb > li > a { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 20px; transition: all 0.5s; animation: scale-up-hor-left 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; } 
 #header .mobileHeader .lnb .inner .mlnb > li > a i { width: 20px; height: 20px; background-image: url(../img/add.svg); transition: all 0.3s; } 
 #header .mobileHeader .lnb .inner .mlnb .lnbSub { display: none; margin-top: -5px; padding: 0 45px 20px; } 
 #header .mobileHeader .lnb .inner .mlnb .lnbSub li a { font-size: 16px; display: block; padding: 10px } 
 #section0 .textBox .text h4 { font-size: 1.875rem; } 
 #section0 .textBox .text h3 { font-size: 2.5rem; } 
 #section0 .textBox .text h2 { font-size: 3.125rem; } 
 #section1 .title { padding: 0 10px; } 
 #section1 .con { width: 100%; background-size: cover; } 
 #section1 .con:hover .cntn .text p { width: 300px; } 
 }

 @media screen and (max-width:768px){
 #section0 { height: 700px; } 
 #section0 .textBox { padding: 0 100px; } 
 #section0 .textBox .text h4 { font-size: 1.5rem; } 
 #section0 .textBox .text h3 { font-size: 1.75rem; } 
 #section0 .textBox .text h2 { font-size: 2.25rem; } 
 #section0 .textBox .button .bt { padding: 15px 20px; } 
 #section0 .swiper-button-prev { left: 30px; } 
 #section0 .swiper-button-next { right: 30px; } 
 #section1 .inner { padding: 0; } 
 #section1 .con .logo { width: 100%; padding: 30px; } 
 #section1 .con:hover .logo { padding: 0; } 
 #section2 .content .tit { font-size: 1.875rem; text-align: center; } 
 #section2 .content .txt { font-size: 1.25rem; text-align: center; } 
 #footer .footer .content .con { flex-direction: column; align-items: flex-start; } 
 }

 @media screen and (max-width:500px){
 #header .mobileHeader .logo a { color: #333; } 
 #header .mobileHeader .lnb .inner { width: 100%; } 
 #header .mobileHeader .lnb .inner .mlnb > li { font-size: 18px; } 
 #section0 .textBox { padding: 0 50px; align-items: center; } 
 }

 @media screen and (max-width:375px){
 #section0 .textBox .text h4 { font-size: 1rem; } 
 #section0 .textBox .text h3 { font-size: 1.5rem; } 
 #section0 .textBox .text h2 { font-size: 1.8rem; } 
 #section0 .textBox .button .bt { padding: 15px 20px; } 
 #section0 .swiper-button-prev, #section0 .swiper-button-next { width: calc(var(--swiper-navigation-size) / 10); height: calc(var(--swiper-navigation-size) / 10); } 
 #section0 .swiper-button-prev { left: 5%; } 
 #section0 .swiper-button-next { right: 5%; } 
 #section1 .title { padding: 0 10px; } 
 #section1 .title .text p { font-size: 14px; width: 100%; } 
 #section1 .title .text b { width: 100%; font-size: 16px; } 
 #section1 .con:hover .cntn .text p { width: 100%; } 
 }

@keyframes bar1 { 
 0% { transform : translateY(8px) rotate(45deg); } 
50% { transform : translateY(8px) rotate(0); } 
100% { transform : translateY(0) rotate(0); } 
 }
@keyframes bar2 { 
 0% { transform : translateY(-9px) rotate(-45deg); } 
50% { transform : translateY(-9px) rotate(0); } 
100% { transform : translateY(0) rotate(0); } 
 }
@keyframes close-bar1 { 
 0% { transform:translateY(0) rotate(0); } 
50% { transform:translateY(3px) rotate(0); } 
100% { transform:translateY(13px) rotate(45deg); } 
 }
@keyframes close-bar3 { 
 0% { transform : translateY(0) rotate(0); } 
50% { transform : translateY(-7px) rotate(0); } 
100% { transform : translateY(-7px) rotate(-45deg); } 
 }