@charset "utf-8";
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * Section *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.section {padding: 80px 0; box-sizing: border-box;}
.section.pb-0 {padding-bottom: 0;}
.section.pt-0 {padding-top: 0;}
.section.last {padding-bottom: 80px;}

.section [class^=row] + [class^=row] {margin-top: 0;}

/* 반응형에서 조절이 필요한 경우 사용 */
/*
@media all and (max-width: 1024px) {
    .section {padding: 0 0;}
    .section.last {padding-bottom: 0;}
    .section [class^=row] + [class^=row] {margin-top: 0;}
}
*/

.wrap{word-break: keep-all;}
.wrap h1,
.wrap h2,
.wrap h3,
.wrap h4,
.wrap h5,
.wrap h6,
.warp p{padding: 0; margin: 0;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * Title *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main_tit h3 {font-size: var(--fz-56); font-weight: 700; color: #0c4da2; letter-spacing: -0.05em;}
.main_tit .desc p{font-size: 20px; color: #222222; letter-spacing: -0.05em; font-weight: 700; line-height: 1.5em;}
.main_con_tit h5 {}

.sub_main_tit h3 {}
.sub_con_tit h5 {font-size: 48px; letter-spacing: -0.05em; line-height: 1.208333em; color: 222222;}
.sub_con_tit h5.white{color: #fff;}

.heading .desc p {}


.mypage_link_list ul{display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;}
.mypage_link_list ul li{width: calc(16.666% - 12px); border-radius: 20px; box-sizing: border-box; overflow: hidden;}
.mypage_link_list ul li a{display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 0; width: 100%; height: 100%; box-sizing: border-box; background-color: #eeeeee; text-align: center;}
.mypage_link_list ul li a i{display: flex; align-items: center; justify-content: center; width: 54px; height: 47px; box-sizing: border-box; margin: 0 auto;}
.mypage_link_list ul li a img.hoverImg{display: none;}
.mypage_link_list ul li a span{color: #222222; font-size: var(--fz-24); letter-spacing: 0; font-weight: 700; margin-top: 20px;}
.mypage_link_list ul li.active a{background: #0c4da2;}
.mypage_link_list ul li.active a i img{display: none;}
.mypage_link_list ul li.active a img.hoverImg{display: block;}
.mypage_link_list ul li.active a span{color: #fff;}

@media all and (max-width:800px){
    .mypage_link_list { overflow-x: auto; padding-bottom: 25px;}
    .mypage_link_list ul{flex-wrap: nowrap; width: 800px;}
    .mypage_link_list ul li{width: calc(33.333% - 6.666px); order: 2;}
    .mypage_link_list ul li.active{order: 1;}

    .mypage_link_list::-webkit-scrollbar{height: 10px;}
    .mypage_link_list::-webkit-scrollbar-track{background-color: #888; border-radius: 5px;}
    .mypage_link_list::-webkit-scrollbar-thumb{background-color: #0c4da2; border-radius: 5px;}
}

.user_name_box{display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid #0c4da2; margin-bottom: 50px;}
.user_name_box .left_box{display: flex; align-items: center; gap: 20px;}
.user_name_box .circle_box{ width: 120px; aspect-ratio: 1/1; box-sizing: border-box; border-radius: 50%; background-color: #0c4da2; display: flex; align-items: center; justify-content: center;}
.user_name_box .circle_box p{font-size: 20px; color: #ffffff; font-weight: 600; letter-spacing: 0;}
.user_name_box .welcome_box p{font-size: var(--fz-20); font-weight: 300; color: #222222; letter-spacing: 0; line-height: 1.4em;} 
.user_name_box .welcome_box p b{font-weight: 600;}
.user_name_box .welcome_box p span.blue{color: #008be3;}
.user_name_box .level_box{display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 30px; width: 164px; height: 60px; box-sizing: border-box; border: 1px solid #0c4da2;}
.user_name_box .level_box span{font-size: 20px; color: #0c4da2; font-weight: 600; letter-spacing: 0;}

@media all and (max-width:800px){
    .user_name_box{margin-top: 50px !important;}

}