.system{padding: 80px 0;}

/* header */
#header {position: relative; z-index: 1;}
#header .header-wrap {display: flex; justify-content: space-between; align-items: center; padding: 70px 0 20px; margin: 0 auto; z-index: 2; max-width: 1415px; height: 120px; box-sizing: border-box; position: relative;}
#header .header-wrap .logo {margin-right: 80px;}
#header .header-wrap .logo img {width: 130px; vertical-align: middle;}
/* 추가 2023-07-31 */
#header .header-wrap .info { display: flex; position: absolute; top: 0; right: 0; z-index: 2; background-color: transparent; padding: 20px 0; justify-content: flex-end;}
#header .header-wrap .info > span { color: #fff; }
#header .header-wrap .info > span > span { color: #127ed8; }
#header .header-wrap .info .info-button {border: 1.8px solid #127ed8; font-size: 14px; border-radius: 10px; color: white; padding: 0px 10px; margin-left: 15px; text-align: center; display: inline-block; font-size: 16px; cursor: pointer; }

#header .menu {display: flex; justify-content: space-between; width: 1200px;}
#header .gnb {display: flex; justify-content: space-between; align-items: center; position: relative; height: 48px;}
#header .gnb > li {color: #fff; font-size: 18px; font-weight: 600; margin-right: 85px; position: relative;}
#header .gnb > li:last-child {margin-right: 0;}
#header .gnb > li:hover > a::after {content: ''; display: block; position: absolute; width: 100%; height: 3px; background-color: #127ed8; bottom: -27px}
#header .lnb {display: none; z-index: 3; position: absolute; top: 20px; min-width: 165px; height: 278px; padding-top: 54px;}
#header .lnb li {margin-bottom: 27px; font-size: 15px; color: #444; font-weight: 400; width: 100%;}
#header .lnb li a:hover {color: #127ed8;}
#header .lnb-layer {display: none; z-index: -2; position: absolute; width: 100%; background-color: #fff; height: 245px; top: 120px; left: 0; border-top: 1px solid #f8f8f8;}
#header .btn-wrap {display: flex; margin-left: 100px;}
#header .btn-wrap .btn {width: 135px; height: 48px; color: #fff; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center;}
#header .btn-wrap .btn:nth-child(1) {margin-right: 10px;}
#header .btn-wrap .btn img {width: 26px; height: 26px;}
/* 추가 2023-08-02 */
#header .btn-wrap #ico_img_1 img {content: url('/front/images/ico_join.png');}
#header .btn-wrap #ico_img_2 img {content: url('/front/images/ico_login.png');}

#header.active {background-color: #fff;}
#header.active .gnb li {color: #333;}
#header.active .header-wrap .info > span {color: #333;}
#header.active .header-wrap .info > button {color: #333;}
#header.active .lnb {display: block;}
#header.active .lnb-layer {display: block; z-index: 0;}
/* #header.active .btn-wrap .btn {background-color: #127ed8; border-radius: 10px;} */
/* 추가 2023-08-02 */
#header.active .btn-wrap .btn {background-color: #fff; color: #127ed8; border-radius: 10px;}
#header.active .btn-wrap #ico_img_1 img {content: url('/front/images/ico_join_blue.png');}
#header.active .btn-wrap #ico_img_2 img {content: url('/front/images/ico_login_blue.png');}

/* 추가 2023-07-31 */
#header.atv .gnb li {color: #333;}
#header.atv .header-wrap .info > span {color: #333;}
#header.atv .header-wrap .info > button {color: #333;}
/* #header.atv .btn-wrap .btn {background-color: #127ed8; border-radius: 10px;} */
#header.atv .btn-wrap .btn {background-color: #fff; color: #127ed8; border-radius: 10px;}
#header.atv #h_logo img {content: url('/front/images/logo_black.png');}
#header.atv .btn-wrap #ico_img_1 img {content: url('/front/images/ico_join_blue.png');}
#header.atv .btn-wrap #ico_img_2 img {content: url('/front/images/ico_login_blue.png');}

