#wrap .inner {padding: 0px 15px 30px; margin: 0 auto;}
.mo { display: none;}

.banner_wrap { padding: 30px 0 0 45px; display: flex; gap: 40px; margin: 0 auto; max-width: 1024px;}
.banner_wrap .left { margin-top: 5px;}
.banner_wrap .right p,
.banner_wrap .right span { font-family: 'Paperlogy'; line-height: 1;}
.banner_wrap .right p:nth-child(1) { color: #6e6e6e; font-size: 15px; font-weight: 600; margin-bottom: 2px;}
.banner_wrap .right p:nth-child(2) { font-size: 40px; font-weight: 600; line-height: 0.9;}
.banner_wrap .right p:nth-child(2) br { display: none;}
.banner_wrap .right p:nth-child(2) span { font-size: inherit; color: #DC2143;}
.banner_wrap .right p:nth-child(3) { font-size: 15px; color: #6e6e6e; margin-top: 2px;}


.ranking_wrap { background: #fff; padding: 15px; border-radius: 15px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
.ranking_wrap .fl { display: flex; align-items: center; justify-content: space-between; margin: 10px 0;}
.ranking_wrap .fl a { font-size: 14px; padding: 7px 10px; background: #415067; border-radius: 15px; font-weight: 600; color: #fff;}
.ranking_wrap .title { display: flex; justify-content: space-between; align-items: center;}
.ranking_wrap .title h2 { font-size: 18px; font-weight: 600;}
.ranking_wrap .tab_btn { display: flex; gap: 5px;}
.ranking_wrap .tab_btn button { font-size: 14px; padding: 7px 10px; background: #F0F0F0; border-radius: 15px;}
.ranking_wrap .tab_btn button.on { background: #FF9D00; color: #fff; font-weight: 600;}
.ranking_wrap .tab_list { margin-top: 15px;}
.ranking_wrap .tab_list ul { display: none; gap: 10px; overflow-x: scroll; padding-bottom: 10px;}
.ranking_wrap .tab_list ul.on {  display: flex; }
.ranking_wrap .tab_list li a { width: 120px; height: 120px; display: flex; background: linear-gradient(45deg, #ff0000, #ffbc00); border-radius: 50%; align-items: center; justify-content: center;}
.ranking_wrap .tab_list li a .whc { display: flex ; align-items: center; justify-content: center; width: 115px; height: 115px; border-radius: 50%; padding: 5px 15px; margin: 5px 0; overflow: hidden;position: relative; background: #fff; border: 3px solid #fff;}
.ranking_wrap .tab_list li a img { width: 150px;}
.ranking_wrap .tab_list li a .text { position: absolute; z-index: 5; width: 100%; height: 100%; background: #00000061; display: flex; align-items: center; justify-content: center; flex-direction: column;top: 0; left: 0;}
.ranking_wrap .tab_list li a .text span { color: #fff; line-height: 1.2; font-size: 12px;}
.ranking_wrap .tab_list li a .text span.nickname { font-size: 14px; font-weight: 600; }
/* .ranking_wrap .tab_list li a .left { display: flex; gap: 30px; }
.ranking_wrap .tab_list li a .left span {font-weight: 600;}
.ranking_wrap .tab_list li a .left span:nth-child(1) { width: 10px; text-align: center; color: #FF9D00;}
.ranking_wrap .tab_list li a:hover .left span:nth-child(2) { text-decoration: underline;}
.ranking_wrap .tab_list li a .count { font-size: 12px;} */

.cate_wrap { display: flex; gap: 15px; margin: 15px 0;}
.cate_wrap a { width: 100%; background: #fff; border: 1px solid #ddd; border-radius: 15px; padding: 15px;box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
/* .cate_wrap a { width: calc((100% - 15px) / 2); background: #fff; border: 1px solid #ddd; border-radius: 15px; padding: 15px;box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;} */
.cate_wrap a .img_wrap { display: flex; justify-content: space-between; margin-bottom: 10px; gap: 5px;}
.cate_wrap a .img_wrap div { display: flex; gap: 5px;}
.cate_wrap a .img_wrap img { width: 15px;}
/* .cate_wrap a.sv_link .img_wrap img { width: calc((100% - 30px) / 7); max-width: 17px;} */
.cate_wrap a p { font-size: 18px; font-weight: 600; margin-bottom: 15px;}
.cate_wrap a button { display: block; margin: 0 0 0 auto; background: #f1f1f1; padding: 4px 10px; border-radius: 15px; font-size: 14px; border: 1px solid #ddd}

.noti_container { display: flex; gap: 15px; }
.notice_wrap { padding: 20px 15px; width: calc((100% - 15px) / 2); border-radius: 15px; background: #fff;box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
.notice_wrap > .title { display: flex; justify-content: space-between; align-items: center;}
.notice_wrap > .title h2 { font-size: 18px; font-weight: 600;}
.notice_wrap ul { margin-top: 10px;}
.notice_wrap ul li a { display: flex; justify-content: space-between; align-items: center; padding: 5px; margin: 5px 0; border-bottom: 1px solid #D7D7D7;}
.notice_wrap ul li a .left { width: 80%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.notice_wrap ul li a .date { font-size: 12px; width: 20%; text-align: right; color: #888;}

.report_wrap * {font-family: 'Paperlogy';}
.report_wrap a { background: url(../img/btn_img.png) no-repeat 90% 60% / 50% #464646; padding: 27px 15px; display: flex; justify-content: space-between; align-items: end; border-radius: 15px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
.report_wrap a .left { display: flex; flex-direction: column; gap: 20px;}
.report_wrap a .left p:nth-child(1) { line-height: 1.2; color: #fff; font-size: 20px; font-weight: 700; position: relative;}
.report_wrap a .left p:nth-child(1):after { content: ''; position: absolute; top: -2px; right: 0; width: 25px; height: 25px; background: url(../img/btn_img2.png) no-repeat center / 100%;}
.report_wrap a .left p:nth-child(2) { color: #CDCDCD; font-size: 14px;}
.report_wrap a .right { background: #fff; padding: 4px 10px; border-radius: 15px; font-size: 14px;}
.report_wrap a .right span { color: #5D4037; font-weight: 700;}

.contact_wrap { background: #FEE500; gap: 10px; padding: 15px; display: flex; justify-content: space-between; align-items: center; border-radius: 15px; gap: 10px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
.contact_wrap * {font-family: 'Paperlogy';}
.contact_wrap .left { width: 40%; display: flex; flex-direction: column; gap: 20px;}
.contact_wrap .left p:nth-child(1) { line-height: 1.2; color: #181600; font-size: 20px; font-weight: 700; position: relative;}
.contact_wrap .left p:nth-child(2) { color: #867A00; font-size: 14px;}
.contact_wrap .right { display: flex; width: 55%; flex-direction: column;}
.contact_wrap .right > div { display: flex; justify-content: space-between; gap: 15px; text-align: center;}
.contact_wrap .right .top p { width: 50%; font-size: 12px; font-weight: 700;}
.contact_wrap .right .bt { align-items: baseline;}
.contact_wrap .right .bt .box { width: 50%; }
.contact_wrap .right .bt .qr_wrap img { border-radius: 10px;}
.contact_wrap .right img { width: 100%; filter: drop-shadow(0px 0px 4px #888); max-width: 80px;}

.fl_wrap { display: flex; gap: 15px; margin: 15px 0 ;}
.fl_wrap .report_wrap { width: 50%;}
.fl_wrap .contact_container { width: 50%; padding: 0;}

@media screen and (max-width: 767px) {
    .pc { display: none !important;}
    .mo { display: block;}

    .banner_wrap { gap: 30px; padding: 30px 0 0 35px;}
    .banner_wrap .left { margin-top: 10px;}
    .banner_wrap .right p:nth-child(1) { margin-bottom: 2px; font-size: 12px; }
    .banner_wrap .right p:nth-child(2) { font-size: 30px; }
    .banner_wrap .right p:nth-child(2) br { display: block;}
    .banner_wrap .right p:nth-child(3) { font-size: 12px; }
    

    .fl_wrap { padding: 0;}
    .fl_wrap .report_wrap { width: 100%;}
    .report_wrap a { padding: 15px;}
    .contact_container { margin-top: 15px;}
    .contact_container .contact_wrap { width: 100%;}

    .noti_container { flex-wrap: wrap;}
    .notice_wrap { width: 100%;}
}