@charset "utf-8";

/*
3.2vw: 24px
4vw : 30px
6.7vw : 50.25px
8vw : 60px
13.3vw : 99.75px
*/
.main { background: #090e2c; }
.main #header { padding-top: 4.8vw; background: #fff; }
.main #header .logo { text-align: center; }
.main #header .logo img { height: 13.3vw; }
.main #header .left-btn { position: absolute; top: 8vw; left: 5.4vw; width: 24vw; }
.main #header .left-btn a { display: flex; width: 24vw; height: 8vw; background: #f1424c; border-radius: 8vw; color: #fff; font-size: 1.333rem; font-weight: bold; align-items: center; justify-content: center; }
.main #header .right-icon { position: absolute; top: 8vw; right: 4vw; width: 19vw; }
.main #header .right-icon a { margin-right: 2.4vw; }
.main #header .right-icon a:last-child { margin-right: 0; }
.main #header .right-icon a img { width: 8vw; }
.main #header .right-icon a.badge { position: relative; display: inline-block; }
.main #header .right-icon a.badge span { position: absolute; top: 0px; right:0px; width: 4vw; height: 4vw; background: #f1424c; border-radius: 100%; display: none; justify-content: center; align-items: center; color: #fff; font-weight: bold; font-size: 1rem; }

.main #contents { padding: 5vw 5.4vw 13vw 5.4vw; background: #fff; border-radius: 0 0 8vw 8vw; margin-top: -1px; }
.main #contents .my-wrap { display: flex; justify-content: center; align-content: center; }
.main #contents .my-wrap .btn { display: block; padding: 2.2vw 0; border-radius: 2.6vw; background-image: linear-gradient(to bottom, #fafafa, #ebebeb); font-size: 1.333rem; font-weight: bold; text-align: center; margin-top: 1.3vw; }
.main #contents .my-wrap .left { width: 24vw; margin-right: 2.6vw; }
.main #contents .my-wrap .left .my-info { position: relative; background: #080d2c; color: #fff; border-radius: 3vw; padding: 0; height: 150px;}
.main #contents .my-wrap .left .my-info .badge { position: absolute; right: 1vw; top: 1vw; }
.main #contents .my-wrap .left .my-info .badge img { width: 9.4vw; }
.main #contents .my-wrap .left .my-info .photo { text-align: center; padding-top: 3.3vw; }
.main #contents .my-wrap .left .my-info .photo img { width: 13.4vw; height: 13.4vw; border-radius: 100%; }
.main #contents .my-wrap .left .my-info .level { font-size: 0.833rem; font-weight: bold; text-align: center; letter-spacing: -1.1px; }
.main #contents .my-wrap .left .my-info .name { font-weight: bold; text-align: center; font-size: 1.250rem; }
.main #contents .my-wrap .right { width: 62vw; }
.main #contents .my-wrap .right .my-awards { background: #080d2c; color: #fff; border-radius: 3vw; text-align: center; padding: 0; height: 150px;}
.main #contents .my-wrap .right .my-awards a { color: #fff; font-weight: bold; display: flex; align-items: center; justify-content: center; margin-bottom: 1vw; font-size: 2rem; }
.main #contents .my-wrap .right .my-awards a img { width: 4.8vw; margin-left: 1.3vw; }
.main #contents .my-wrap .right .my-awards > div { display: flex; justify-content: space-around; align-content: center; }
.main #contents .my-wrap .right .my-awards > div .cnt { width: 13.3vw; height: 10.3vw; text-align: center; color: #181818; font-size: 1.417rem; font-weight: bold; display: flex; justify-content: center; align-items: center; padding-top: 3vw; }
.main #contents .my-wrap .right .my-awards > div .rank0 .cnt { background: url('/static/img/img-red-jacket@2x.png') no-repeat; background-size: cover; padding-top: 1vw; height: 12.3vw; line-height: 6vw; }
.main #contents .my-wrap .right .my-awards > div .rank0 .cnt span { display: block; width: 6vw; height: 6vw; margin: 0 auto; border-radius: 100%; background: rgba(255, 255, 255, 0.5); }
.main #contents .my-wrap .right .my-awards > div .rank1 .cnt { background: url('/static/img/img-gold-medal@2x.png') no-repeat; background-size: cover; }
.main #contents .my-wrap .right .my-awards > div .rank2 .cnt { background: url('/static/img/group-52-copy@2x.png') no-repeat; background-size: cover; }
.main #contents .my-wrap .right .my-awards > div .rank3 .cnt { background: url('/static/img/group-52-copy-2@2x.png') no-repeat; background-size: cover; }

.main #contents h2 { position: relative; font-size: 1.5rem; margin-bottom: 1.6vw; display: flex; align-items: center; }
.main #contents h2 span { font-size: 1rem; color: #7b7b7b; font-weight: normal; margin-left: 1vw; }
.main #contents h2 a { position: absolute; right: 0; bottom: 1.3vw; display: flex; align-items: flex-end; font-size: 1.250rem; line-height: 1.250rem; }
.main #contents h2 a img { width: 4.5vw; }

.main #contents .record-shooting { margin-top: 4.5vw; }
.main #contents .record-shooting .box-wrap { width: 100%; background: #f1424c; border-radius: 2.6vw; padding: 2.6vw; box-sizing: border-box; }
.main #contents .record-shooting .box-wrap .txt { font-weight: bold; color: #fff; display: flex; justify-content: center; align-content: center; align-items: center; font-size: 1.333rem; }
.main #contents .record-shooting .box-wrap .txt img { width: 8.5vw; }

/*.main #contents .record-shooting .box-wrap .record { display: flex; justify-content: space-between; align-content: center; margin-top: 6.5vw; }*/
/*.main #contents .record-shooting .box-wrap .record > div { width: 20vw; text-align: center; background: rgba(0, 0, 0, 0.15); border-radius: 2.6vw; display: flex; flex-direction: column; justify-content: space-evenly; }*/
/*.main #contents .record-shooting .box-wrap .record > div p { color: #fff; font-size: 1.250rem; }*/
.main #contents .record-shooting .box-wrap .record { display: flex; justify-content: space-between; align-content: center; }
.main #contents .record-shooting .box-wrap .record > div { width: 26vw; text-align: center; background: rgba(0, 0, 0, 0.15); border-radius: 2.6vw; display: flex; flex-direction: column; justify-content: space-evenly; padding-top: 4vw; padding-bottom: 4vw; margin-right: 2vw;}
.main #contents .record-shooting .box-wrap .record > div:last-child { margin-right: 0; }
.main #contents .record-shooting .box-wrap .record > div p { color: #fff; font-size: 1.250rem; }

.main #contents .record-shooting .box-wrap .record > div p.score { font-size: 2rem; font-weight: 900; }
.main #contents .record-shooting .box-wrap .record > div.standard { position: relative; width: 15vw; background: rgba(255, 255, 255, 0.33); padding: 1vw 0; }
.main #contents .record-shooting .box-wrap .record > div.standard p { position: absolute; top: -5.5vw; width: 100%; font-size: 1rem; }

.main #contents .season-rank { margin-top: 4.5vw; }
.main #contents .season-rank .box-wrap { width: 100%; background: #1761d0; border-radius: 2.6vw; padding: 2.6vw; box-sizing: border-box; }
.main #contents .season-rank .box-wrap .txt { font-weight: bold; color: #fff; display: flex; justify-content: center; align-content: center; align-items: center; font-size: 1.333rem; }
.main #contents .season-rank .box-wrap .txt img { width: 8.5vw; }
.main #contents .season-rank .box-wrap .record { display: flex; justify-content: space-between; align-content: center; margin-top: 6.5vw; }
.main #contents .season-rank .box-wrap .record > div { width: 20vw; text-align: center; background: rgba(0, 0, 0, 0.15); border-radius: 2.6vw; display: flex; flex-direction: column; justify-content: space-evenly; }
.main #contents .season-rank .box-wrap .record > div:first-child { line-height: 3.6vw; position: relative; }
.main #contents .season-rank .box-wrap .record > div a.btn-help { position: absolute; top: 1.3vw; right: 1.3vw; text-align: right; }
.main #contents .season-rank .box-wrap .record > div a.btn-help img { width: 4.8vw; }
.main #contents .season-rank .box-wrap .record > div.ea2 { width: 57vw; }
.main #contents .season-rank .box-wrap .record > div.ea2 .score { line-height: 7vw; }
.main #contents .season-rank .box-wrap .record > div.ea2 .score span { display: block; font-size: 1rem; font-weight: normal; letter-spacing: -1.1px; }
.main #contents .season-rank .box-wrap .record > div p { color: #fff; font-size: 1.250rem; }
.main #contents .season-rank .box-wrap .record > div p.score { font-size: 2rem; font-weight: 900; letter-spacing: -2.8px; }
.main #contents .season-rank .box-wrap .record > div p.score span.klsa_rank { font-size: 2rem; font-weight: 900; letter-spacing: -2.8px; }
.main #contents .season-rank .box-wrap .record > div.standard { position: relative; width: 15vw; background: rgba(255, 255, 255, 0.33); padding: 1vw 0; }
.main #contents .season-rank .box-wrap .record > div.standard p { position: absolute; top: -5.5vw; width: 100%; font-size: 1rem; }
.main #contents .season-rank .box-wrap .record.avg { height: 24vw; margin-top: 0; }
.main #contents .season-rank .box-wrap .record.avg .title { width: 22vw; font-weight: bold; color: #fff; background: none; border-right: solid 1px #fff; border-radius: 0; }
.main #contents .season-rank .box-wrap .record.avg > div { width: 14.5vw; padding: 1.5vw; }

.main #contents .banner-wrap { margin-top: 4.5vw; overflow: hidden; }
.main #contents .banner-wrap img { width: 100%; }
.main #contents .banner-wrap .pagination_bullet { text-align: center; margin-top: 3vw; }
.main #contents .banner-wrap .swiper-pagination-bullet { width: 2.6vw; height: 2.6vw; border-radius: 100%; background: #000; margin-right: 1.3vw; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; }
.main #contents .banner-wrap .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 5.2vw; background: #f1424c; border-radius: 2.6vw; }

.main #contents .notice-wrap { margin-top: 4.5vw; }
.main #contents .notice-wrap .list {}
.main #contents .notice-wrap .list ul { border-top: solid 1px #d8d8d8; }
.main #contents .notice-wrap .list ul li { padding: 1.8vw 0; border-bottom: solid 1px #d8d8d8; font-size: 1.250rem; }

#footer-menu { position: fixed; bottom: 0; left: 0; width: 100%; height: 20vw; background: #090e2c; display: flex; justify-content: center; align-content: center; z-index: 9; }
#footer-menu a { width: 20%; text-align: center; color: #c1c1c1; line-height: 2.6vw; }
#footer-menu a.active { color: #f1424c; }
#footer-menu a img { width: 12vw; }
#footer-menu a.center { position: relative; line-height: 9vw; }
#footer-menu a.center p { position: absolute; top: -9vw; display: block; width: 20vw; height: 20vw; border-radius: 100%; background: #090e2c; display: flex; justify-content: center; align-items: center; }
#footer-menu a.center p span { display: block; width: 16vw; height: 16vw; border-radius: 100%; background: #f1424c; display: flex; justify-content: center; align-items: center; }
/*#footer-menu a.center p span { display: block; width: 16vw; height: 16vw; border-radius: 100%; background: linear-gradient(135deg, #2af598 0%, #00c6ff 30%, #0072ff 60%, #7b61ff 100%); display: flex; justify-content: center; align-items: center; }*/

#popup { position: fixed; left:0; bottom:0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; }
.popup-open { height: 100%; overflow: hidden; }
.popup-open #popup { display: block; }
.popup-open #popup .popup-wrap { position: absolute; left: 0; bottom: 0; width: 100%; height: 80vw; background: #ffffff; border-radius: 5.2vw 5.2vw 0 0; }
.popup-open #popup .popup-wrap a.popup-close { position: absolute; right: 4vw; top: 4vw; }
.popup-open #popup .popup-wrap a.popup-close img { width: 8vw; }
.popup-open #popup .popup-wrap .popup-contents { padding: 12vw 5.4vw 0 5.4vw; }
.popup-open #popup .popup-wrap a.today-close { position: absolute; width:100%; right: 0; bottom: 0; text-align: right; padding: 4vw 10vw; margin-right: 20px;}

.menu { background: #090e2c; }
.menu #header { width: 100%; height: 100vw; padding: 0 5.2vw; box-sizing: border-box; background: url('/static/img/img-background-menu@2x.png') no-repeat; background-size: 130vw; background-position: center -18vw; }
.menu #header .title { font-size: 1.5rem; font-weight: bold; color: #fff; padding: 4vw; }
.menu #header .right-icon { position: absolute; top: 4vw; right: 4vw; width: 19vw; text-align: right; }
.menu #header .right-icon a img { width: 8vw; }
.menu #header .my-info { display: flex; justify-content: space-between; color: #fff; margin: 1.3vw 0 5vw; }
.menu #header .my-info .photo-name { display: flex; justify-content: flex-start; font-weight: bold; }
.menu #header .my-info .photo-name .photo { margin-right: 1.3vw; }
.menu #header .my-info .photo-name .photo img { width: 17.5vw; }
.menu #header .my-info .photo-name .name { font-size: 1.833rem; display: flex; flex-direction: column; justify-content: center; }
.menu #header .my-info .photo-name .name .id { font-size: 1.5rem; }
.menu #header .my-info .photo-name .name p span { font-size: 1.3rem; }
.menu #header .my-info .badge { }
.menu #header .my-info .badge p { display: flex; align-items: center; justify-content: flex-end; }
.menu #header .my-info .badge p a { margin-right: 1.3vw; }
.menu #header .my-info .badge p a img { width: 5.2vw; }
.menu #header .my-info .badge p img { width: 13.3vw; }
.menu #header .my-awards { background: #080d2c; color: #fff; border-radius: 3vw; text-align: center; padding: 2.5vw 0; margin-top: 5vw; box-shadow: 0 0 10px 8px rgba(0, 0, 0, 0.8); }
.menu #header .my-awards a { color: #fff; font-weight: bold; display: flex; align-items: center; justify-content: center; margin-bottom: 3vw; font-size: 1.333rem; }
.menu #header .my-awards a img { width: 4.8vw; margin-left: 1.3vw; }
.menu #header .my-awards > div { display: flex; justify-content: space-around; align-content: center; }
.menu #header .my-awards > div .cnt { width: 13.3vw; height: 10.3vw; text-align: center; color: #181818; font-size: 1.417rem; font-weight: bold; display: flex; justify-content: center; align-items: center; padding-top: 3vw; }
.menu #header .my-awards > div .rank0 .cnt { background: url('/static/img/img-red-jacket@2x.png') no-repeat; background-size: cover; padding-top: 1vw; height: 12.3vw; line-height: 6vw; }
.menu #header .my-awards > div .rank0 .cnt span { display: block; width: 6vw; height: 6vw; margin: 0 auto; border-radius: 100%; background: rgba(255, 255, 255, 0.5); }
.menu #header .my-awards > div .rank1 .cnt { background: url('/static/img/img-gold-medal@2x.png') no-repeat; background-size: cover; }
.menu #header .my-awards > div .rank2 .cnt { background: url('/static/img/group-52-copy@2x.png') no-repeat; background-size: cover; }
.menu #header .my-awards > div .rank3 .cnt { background: url('/static/img/group-52-copy-2@2x.png') no-repeat; background-size: cover; }

.menu #contents { background: #fff; padding: 5.2vw; border-radius: 0 0 8vw 8vw; }
.menu #contents .icon-menu { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; }
.menu #contents .icon-menu .item { width: 33.3%; }
.menu #contents .icon-menu .item a { display: block; text-align: center; display: flex; align-items: center; flex-direction: column; }
.menu #contents .icon-menu .item a span { width: 24.5vw; height: 24.5vw; border-radius: 100%; box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.1); background-color: #fff; display: flex; justify-content: center; align-items: center; }
.menu #contents .icon-menu .item a img { width: 15.3vw; }
.menu #contents .icon-menu .item a p { font-size: 1.5rem; font-weight: bold; margin: 1.3vw 0 5vw 0; }
.menu #contents .btn-menu { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; margin: 5vw 0; }
.main #contents .btn-menu { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; margin: 5vw 0; }
.menu #contents .btn-menu a { width: calc(50% - 1.5vw); padding: 2.8vw 0; margin-bottom: 3vw; }
.main #contents .btn-menu a { width: calc(50% - 1.5vw); padding: 2.8vw 0; margin-bottom: 3vw; }
.menu #contents .btn-menu a:nth-child(odd) { margin-right: 3vw; }
.main #contents .btn-menu a:nth-child(odd) { margin-right: 3vw; }

.pupup-wrap .msg-popup .msg-box .msg img { width: 50vw; margin: 5.2vw auto; }
.pupup-wrap .msg-popup .msg-box .msg .noti-box { width: 100%; background: #007aaf; border-radius: 2.6vw; padding: 2.6vw; color: #fff; margin: 0 auto; font-size: 1.083rem; box-sizing: border-box; margin-bottom: 2.6vw; }
.pupup-wrap .msg-popup .msg-box .msg .txt { font-size: 1.083rem; font-weight: normal; }
.pupup-wrap .msg-popup .msg-box .msg .item-list { margin: 5.2vw; }
.pupup-wrap .msg-popup .msg-box .msg .item-list p { text-align: left; background:#f7f7f7; padding: 1.6vw 2.6vw; margin-bottom: 1.6vw; font-size: 1.083rem; }

#contents .competition { margin-top: 4.5vw; }
#contents .competition .menu-box { background: #080d2c; border-radius: 2.6vw; }
#contents .competition .menu-box ul { padding: 4vw; display: flex; justify-content: space-between; align-items: center; }
#contents .competition .menu-box ul li { position: relative; width: 50%; border-radius: 3.9vw; background-image: linear-gradient(to bottom, #384179, #000), linear-gradient(to bottom, #2b3365, #000 99%); }
#contents .competition .menu-box ul li:before { content: ''; position: absolute; right: 1vw; top: 1vw; background: url('/static/img/btn-next-arrow.png') no-repeat; width: 8vw; height: 8vw; background-size: 100%; }
#contents .competition .menu-box ul li:first-child { margin-right: 4vw; }
#contents .competition .menu-box ul li a { display: block; color: #fff; font-weight: bold; font-size: 1.333rem; padding: 2vw 4.5vw; }
#contents .competition .menu-box ul + ul { padding-top: 0; }

.menu #contents h2 { position: relative; font-size: 1.5rem; margin-bottom: 1.6vw; display: flex; align-items: center; }
.menu #contents .competition { margin-top: 0; margin-bottom: 4.5vw; }