/* main */
.gold {color: #127ed8!important;}
.yellow {color: #127ed8!important;}
.con {margin: 0 auto; max-width: 1206px; width: 1206px;}
.section-title {text-align: center; font-size: 30px; font-weight: 400; margin-bottom: 34px;}
.sub-title {font-size: 16px; color: #7b7b7b; text-align: center;}

.section1 {position: relative; height: 823px; margin-top: -120px; box-sizing: border-box; z-index: 0;}
.section1 .main-swiper {width: 100vw; height: 823px; position: absolute; top: 0; left: 0;}
.section1 .main-swiper .swiper-slide {background-repeat: no-repeat; background-size: cover; background-position: center; position: relative;}
.section1 .main-swiper .swiper-slide .text-wrap {text-align: left; color: #fff; transform: translateY(35%); height: 100%;}
.section1 .main-swiper .swiper-slide .text-wrap .main-text {font-size: 50px; font-weight: 700; margin-bottom: 20px; color: #fff;}
.section1 .main-swiper .swiper-slide .text-wrap .sub-text {font-size: 20px; color: #fff; margin-bottom: 42px;}
.section1 .main-swiper .swiper-slide .btn {width:218px; height: 58px; text-align: center; border: 4px solid #127ed8; border-radius: 31px; font-size: 20px; color: #fff; line-height: 50px;}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after, .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {display: none;}
.section1 .main-swiper-button-prev img, .section1 .main-swiper-button-next img {height: 17px;}
.section1 .main-swiper-button-prev {left: calc(50% - 122px); top: auto; bottom: 11px; transform: translateX(-50%);}
.section1 .main-swiper-button-next {right: calc(50% - 122px); top: auto; bottom: 11px; transform: translateX(-50%);}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 20px;}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 25px 0 0;}
.swiper-pagination-bullet {background-color: transparent; border: 2px solid #fff; width: 15px; height: 15px;}
.swiper-pagination-bullet-active {background-color: #127ed8; border: 1px solid #127ed8;}

.section2 {padding: 100px 0; height: 100%;}
.section2 .circle {position: relative; height: 100%;}
.section2 .circle img {position: absolute; z-index: -1}
.section2 .circle .circle_01 {top: -100px; right: -190px; height: 283px;}
.section2 .circle .circle_02 {top: 350px; left: -190px;  height: 332px;}
.section2 ul {display: flex; justify-content: space-between; margin-top: 85px; flex-wrap: wrap;}
.section2 ul li {border-radius: 8px; width: calc(25% - 50px); height: 360px; text-align: center; padding: 45px 0 36px 0; box-sizing: border-box;}
.section2 ul li:nth-child(odd) {background-color: #faf5e3;}
.section2 ul li:nth-child(even) {background-color: #eaeaea; margin-top: 50px;}
.section2 ul li div {width: 136px; height: 136px; border-radius: 100%; background-color: #fff; position: relative; margin: 0 auto;}
.section2 ul li div img {width: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.section2 ul li:nth-child(1) div img {height: 81px;}
.section2 ul li:nth-child(2) div img {height: 100px;}
.section2 ul li:nth-child(3) div img {height: 100px; top: 55%;}
.section2 ul li:nth-child(4) div img {height: 110px; top: 60%;}
.section2 ul li .num {color: #816d30; font-size: 20px; margin-bottom: 10px;}
.section2 ul li .item-title {margin-bottom: 14px; font-size: 22px; font-weight: 600;}
.section2 ul li .item-desc {font-size: 13px; color: #393939; width: 80%; margin: 0 auto 20px; word-break: keep-all;}

.section3 {height: 953px;; box-sizing: border-box;}
.section3 .sec-wrap {height: 100%; display: flex;}
.section3 .left {width: 700px; background-image: url('/front/images/main/main_05.png'); background-color: #2c2c2c; position: relative;}
.section3 .left .text-wrap {width: 100%; position: absolute; top: 38%; left: 80%; transform: translate(-50%, -50%);}
.section3 .left p {color: #fff; font-size: 17px; line-height: 150%;}
.section3 .left p.title {font-size: 50px; margin-bottom: 30px; font-weight: 300;}
.section3 .right {width: calc(100% - 700px); background-color: #127ed86e; position: relative; display: flex; align-items: center;}
.section3 .right .text-wrap {margin-left: 70px; margin-right: 60px; white-space: nowrap;} 
.section3 .right .text-wrap > div {margin-bottom: 65px;}
.section3 .right .text-wrap > div:last-child {margin-bottom: 0px;}
.section3 .right p {color: #373330; font-size: 17px; line-height: 150%;}
.section3 .right h2 {color: #191919; font-size: 30px; margin-bottom: 15px;}
.section3 .right .img-wrap {height: 85%;}
.section3 .right .img-wrap img {height: 100%;}

/* footer */
.cs-section {background-color: #f6f6f6; padding: 75px 0 90px;}
.cs-section .cs-list {display: flex; justify-content: space-between;}
.cs-section .cs-list > li {width: 33.33%; margin-right: 30px; background-color: #fff; border: 1.5px solid #ddd; border-radius: 15px; padding: 35px 40px; box-sizing: border-box; box-shadow: 5px 5px 5px rgba(0,0,0,0.05);}
.cs-section .cs-list > li:last-child {margin-right: 0;}
.cs-section .cs-list li h2 {font-size: 26px; margin-bottom: 5px;}
.cs-section .cs-list li h1 {font-size: 24px; margin-bottom: 5px;}
.cs-section .cs-list li h3 {font-size: 20px; margin-bottom: 7px; margin-top: 10px;}
.cs-section .cs-list li p {font-size: 16px; color: #373330;}
.cs-section .cs-list ul {margin-top: 14px;}
.cs-section .cs-list ul li {font-size: 16px; color: #373330;}

/* footer 공지사항 추가 */
#notice_ul { list-style: none; padding: 0; margin: 0; }
#notice_ul li { display: flex; justify-content: space-between; align-items: center; }
.left-content { text-align: left; }
.right-content { text-align: right; }

#footer {background-color: #2c2c2c; padding: 20px 0 40px 0;}
#footer .logo {margin-bottom: 18px;}
#footer .logo img {width: 126px;}
#footer .footer-info p {margin: 0;}
#footer .footer-info p span {margin-right: 10px; font-size: 16px; color: #fff;}
#footer .copyright {font-size: 13px; margin-top: 15px;}

.title_main{text-align: center; margin-bottom: 50px}
.title_main h2{font-size: 25px; color: #222; font-weight: 400}