@charset "UTF-8";@import url("/fnc_css/font/font.css");.main-wrap { width: 100%; }
.big-swiper { width: 100%; height: 100%; }
.big-slide { max-width: 1920px; width: 100%; margin: 0 auto; }
.big-slide > div { width: 100%; height: 100%; }
.main-title > p { font-size: 22px; line-height: 26px; font-weight: bold; margin-bottom: 20px; color: #0045AB; }
.main-title > h2 { font-size: 40px; line-height: 50px; font-weight: bold; color: #5b5b5b; }
.big-swiper-etc { position: absolute; right: 100px !important; transform: translateY(-50%) !important; top: 50% !important; z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.swiper-scrollbar { position: static !important; height: 200px !important; right: unset !important; top: unset !important; bottom: unset !important; left: unset !important; }
.swiper-scrollbar-drag { background-color: #fff; }
.header.active ~ .main-wrap .swiper-scrollbar-drag { background-color: #656565; }
.swiper-pagination-now { color: #fff; font-size: 14px; font-weight: 500; line-height: 16px; }
.header.active ~ .main-wrap .swiper-pagination-now { color: #000; }
.big-swiper-etc-img { width: 23px; height: 57px; background: url("/fnc_images/main/main_mouse.svg") no-repeat center; }
.header.active ~ .main-wrap .big-swiper-etc-img { background: url("/fnc_images/main/main_mouse_color.svg") no-repeat center; }
/* 1 */
#main01 { background: url("/fnc_images/main/main01_bg.jpg") no-repeat center; background-size: cover; max-width: unset; }
.main01-wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.main01-wrap > div { width: 220px;  margin-bottom: 50px; }
.main01-wrap > h1 { font-size: 50px; font-weight: 500; line-height: 60px; margin-bottom: 50px; color: #fff; }
.main01-wrap > p { font-size: 23px; line-height: 33px; color: #fff; }
/* 2 */

.main02-wrap { padding-top: 100px; display: flex; flex-direction: column; justify-content: end; gap: 30px; position: relative; }
.main02-bg { background: url("/fnc_images/main/logo_big_bg.png") no-repeat center; background-size: contain; position: absolute; width: 250px; height: 150px; right: 200px; top: 300px; }
.main02-wrap .main-title { padding-left: 250px; margin-bottom: 40px; }
.main02-swiper { width: 1420px; margin: 0; position: relative; }
.main02-slide-box { height: 600px; border-radius: 0 220px 0 0; overflow: hidden; }
.main02-slide-box > img { object-fit: cover; width: 100%; height: 100%; }
.main02-swiper-con { position: absolute; top: 35px; right: 0; display: flex; align-items: center; gap: 5px; z-index: 99; }
.main02-swiper-con > div { width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #c8c8c8; background-color: #fff; cursor: pointer; }
.main02-swiper-con > div:hover { background-color: #0045AB; border: none; }
.main02-swiper-con > div:hover > img { filter: brightness(10); }
/* 3 */
.main03-wrap { margin: 0 auto; width: 100%; max-width: 1480px; padding: 100px 30px 0; display: flex; flex-direction: column; justify-content: center; }
.main03-wrap > p { margin: 50px 0; font-size: 23px; line-height: 29px; color: #696969; }
.main03-flex { display: flex; }
.main03-flex > div { width: 400px; height: 400px; border-radius: 50%; overflow: hidden; flex-shrink: 0;  }
.main03-flex > div > img { width: 100%; height: 100%; object-fit: contain; }
.main03-flex > div:nth-child(2) { transform: translateX(-10px); }
.main03-flex > div:nth-child(3) { transform: translateX(-20px); }
/* 4 */

.main04-wrap { display: flex; padding-top: 100px;width: 100%; max-width: 1480px; margin: 0 auto;gap:30px;}
.main04-left { display: flex; flex-direction: column; justify-content: center; align-items: center; width:50%;}
.main04-left-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 500px; }
.main04-left-top { width: 100%; display: flex; justify-content: space-between; }
.main04-left-wrap .main-title { margin-bottom: 70px; width: 100%; }
.main04-left-wrap .main-title > h2 { width: 100%; display: flex; align-items: center; justify-content: space-between; font-size:40px;line-height:50px;}
.main04-notice { width: 100%; }
.main04-notice > a { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid #e1dfdf; }
.main04-notice > a h3 { font-size: 22px; font-weight: 500; line-height: 26px; margin-bottom: 20px; color: #5b5b5b; }
.main04-notice > a:hover h3 { text-decoration: underline; }
.main04-right { display: flex;  width:100%; flex-direction:column;width:50%;}
.main04-right > a {width:100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 30px; font-size:42px;line-height:50px; font-weight: bold; color: #5b5b5b; }
.main04-right > a > img {width:130px;}
.main04-right-top { background-color: #eff1f2; }
.main04-right-bot { background-color: #7fc0f2; }
/* 반응형 */
@media (max-width: 1439px){
 .main02-wrap .main-title { padding-left: 30px; }

 .main04-right > a { font-size: 28px; line-height: 40px; }

 .main02-bg { display: none; }
 .main01-wrap { padding: 0 30px; }
 .main01-wrap > h1 { font-size: 40px; line-height: 50px; }
 .main-title > h2 { font-size: 32px; line-height: 46px; }
  .main02-swiper { width: 100%; }
 }
@media (max-width: 1279px){
 .main03-flex > div { width: 300px; height: 300px; }
 }
@media (max-width: 1023px){
 .main-wrap { height: auto; }
 .main-wrap .big-swiper { overflow: unset; }
 .main-wrap .big-swiper > .swiper-wrapper { display: block; }
 .main-wrap .big-swiper .swiper-slide { height: auto; }
 .big-swiper-etc { display: none; }
 #main01 { height: 100vh; background-position: -200px; }
 .main01-wrap { padding: 0 20px; }
 .main01-wrap > h1 { font-size: 28px; line-height: 40px; }
 .main-title > p { font-size: 20px; line-height: 26px; }
 .main-title > h2 { font-size: 24px; line-height: 30px; }
 .main-title > h2 br {display:none;}
 .main03-wrap > p{ font-size: 20px; line-height: 26px; }
 .main04-left-wrap .main-title > h2{ font-size: 28px; line-height: 40px; }
 .main02-wrap .main-title { padding-left: 20px; }
 .main02-swiper-con { display: none; }

 .main02-slide-box { height: 450px;  border-radius: 0 50px 0 0; }
 .main03-flex { display: none; }

 .main04-wrap { flex-direction: column; gap: 50px; padding-top: 20px; }

 .main04-wrap > div.main04-left { width: 100%; padding: 0 20px; }
 .main04-wrap > div.main04-right { width: 100%; flex-direction: row; }
 .main04-right > a { height: auto; width: 50%; padding: 30px; }
 .main04-left-wrap { width: 100%; }
 .main04-right > a > img{width:80px;}
 .main03-wrap { padding: 60px 20px 0; }
 .main04-left-wrap .main-title { margin-bottom: 10px; }
 .main04-notice > a h3 { font-size: 18px; line-height: 24px; margin-bottom: 10px; }
 }
@media (max-width: 767px){
 .main04-wrap > div.main04-right { flex-direction: column; }
 .main04-right > a { font-size: 28px; line-height: 40px; width: 100%; }
 .main04-right > a > img { width: 70px; }
 }
@media (max-width: 479px){
 #main01 { height: 100vh; background-position: -300px; }
 }
