@font-face {
    font-family: 'KakaoBigSans-Bold';
    src: url('/css/fonts/KakaoBigSans-Bold.ttf') format('woff');
    src: url('/css/fonts/KakaoBigSans-Bold.OTF') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KakaoBigSans-ExtraBold';
    src: url('/css/fonts/KakaoBigSans-ExtraBold.ttf') format('woff');
    src: url('/css/fonts/KakaoBigSans-ExtraBold.OTF') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.event_friend_wrap{font-family: 'KakaoBigSans-Bold', sans-serif;}
.event_friend_wrap img{max-width: 100%;}
.event_friend_wrap .title{text-align: center;}
.event_friend_wrap .title>p{}

.code_cont{background-image: url("/image/event_friend2025/step1_bg_m.png");background-position: center top;background-repeat:no-repeat;background-size: 88%;height:53vw;}
.code_cont>p{text-align: center;display: inline-block;}
.code_cont>p>img{vertical-align: middle;width:60%;max-width: 225px;background-image: url("/image/event_friend2025/step1_bg_pc.png");background-position: center top;background-repeat:no-repeat;line-height: 98px;box-sizing: border-box;}

.code_cont>p>input{text-align: center;color:#ffffff;display: inline-block;font-size: 10vw;width:100%;font-family: 'KakaoBigSans-ExtraBold', sans-serif;height: 14vw;background-color: transparent;outline: none;}
.code_cont>p.not_login>input,.code_cont>p.not_target>input{display: block;font-size: 4vw;padding:9vw 0 5vw 0;}
.code_cont>p.not_target>a{display: none;}
.code_cont>p.not_login>img,.code_cont>p.not_target>img{display: none;}
.code_cont>p>a{width:24vw;display: inline-block;}
.code_cont .step1_title {color:#00FCFF;font-size: 4vw;line-height: 1;margin-top: 7vw;display: block;height: 4vw;}
.code_cont .step1_info {color:#fff;font-size: 4vw;line-height: 3;margin-top:2vw;display: block;}

.way{background-color: #012b75;width:100%;padding:8% 0 12% 0;background-image: url("/image/event_friend2025/step_bg_m.png");background-size: cover;background-position: center top;background-repeat: no-repeat;}
.way>p{text-align: center;padding-bottom: 5%;}
.way>p>img{width:50%;max-width: 348px;}
.way .way_inner {text-align: center;}
.way .way_inner>div {margin-bottom:8vw;}
.way .way_inner .step2>p>img,.way .way_inner .step3>p>img,.way .way_inner .step4>p>img{width:88%}

.list_area{background-color: #012b75;padding:14% 8%;}
.list_area>p{text-align: center;padding-bottom: 5%;}
.list_area>p>img{width:60%;max-width: 348px;}
.list_area>.f_list_cont{background-color: #172442;background-image: url("/image/event_friend2025/list_box_bg_m.png");background-position: center top;background-repeat: no-repeat;background-size: 100%;overflow:hidden;width:100%;height:54vw;}
.list_area>.f_list_cont>.list_inner{margin:0 auto;overflow-y: scroll;width:98%;height: 98%;font-size:4vw;}
.list_area>.f_list_cont>.list_inner ul{position:relative;width:80%;left:50%;transform: translateX(-50%);}
.list_area>.f_list_cont>.list_inner ul > li{color:#fff;height: 9vw;}
.list_area>.f_list_cont>.list_inner ul > li >span{width:49%;display: inline-block;text-align: center;}
.list_area>.f_list_cont>.list_inner .subject{color:#00FCFF;margin:5vw auto;}

.list_area .list_info>img{width:86vw;}
.list_inner::-webkit-scrollbar {
    width: 5px;
    height: 3px;
  }
   
  .list_inner::-webkit-scrollbar-track {
    
  }
   
  .list_inner::-webkit-scrollbar-thumb {
    background-color: #0E4FC7;
    border-radius: 10px;
  }

.notice{background-color: #07193d;text-align: center;padding:10% 5%;}