.main {width:100%;}
.main .sec {width:100%;}
.main .inner {width:1280px; margin:0 auto;}

/* 메인비주얼영역 */
.mainVisual {width:100%; height:650px; overflow:hidden; position:relative;}
.mainVisual .swiper-container,
.mainVisual .swiper-container .swiper-wrapper,
.mainVisual .swiper-container .swiper-slide {width:100%; height:100%;}
.mainVisual .swiper-container .swiper-slide a {width:100%; height:100%; display:block;}
.mainVisual .swiper-container .swiper-slide .textBox {width:1200px; margin:0 auto; padding-top:180px; position:relative; z-index:2;}
.mainVisual .swiper-container .swiper-slide .textBox dt {font-size:36px; font-weight:400; color:#666666; padding-bottom:15px; line-height:1;}
.mainVisual .swiper-container .swiper-slide .textBox dd {font-size:56px; font-weight:700; color:#000000; padding-bottom:50px;; line-height:1;}
.mainVisual .swiper-container .swiper-slide .textBox .btn {display:flex; flex-direction:row; justify-content:center; align-items:center; padding:10px 12px 10px 32px; border-radius:30px; background-color:#fff;}
.mainVisual .swiper-container .swiper-slide .textBox .btn p {font-size:22px; font-weight:400; color:#000000; padding-right:17px; padding-right:20px;}
.mainVisual .swiper-container .swiper-slide .textBox .btn span {width:40px; height:40px; line-height:40px; text-align:center; border-radius:50%; background-color:#254c9d; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.mainVisual .swiper-container .swiper-slide .textBox .btn .on {display:none;}
.mainVisual .swiper-container .swiper-slide .textBox .btn:hover .off {display:none;}
.mainVisual .swiper-container .swiper-slide .textBox .btn:hover .on {display:flex;}
.mainVisual .swiper-container .swiper-slide .textBox .btn:hover span {background-color:#fff;}
.mainVisual .swiper-container .swiper-slide .textBox .btn:hover {background-color:var(--color02);}
.mainVisual .swiper-container .swiper-slide .textBox .btn:hover p {color:#fff;}
.mainVisual .swiper-container .swiper-slide .textBox .text {font-size:42px; font-weight:400; color:#fff; line-height:1.2;}

.mainVisual .swiper-container .swiper-pagination { width:1200px; margin:0 auto;  top:130px; margin-top:0; bottom:auto; left:50%; transform:translateX(-50%); text-align:left; display:none; flex-direction:row; align-items:center;} 
.mainVisual .swiper-pagination-bullet {width:8px; height:8px; font-size:0; position:relative;}
.mainVisual .swiper-pagination-bullet .num {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.mainVisual .swiper-pagination-bullet-active {width:26px; height:26px; line-height:26px; text-align:center; font-size:16px; font-weight:700; color:#fff; letter-spacing:-1px;}
.mainVisual .swiper-button-next, .mainVisual .swiper-button-prev {z-index:9; cursor:pointer;}
.mainVisual .swiper-button-next::after, .mainVisual .swiper-button-prev::after {display:none;}
.mainVisual .swiper-button-next .on, .mainVisual .swiper-button-prev .on {display:none;}
.mainVisual .swiper-button-next:hover .on, .mainVisual .swiper-button-prev:hover .on {display:block;}
.mainVisual .swiper-button-next:hover .off, .mainVisual .swiper-button-prev:hover .off {display:none;}
.mainVisual .controlBox {width:1480px; position:absolute; top:45%; left:50%; transform:translate(-50%,-50%); z-index:9;}
.mainVisual .controlBox img {width:30px; }
.mainVisual .swiper-button-disabled {opacity:0.3 !important; cussor}
.mainVisual .visualControl {width:1200px; position:absolute; top:460px; left:50%; transform:translateX(-50%); z-index:2;}
.mainVisual .visualControl  #toggleAutoplay { width:30px; height:30px; line-height:30px; border-radius:50%; background-color:#444444;}
.mainVisual .visualControl  #toggleAutoplay .play {display:none;}
.mainVisual .visualControl  #toggleAutoplay.active .play {display:block;}
.mainVisual .visualControl  #toggleAutoplay.active .pause {display:none;}
.mainVisual .visualControl .pagination {background-color:#444444; height:30px; line-height:30px; border-radius:15px; padding:0 15px; margin-left:5px;}
.mainVisual .visualControl .pagination p {font-size:18px; font-weight:400; color:#fff; opacity:0.5;}
.mainVisual .visualControl .pagination #currentPage {opacity:1;}

.mainVisual .infoBoxWrap {width:100%; height:120px; position:absolute; left:0; bottom:0; z-index:2; border-top:1px solid rgba(0,0,0,0.1); box-sizing:border-box;}
.mainVisual .infoBoxWrap .infoBox {width:1280px; height:120px; margin:0 auto; display:flex; flex-direction:row; align-items:center;}
.mainVisual .infoBoxWrap .infoBox .call {width:120px; height:100%; line-height:120px; background-color:var(--color02); text-align:center;}
.mainVisual .infoBoxWrap .infoBox ul {width:calc(100% - 120px); height:100%; position:relative; display:flex; flex-direction:row; align-items:center; box-sizing:border-box;}
.mainVisual .infoBoxWrap .infoBox ul li {width:50%; height:100%; position:relative; display:flex; flex-direction:row; justify-content:center; align-items:center;}
.mainVisual .infoBoxWrap .infoBox ul li dl dt {font-size:16px; font-weight:400; color:#666666; line-height:1; padding-bottom:8px;}
.mainVisual .infoBoxWrap .infoBox ul li dl dt a, .mainVisual .infoBoxWrap .infoBox ul li dl dd, .mainVisual .infoBoxWrap .infoBox ul li dl dd a {font-size:24px; font-weight:700; color:#254c9d; line-height:1;}
.mainVisual .infoBoxWrap .infoBox ul li:nth-child(1) dd a:nth-child(1) {margin-right:25px;}
.mainVisual .infoBoxWrap .infoBox ul li:nth-child(2) dl:nth-child(1) {margin-right:110px; position:relative; }
.mainVisual .infoBoxWrap .infoBox ul::after,
.mainVisual .infoBoxWrap .infoBox ul li:nth-child(2) dl:nth-child(1)::after, 
.mainVisual .infoBoxWrap .infoBox ul li:nth-child(1)::after {content:''; width:1px; position:absolute; background-color:rgba(0,0,0,0.1);}
.mainVisual .infoBoxWrap .infoBox ul::after { height:100%; position:absolute; top:0; right:0; }
.mainVisual .infoBoxWrap .infoBox ul li:nth-child(2) dl:nth-child(1)::after {height:50px; top:50%; transform:translateY(-50%);}
.mainVisual .infoBoxWrap .infoBox ul li:nth-child(1)::after {height:50px; top:50%; transform:translateY(-50%);}
.mainVisual .infoBoxWrap .infoBox ul li:nth-child(2) dl:nth-child(1)::after {right:-55px;}
.mainVisual .infoBoxWrap .infoBox ul li:nth-child(1)::after {right:0;}

/* 로그인안내영역 */
.main .loginWrap {padding:45px 0;}
.main .loginWrap .inner {display:flex; flex-direction:row; align-items:center; justify-content:space-between;}
.main .loginWrap dt {font-size:44px; font-weight:700; color:#000000; padding-bottom:10px;}
.main .loginWrap dd {font-size:18px; font-weight:400; color:#666666;}
.main .loginWrap ul {width:730px; display:flex; flex-direction:row; align-items:center; justify-content:space-between;}
.main .loginWrap ul li {width:48%; border-radius:12px; background: linear-gradient(to bottom, #4f8dd6, #2364b1); position:relative;}
.main .loginWrap ul li a {display:block; padding:50px 0 40px 40px; font-size:30px; font-weight:700; color:#fff; line-height:1;}
.main .loginWrap ul li .version { position:relative; z-index:2; display: inline;}
.main .loginWrap ul li .version p { font-size:22px; font-weight:700; color:#fff; border-radius:4px; width:60px; background-color:#083186; height:34px; line-height:34px; text-align:center; margin-bottom:15px;}
.main .loginWrap ul li .version span {display:block; width:22px; height:22px; background-color:#234267; border-radius:4px; position:absolute; top:-9px; left:48px; z-index:-1;}
.main .loginWrap ul li .arrow {position:absolute; top:20px; right:20px; width:45px; height:45px; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center;}
.main .loginWrap ul li .arrow .on {display:none;}
.main .loginWrap ul li:hover .arrow {background-color:#fff;}
.main .loginWrap ul li:hover .arrow .off {display:none;}
.main .loginWrap ul li:hover .arrow .on {display:block;}
.main .loginWrap ul li.on {background: linear-gradient(to bottom, #1a4c89, #0a2e5a); /* 그라데이션 배경 */}
.main .loginWrap ul li.on .version p { width:34px; background-color:#0c1d31;}
.main .loginWrap ul li.on .version span {left:22px; background-color:#f6f6f6; opacity:0.5;}
.main .loginWrap ul li:hover {background-color:#dfdfdf;}
.main .loginWrap ul li.on:hover {background-color:#011f5d;}

/* 소개영역 */
.main .introWrap {padding:150px 0; background:url('../../_images/main/main_intro_bg.png')center center/cover no-repeat;}
.main .introWrap .numList {display:flex; flex-direction:row; align-items:center; justify-content:space-between; width:980px; margin:0 auto 70px auto;}
.main .introWrap .numList li {text-align:center;}
.main .introWrap .numList dt { font-size:18px; font-weight:300; color:#254c9d; line-height:1; padding-bottom:10px;}
.main .introWrap .numList dd { font-size:50px; font-weight:700; color:#000000; line-height:1;}
.main .introWrap .numList li:nth-child(1) dd {width:136px;}
.main .introWrap .numList li:nth-child(2) dd {width:126px;}
.main .introWrap .numList li:nth-child(3) dd {width:160px;}
.main .introWrap .numList li:nth-child(4) dd {width:220px;}
.main .introWrap .text {font-size:24px; font-weight:300; color:#333333; line-height:1.7; text-align:center;}
.main .introWrap .btn { display:flex; flex-direction:row; justify-content:center; align-items:center; max-width:161px; padding:10px 12px 10px 32px; border-radius:30px; background-color:var(--color02); margin:55px auto 100px auto;}
.main .introWrap .btn p {font-size:22px; font-weight:400; color:#fff; padding-right:20px;}
.main .introWrap .btn span {display:flex; flex-direction:column; align-items:center; justify-content:center; width:40px; height:40px;  text-align:center; border-radius:50%; background-color:#fff;}
.main .introWrap .btn:hover {background-color:#fff; box-shadow:3px 3px 10px rgba(0,0,0,0.1);}
.main .introWrap .btn:hover p {color:#333;}
.main .introWrap .btn:hover span{background-color:var(--color02);}
.main .introWrap .btn .on {display:none;}
.main .introWrap .btn:hover .off {display:block;}
.main .introWrap .btn:hover .on {display:block; margin:0 auto;}
.main .introWrap .btn:hover .off {display:none;}
.main .introWrap .list {display:flex; flex-direction:row; align-items:center; justify-content:space-between;}
.main .introWrap .list li {width:180px; height:180px; border-radius:12px; background-color:#fff; border:2px solid transparent; position:relative;}
.main .introWrap .list li:hover {border:2px solid var(--color02); box-shadow:3px 3px 10px rgba(0,0,0,0.1); top:-30px;}
.main .introWrap .list li a {display:block; font-size:20px; font-weight:400; color:#444444; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.main .introWrap .list li:hover a {color:var(--color02);}
.main .introWrap .list li:nth-child(5) {background-color:var(--color02);}
.main .introWrap .list li:nth-child(5):hover {background-color:#333; border:1px solid #333;}
.main .introWrap .list li:nth-child(5) a {color:#fff;}
.main .introWrap .list li .iconBox {height:95px;}
.main .introWrap .list li .iconBox .on {display:none;} 
.main .introWrap .list li:hover .iconBox .on {display:block;} 
.main .introWrap .list li:hover .iconBox .off {display:none;}

/* 게시판 */
.main .mainBoard {padding:140px 0;}
.main .mainBoard .tabBtn {display:flex; flex-direction:row; }
.main .mainBoard .tabBtn li:not(:last-child) {margin-right:60px;}
.main .mainBoard .tabBtn li p {font-size:44px; font-weight:700; color:#999999; cursor:pointer; padding-bottom:10px; line-height:1;}
.main .mainBoard .tabBtn li.active p {color:#000000; border-bottom:2px solid #000;}
.main .mainBoard .tabBox .box > a {display:flex; flex-direction:row; align-items:center; justify-content:end; font-size:22px; font-weight:300;color:#666666; line-height:1; margin-bottom:20px;}
.main .mainBoard .tabBox .box > a .on {display:none; }
.main .mainBoard .tabBox .box > a img {padding-left:10px;}
.main .mainBoard .tabBox .box > a:hover {color:var(--color02);}
.main .mainBoard .tabBox .box > a:hover .on {display:block; }
.main .mainBoard .tabBox .box > a:hover .off {display:none; }
.main .mainBoard .tabBox ul {display:flex; flex-direction:row; align-items:flex-start;}
.main .mainBoard .tabBox ul li {width:23.5%; border-radius:10px; background-color:#f4f4f4;}
.main .mainBoard .tabBox ul li:not(:last-child) {margin-right:2%;}
.main .mainBoard .tabBox ul li:hover {background-color:#edf5fa;}
.main .mainBoard .tabBox ul li a {display:block; width:calc(100% - 60px); padding:30px 30px 25px 30px;}
.main .mainBoard .tabBox ul li dt {width:100%; height:80px; font-size:21px; font-weight:400; color:#000000; line-height:1.3; display: -webkit-box;  -webkit-line-clamp: 2; /* 줄 수를 2줄로 제한 */  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;  white-space: normal;}
.main .mainBoard .tabBox ul li:hover dt {color:#254c9e;}
.main .mainBoard .tabBox ul li dd {width:100%; height:70px; font-size:15px; font-weight:400; color:#666666; line-height:1.6; display: -webkit-box;  -webkit-line-clamp: 3; /* 줄 수를 2줄로 제한 */  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;  white-space: normal;}
.main .mainBoard .tabBox ul li .date {display:flex; flex-direction:row; align-items:center; justify-content:space-between; margin-top:70px; padding-top:20px; border-top:1px solid rgba(0,0,0,0.1);}
.main .mainBoard .tabBox ul li .date p {font-size:14px; font-weight:400; color:#999999;}
.main .mainBoard .tabBox ul li .date .off {display:block;}
.main .mainBoard .tabBox ul li .date .on {display:none;}
.main .mainBoard .tabBox ul li:hover .date .off {display:none;}
.main .mainBoard .tabBox ul li:hover .date .on {display:block;}