@charset "utf-8";

main {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;}

/****************************************************************************************************************************************
메인 hero 시작
*****************************************************************************************************************************************/
.hero {position: relative; margin:0 auto; padding:0; width: 100%;}

/****************************************************************************************************************************************
main-board 시작
*****************************************************************************************************************************************/
.main-board {position: relative; margin:20px auto; padding:0; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px;}
.main-boBox {position: relative; margin:0; padding:0; width: calc(100% / 3 - 10px); border: 6px solid #ede8e2;}

.main-boHd {position: relative; margin: 0; padding: 3px 15px 9px 15px; width: 100%; display: flex; justify-content: space-between; align-items: center; background: #ede8e2;}
.main-boHd > h3 {display: flex; justify-content:flex-start; align-items: center; font-size:18px; font-weight:500; color:#000;}
.main-boHd > h3 > img {margin-right:5px; width: 20px;}
.main-boHd .mainBo-more {display: flex; justify-content:flex-start; align-items: center; font-size:13px; color:#000; cursor: pointer;}
.main-boHd .mainBo-more > svg {margin-left:5px; font-size:13px; color:#000;}

ul.main-boList {position: relative; margin:0 auto; padding: 5px 10px; width: 100%; background:#fbfaf8;}
ul.main-boList > li {position: relative; margin:0 auto; padding:0; width: 100%; line-height:35px; text-align: left; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer;}

dl.main-notice {position: relative; margin:0 auto; padding:5px 10px; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; background:#fbfaf8;}
dl.main-notice > dt, 
dl.main-notice > dd {position: relative; margin:0; padding:0; width: calc(100% / 2); line-height:35px; cursor: pointer;}
dl.main-notice > dt {text-align: left; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
dl.main-notice > dd {display: flex; justify-content: flex-end; align-items: center; gap:5px;}
dl.main-notice > dd > img {width: 20px;}

@media (hover: hover) and (pointer: fine) {
    .main-boHd .mainBo-more:hover,
    .main-boHd .mainBo-more:hover > svg,
    ul.main-boList > li:hover,
    dl.main-notice > dt:hover {color:#7f5f52;}
}

/****************************************************************************************************************************************
main-board 시작
*****************************************************************************************************************************************/
.main-game {position: relative; margin:20px auto; width: 100%;}
ul.mainGame-list {position: relative; margin:0; padding:0; width: 100%; display: flex; justify-content: space-between; align-items: center; gap:10px;}
ul.mainGame-list > li {position: relative; margin:0 auto; padding:0; width: calc(100% / 6 - 10px); cursor: pointer;}
ul.mainGame-list > li > img {width: 100%; transition: 0.3s}

@media (hover: hover) and (pointer: fine) {
    ul.mainGame-list > li:hover > img {transform: scale(1.03);}
}

/****************************************************************************************************************************************
main-ft 시작
*****************************************************************************************************************************************/
.main-ft {position: relative;}
.mainFt-list {position: relative; margin:20px 0; padding:0; width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.mainFt-list > img {margin: 10px 20px; width: calc(12.5% - 40px); filter: invert(1) sepia(0.5);}

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:992px) {
    .hero {order: 1;}
    .main-game {order: 2; padding: 0 10px;}
    .main-board {order: 3; margin:0 auto 20px auto; padding: 0 10px;}
    .main-ft {order: 4;}

    ul.mainGame-list {flex-wrap: wrap;}
    ul.mainGame-list > li {width: calc(100% / 3 - 10px);}
}/* 미디어쿼리문 끝 */

@media (max-width:767px) {
    .main-board {flex-direction: column; justify-content: flex-start; align-items: center;}
    .main-boBox {width: 100%;}

    ul.mainGame-list {gap:5px;}
    ul.mainGame-list > li {width: calc(100% / 2 - 5px);}

    .main-ft {display: none;}
}/* 미디어쿼리문 끝 */