@charset "utf-8";

/****************************************************************************************************************************************
hero section
*****************************************************************************************************************************************/
.hero {position: relative; margin: 0 auto; padding: 0; width: 1528px; overflow: hidden;}

/* swiper */
.swiper-container {position: relative; width: 100%; }

/****************************************************************************************************************************************
section 공통
*****************************************************************************************************************************************/
.basic-sec {position: relative; margin:20px auto; padding:0; width: 100%;}
.main-inner {position: relative; margin:0 auto; padding:0 15px; width: 1300px; text-align: center;}
.mainBo-inner {display: flex; flex-wrap: wrap; justify-content:space-between;}

/****************************************************************************************************************************************
메인메뉴
*****************************************************************************************************************************************/
ul.main-menu {position: relative; margin:0; padding:0; width: 100%; display: flex; gap:15px; justify-content: center; align-items:center;}
ul.main-menu > li {position: relative; width: calc(100% / 2); transition: all .5s; cursor: pointer;}
ul.main-menu > li::before {content: ' '; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
ul.main-menu > li > img {min-width: 100%;}
ul.main-menu > li > p {position: absolute; left:0; right:0; bottom: 25px; z-index: 1; margin:0 auto; padding:0; width: 100%; text-align: center; font-size: 28px; transition: all .5s;}

@media (hover: hover) and (pointer: fine) {
    ul.main-menu > li:hover::before{background: rgb(0,0,0,0.6); backdrop-filter: blur(5px);}
    ul.main-menu > li:hover > p {bottom:110px;}
}

/****************************************************************************************************************************************
메인 Board 시작
*****************************************************************************************************************************************/
.board-group {position: relative; margin:0; width: calc(100% / 2 - 10px); background: #090909; border: 4px #dcb325 solid;}
.finance-group {margin-bottom:20px; width: 100%;}

.board-hd {position: relative; margin: 0; padding: 0 15px; width: 100%; height: 50px; display: flex; justify-content:space-between; align-items: center; border-bottom: 1px #a68f52 solid;}
.board-hd > h3 {position: relative; margin-right: 15px; padding-right: 15px; font-weight: 500; display: flex; align-items: center;} 
.board-hd > h3 > i {margin:3px 5px 0 0; font-size: 24px; color:#639db2;}
.board-hd > .hd-icon {position: relative; width: 80px; height: 30px; line-height: 30px;font-weight: 500; font-size: 12px; letter-spacing: 1px; color: #000; background: #fff; border-radius: 45px; cursor: pointer; transition: all 0.3s ease 0s;}

@media (hover: hover) and (pointer: fine) {
    .board-hd > .hd-icon:hover {color:#fff; background: #f3bc2a;}
}

/* 메인 공지사항 및 메인 이벤트 */
ul.mainBo-list {position: relative; margin:10px auto; padding:0; width: 100%;}
ul.mainBo-list > li {position: relative; margin:5px auto; padding:0; width: 95%; display: flex; justify-content: space-between; align-items: center; border: 1px #f3bc2a solid; overflow: hidden; cursor: pointer;}
ul.mainBo-list > li::before {content: ""; position: absolute; top: 0; left: -100%; z-index: 8; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%); 
    transform: skewX(-25deg); animation:circle 1s .5s infinite;
}
@keyframes circle {
    0% {left: -100%;}
    100% {left: 150%;}
}

ul.mainBo-list > li > span {display:inline-block; padding:0 10px 0 30px; line-height:35px; text-align: left; width: calc(100% - 90px); font-size: 16px; font-weight: 500; color:#f3bc2a;}
ul.mainBo-list > li > span::before {content: "\f0d7"; position: absolute; left:5px; font-family: 'remixicon';}
ul.mainBo-list > li > button {width: 90px; line-height:35px; font-size: 15px; font-weight: 700; color: #000; background: #f3bc2a; border: none; animation: blink .5s .1s infinite;}
@keyframes blink {
    0% {color: #000;}
    100% {color: #e62d2d;}
}

@media (hover: hover) and (pointer: fine) {
    ul.mainBo-list > li:hover {background: #469ac3;}
}

/* 메인 실시간 입출금 */

.realtime-con {position: relative; margin:0 auto; padding: 6px 30px; width: 100%; height:210px; overflow: hidden;}
.newsticker {position: relative; animation: realtimeAnim 0.5s ease 1 forwards; overflow: hidden;}
@keyframes realtimeAnim {
    0% {opacity: 0; transform: scale(0.5);}
    100% {opacity: 1;transform: scale(1.0);}
}

.newsticker > ul {position: relative; margin:0 auto; padding:0; width: 100%; height:100%; overflow: hidden;}
.newsticker > ul > li {padding:0 5px; margin: 0; width:100%; height: 40px; text-align: center; display: flex; align-items:center; justify-content:space-around; cursor: pointer; transition: 0.3s;}
.newsticker > ul > li > span {width:calc(100% / 4); font-size: 16px; font-weight: 500;}
.amount {text-align: right;}


@media (hover: hover) and (pointer: fine) {
    .newsticker > ul > li:hover {background:#469ac3;} 
}


/****************************************************************************************************************************************
미디어쿼리문
*****************************************************************************************************************************************/
@media (max-width: 1558px) {
    .hero {width: 100%;}
}


@media (max-width: 1380px) {
    .main-inner {width: 100%;}
}/* 미디어쿼리문 끝 */

@media (max-width: 767px) { 
    .main-inner {padding:0 10px;}

    ul.main-menu {flex-direction: column;}
    ul.main-menu > li {width: 100%;}
    ul.main-menu > li > p {font-size: 20px;}
    ul.main-menu > li:hover > p {bottom: 80px;}

    .board-group {margin-bottom:20px; width: 100%;}
    .notice-group {order: 1;}
    .event-group {display:none;}
    .finance-group {order: 2;}

    .realtime-con {padding:6px 5px;}
    .newsticker > ul > li > span {font-size: 11px;}
    ul.mainBo-list > li > span {padding:0 10px 0 20px; font-size: 13px;}
    ul.mainBo-list > li > button {width: 70px; font-size: 13px;}
}/* 미디어쿼리문 끝 */