@charset "utf-8";
@font-face{
    font-family:'NEXONLv1Gothic';
    font-style:normal;
    font-weight:normal;
    src: url('../../../Content/fonts/NEXONLv1GothicOTF.eot');
    src: local("☺"),
        url('../../../Content/fonts/NEXONLv1GothicOTF-1.eot') format('embedded-opentype'),
        url('../../../Content/fonts/NEXONLv1GothicOTF.woff') format('woff'),
        url('https://ca.nexon.com/Content/fonts/NEXONLv1GothicOTF.ttf') format('truetype'); 
}
@font-face{
    font-family:'NEXONLv1Gothic';
    font-style:normal;
    font-weight:700;
    src: url('../../../Content/fonts/NEXONLv1GothicOTFBold.eot');
    src: local("☺"),
        url('../../../Content/fonts/NEXONLv1GothicOTFBold-1.eot') format('embedded-opentype'),
        url('../../../Content/fonts/NEXONLv1GothicOTFBold.woff') format('woff'),
        url('https://ca.nexon.com/Content/fonts/NEXONLv1GothicOTFBold.ttf') format('truetype');
}
@font-face{
    font-family:'Roboto';
    font-style:normal;
    font-weight:normal;
    src: url('../../../Content/fonts/Roboto.eot');
    src: local("☺"),
        url('../../../Content/fonts/Roboto-1.eot') format('embedded-opentype'),
        url('../../../Content/fonts/Roboto.woff') format('woff'),
        url('../../../Content/fonts/Roboto.ttf') format('truetype');
}
@font-face{
    font-family:'Roboto';
    font-style:normal;
    font-weight:700;
    src: url('../../../Content/fonts/RobotoBold.eot');
    src: local("☺"),
        url('../../../Content/fonts/RobotoBold-1.eot') format('embedded-opentype'),
        url('../../../Content/fonts/RobotoBold.woff') format('woff'),
        url('../../../Content/fonts/RobotoBold.ttf') format('truetype');
}

/* Game ID Layer Common */
.layer_gameid { display:block;position:fixed;top:0;left:0;top:0;right:0;bottom:0;width:100%;height:100%;z-index:999998; display: flex; justify-content: center; align-items: center; }
.layer_gameid * {font-family:'NEXONLv1Gothic', '맑은 고딕','Malgun Gothic', 'sans-serif';}
.layer_gameid .dim{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;background:#000;filter:alpha(opacity=20);opacity:0.20}
.layer_gameid .modal_wrap{ background: url('../../../ca/common/gameid/popup_bg.png'); width:704px; height:744px; box-shadow: none; box-sizing: border-box; padding:64px 56px; display: flex; flex-direction: column; align-items: center; position:absolute;overflow: hidden; border-radius: 0 0 36px 36px;}
.layer_gameid .modal_wrap .modal_header{ width:580px; padding:0; height:auto; background: none; margin-bottom: 15px; margin-top:5px; text-indent: -9999px;}
.layer_gameid .modal_wrap .modal_contents{ width:580px; display: flex; flex-direction: column; align-items: center;padding: 0; background-color: transparent; }
.layer_gameid .modal_wrap .modal_contents .content{ width:100%; height:330px; background:url('../../../ca/common/gameid/popup_info_bg.png') no-repeat; padding: 30px 30px 20px 30px; box-sizing: border-box; }
.layer_gameid .modal_wrap .modal_contents .content .title{ background:url('../../../ca/common/gameid/content.png') no-repeat; background-position-x: -858px; width:231px; height:16px; text-indent: -9999px;}
.layer_gameid .modal_wrap .modal_contents .gm_id_chars{ display: flex; width:100%; justify-content: space-between; align-items: flex-end; margin-top:20px; }
.layer_gameid .modal_wrap .modal_contents .gm_id_chars .char01{ width:64px; height:80px; background:url('../../../ca/common/gameid/char01.png') no-repeat; animation: chars 2s linear infinite}
.layer_gameid .modal_wrap .modal_contents .gm_id_chars .char02{ width:72px; height:88px; background:url('../../../ca/common/gameid/char02.png') no-repeat; animation: chars 2s linear 0.1s infinite}
.layer_gameid .modal_wrap .modal_contents .gm_id_chars .char03{ width:68px; height:76px; background:url('../../../ca/common/gameid/char03.png') no-repeat; animation: chars 2s linear 0.2s infinite}
.layer_gameid .modal_wrap .modal_contents .gm_id_chars .char04{ width:72px; height:80px; background:url('../../../ca/common/gameid/char04.png') no-repeat; animation: chars 2s linear 0.3s infinite}
.layer_gameid .modal_wrap .modal_contents .gm_id_chars .char05{ width:76px; height:80px; background:url('../../../ca/common/gameid/char05.png') no-repeat; animation: chars 2s linear 0.4s infinite}
.layer_gameid .modal_wrap .modal_contents .gm_id_chars .char06{ width:68px; height:80px; background:url('../../../ca/common/gameid/char06.png') no-repeat; animation: chars 2s linear 0.5s infinite}
.layer_gameid .modal_wrap .modal_contents .gm_id_chars .char07{ width:80px; height:80px; background:url('../../../ca/common/gameid/char07.png') no-repeat; animation: chars 2s linear 0.6s infinite}
.layer_gameid .modal_wrap .btn_close{position:absolute; top:25px; right:30px; display: block; text-indent: -9999px;overflow: hidden; background:url('../../../ca/common/gameid/content.png') no-repeat; background-position: -870px -97px; width:40px; height:40px;}
.layer_gameid .modal_wrap .btn_close:hover{background-position: -870px -157px;}

/* 게임ID 생성하기 */ 
#layerCreateGameId .modal_wrap .modal_header { margin-bottom: 20px; margin-top:0px;}
#layerCreateGameId .modal_wrap .modal_header h2{ width:305px; height:77px; background:url('../../../ca/common/gameid/content.png') no-repeat; background-position: -856px -495px; padding:0; }
#layerCreateGameId .modal_wrap .modal_contents .create_gameId .title.server{ background-position-y: -682px;}
#layerCreateGameId .modal_wrap .modal_contents .create_gameId .title.input_id{ background-position-y: -711px;}
#layerCreateGameId .modal_wrap .modal_contents .create_gameId .select_server{ margin:12px 0 20px 15px; padding:5px; box-sizing:border-box; width:200px; height:54px; background:#00439f; border-radius: 50px; display: flex; justify-content: center; align-items: center; text-indent: -9999px;}
#layerCreateGameId .modal_wrap .modal_contents .create_gameId input[type="radio"]{ display: none; }
#layerCreateGameId .modal_wrap .modal_contents .create_gameId label{ display:block; background:url('../../../ca/common/gameid/content.png') no-repeat; background-position-y: -95px; width:94px; height: 46px; cursor: pointer; border-radius: 50px; }
#layerCreateGameId .modal_wrap .modal_contents .create_gameId input[type="radio"]:checked + label,
#layerCreateGameId .modal_wrap .modal_contents .create_gameId label:hover{ background-position-y: -161px; }
#layerCreateGameId .modal_wrap .modal_contents .create_gameId label.s_happy{ background-position-x: -217px; }
#layerCreateGameId .modal_wrap .modal_contents .create_gameId label.s_dream{ background-position-x: -319px; }

#layerCreateGameId .modal_wrap .modal_contents .create_gameId .input_id_box{ display: flex; align-items: center; position: relative; background:#00439f; width:488px; height:53px; border-radius: 50px; box-sizing: border-box; padding:15px 0 15px 34px; margin:12px 0 5px 15px; }
#layerCreateGameId .modal_wrap .modal_contents .create_gameId .input_id_box input[type="text"], .input_id_box input:focus {outline: none; border:none; appearance: none;  color:#fff;  font-family:'NEXONLv1Gothic'; font-size: 18px; background: transparent; width:310px; height:40px;}
#layerCreateGameId .modal_wrap .modal_contents .create_gameId .input_id_box input[type="text"]::placeholder{color:#16b5ff; }
#layerCreateGameId .modal_wrap .modal_contents .create_gameId .input_id_box input:-internal-autofill-selected{background-color:#00439f !important; color:#fff !important;}
#layerCreateGameId .modal_wrap .modal_contents .create_gameId .input_id_box .check_same{ position: absolute; right:5px; width:128px; height:44px; background:url('../../../ca/common/gameid/content.png') no-repeat; background-position-x: -859px; background-position-y: -297px; text-indent: -9999px;}
#layerCreateGameId .modal_wrap .modal_contents .create_gameId .input_id_box .check_same:hover{ background-position-y: -367px; }
#layerCreateGameId .modal_wrap .modal_contents .create_gameId .tooltip{ width:auto; height:29px; padding:0px 16px; margin-left: 15px; margin-bottom: 10px; margin-top:10px; font-family:'NEXONLv1Gothic'; font-style: italic; display: inline-block; border-radius: 50px; box-shadow: 0px 3px 6px rgba(0,0,0,.4); box-sizing: border-box; position: relative;}
#layerCreateGameId .modal_wrap .modal_contents .create_gameId .tooltip.confirm{ color:#000; background-color: #0df6ff; font-weight: normal;}
#layerCreateGameId .modal_wrap .modal_contents .create_gameId .tooltip.warning{ color: #fff; background-color: #f74142; font-weight: normal;}
#layerCreateGameId .modal_wrap .modal_contents .create_gameId .tooltip::before {display:inline-block; margin:0; content: ''; position: absolute; top: -8px; left: 20px; width:13px; height:9px; background:url('../../../ca/common/gameid/content.png') no-repeat; background-position-x: -228px; }
#layerCreateGameId .modal_wrap .modal_contents .create_gameId .tooltip.confirm::before {background-position-y: -540px;}
#layerCreateGameId .modal_wrap .modal_contents .create_gameId .tooltip.warning::before {background-position-y: -593px;}
#layerCreateGameId .modal_wrap .modal_contents .create_gameId .tooltip .tooltip_txt{line-height: 29px; margin-top:1px; font-size: 14px;}

#layerCreateGameId .modal_wrap .modal_contents .create_gameId .notice{ width:520px; height:38px; background:url('../../../ca/common/gameid/content.png') no-repeat; background-position: -859px -806px; text-indent: -9999px;}
#layerCreateGameId .modal_wrap .modal_contents .btn_create{ width:244px; height:70px; background:url('../../../ca/common/gameid/content.png') no-repeat; background-position-x: -197px; background-position-y: -865px; text-indent: -9999px; margin-top:13px; }
#layerCreateGameId .modal_wrap .modal_contents .btn_create:hover{ background-position-y: -948px; }

/* 게임ID 생성 완료 */ 
#layerCompleteGameId .modal_wrap .modal_header h2{ width:580px; height:77px; background:url('../../../ca/common/gameid/content.png') no-repeat; background-position: -856px -588px; padding:0; }
#layerCompleteGameId .modal_wrap .modal_contents .content.info .title.server_title{ background-position-y: -767px; margin:25px 0;}
#layerCompleteGameId .modal_wrap .modal_contents .content.info .title.gameid_title{ background-position-y: -739px; margin-bottom:25px; margin-top:20px;}
#layerCompleteGameId .modal_wrap .modal_contents .content.info p { font-size: 28px; font-weight: bold; color:#fff; margin-left:15px; }
#layerCompleteGameId .modal_wrap .modal_contents .content.info hr{display: block; width:100%; height:8px; border-radius: 50px; background-color: #2b80ff; border: none;margin-top:10px;}
#layerCompleteGameId .modal_wrap .modal_contents .btn_start{ width:244px; height:70px; background:url('../../../ca/common/gameid/content.png') no-repeat; background-position-x: -471px; background-position-y: -865px; text-indent: -9999px; margin-top:13px; }
#layerCompleteGameId .modal_wrap .modal_contents .btn_start:hover{ background-position-y: -948px; }

/* 내정보 > 계정 및 게임ID 관리 > 동일 명의 게임 ID 확인하기 */
#layerGameIdList .modal_wrap{background:url('../../../ca/common/gameid/list/popup_bg.png');}
#layerGameIdList .modal_wrap .modal_header h2{width:576px;height:40px;background:url('../../../ca/common/gameid/list/popup_content.png') 0 0;}
#layerGameIdList .modal_wrap .modal_contents .content{background:url('../../../ca/common/gameid/list/popup_list_bg.png');height:440px;padding: 8px;}
#layerGameIdList .modal_wrap .modal_contents .accounts{overflow-y: auto;overflow-x:hidden;height:422px;padding: 22px 0px 22px 22px;box-sizing: border-box;display: flex;flex-direction: column;gap:10px;}
#layerGameIdList .modal_wrap .modal_contents .accounts::-webkit-scrollbar{width:8px;}
#layerGameIdList .modal_wrap .modal_contents .accounts::-webkit-scrollbar-thumb{background-color: #ffe329;border-radius: 100px;}
#layerGameIdList .modal_wrap .modal_contents .accounts::-webkit-scrollbar-track{background-color: #16b5ff;border-radius: 100px;}
#layerGameIdList .modal_wrap .modal_contents .acc_list{width:520px;height:54px;border-radius: 27px;background-color: #2b80ff;display: flex;flex-direction: column;align-items: center;box-sizing: border-box;transition: height 0.2s ease-in-out ;transform-origin: center top;}
#layerGameIdList .acc_list .ids{display: none;}
#layerGameIdList .modal_wrap .modal_contents .acc_list.open{height: fit-content;border-radius: 27px;border:3px solid white;background-color: #2b80ff;}
#layerGameIdList .modal_wrap .modal_contents .acc_list.open .ids{display: flex;}
#layerGameIdList .modal_wrap .modal_contents .acc_list.open h5{padding:13px;}
#layerGameIdList .modal_wrap .modal_contents .acc_list.open h5 .btn_toggle{right:13px;}
#layerGameIdList .modal_wrap .modal_contents .acc_list h5{display: flex;align-items: center;font-weight: bold;font-size: 16px;width:100%;height:54px;padding:16px;box-sizing: border-box;position: relative;color:white;}
#layerGameIdList .modal_wrap .modal_contents .acc_list h5 *{line-height: 34px;}
#layerGameIdList .modal_wrap .modal_contents .acc_list h5 em{margin-left: 12px;}
#layerGameIdList .modal_wrap .modal_contents .acc_list h5 em::after{content:'';display: inline-block;position: relative;width:8px;height:2px;background-color: #33d8c6;margin-left:8px;top:-5px}
#layerGameIdList .modal_wrap .modal_contents .acc_list h5 .tpa{padding:0px 16px 0px 38px;height:34px;border-radius: 100px;background:#126df4;position: relative;margin-left:1px;font-size: 14px;}
#layerGameIdList .modal_wrap .modal_contents .acc_list h5 .tpa::before{width:32px;height:32px;background:url('../../../ca/common/gameid/list/popup_content.png');background-position-y:-76px;content:'';display: inline-block;position: absolute;top:3px;left:3px;}
#layerGameIdList .modal_wrap .modal_contents .acc_list h5 .tpa.naver::before{background-position-x: -410px;}
#layerGameIdList .modal_wrap .modal_contents .acc_list h5 .tpa.facebook::before{background-position-x: -452px;}
#layerGameIdList .modal_wrap .modal_contents .acc_list h5 .tpa.google::before{background-position-x: -494px;}
#layerGameIdList .modal_wrap .modal_contents .acc_list h5 .tpa.apple::before{background-position-x: -535px;}

#layerGameIdList .modal_wrap .modal_contents .acc_list h5 .acc_name{margin-left: 8px;width:340px;white-space: nowrap;overflow-x: scroll;overflow-y: visible;}
#layerGameIdList .modal_wrap .modal_contents .acc_list h5 .acc_name::-webkit-scrollbar{display: none;}
#layerGameIdList .modal_wrap .modal_contents .acc_list h5 .tpa~.acc_name{width: 210px;}
#layerGameIdList .modal_wrap .modal_contents .acc_list h5 .btn_toggle{position: absolute;right:16px;width:32px;height:32px;background:url('../../../ca/common/gameid/list/popup_content.png') -292px -76px}
#layerGameIdList .modal_wrap .modal_contents .acc_list.open h5 .btn_toggle{background-position: -338px -76px;}
#layerGameIdList .modal_wrap .modal_contents .acc_list .ids{flex-direction: column;align-items: center;padding:23px 16px 20px 16px; position: relative;color:#3afffd;font-size: 14px;}
#layerGameIdList .modal_wrap .modal_contents .acc_list .ids *{line-height: 25px;}
#layerGameIdList .modal_wrap .modal_contents .acc_list .ids::before{content:'';display: block;position: absolute;top:0;width:488px;height:8px;background-color: #126df4;border-radius: 100px;}
#layerGameIdList .modal_wrap .modal_contents .acc_list .ids ul{display:flex;flex-direction:column;align-items: center;gap:5px;}
#layerGameIdList .modal_wrap .modal_contents .acc_list .ids .id_list{width:463px;display: flex;justify-content: space-between;align-items: center;}
#layerGameIdList .modal_wrap .modal_contents .acc_list .btn_more{width:118px;height:44px;background:url('../../../ca/common/gameid/list/popup_content.png') -3px -76px;text-indent: -88888px;}
#layerGameIdList .modal_wrap .modal_contents .acc_list .btn_more:hover{background-position: -130px -76px;}

/* 내정보 > 계정 및 게임ID 관리 > 본인 인증 */
#layerGameIdAuth .modal_wrap{background:url('../../../ca/common/gameid/list/popup_bg_02.png');}
#layerGameIdAuth .modal_wrap .modal_header h2{width:576px;height:77px;background:url('../../../ca/common/gameid/list/popup_content.png') 0 -134px;}
#layerGameIdAuth .modal_wrap .modal_contents .content{background:url('../../../ca/common/gameid/list/popup_list_bg_02.png');height:400px;padding:30px 30px 20px 30px;}
#layerGameIdAuth .modal_wrap .content .auth_list{display: flex;flex-direction: column;gap:10px}
#layerGameIdAuth .modal_wrap .content .auth_list li{width:520px;height:95px;border-radius: 27px;background-color: #2b80ff;display: flex;justify-content: space-between;align-items:center;padding:16px;box-sizing: border-box;}
#layerGameIdAuth .modal_wrap .content .auth_list li .desc{position:relative;width:352px;height:44px;margin-left: 14px;}
#layerGameIdAuth .modal_wrap .content .auth_list li .desc .icon{position: absolute; width:44px; height:44px; left:0;top:0;background-image:url('../../../ca/common/gameid/list/popup_content.png')}
#layerGameIdAuth .modal_wrap .content .auth_list li .desc h5{position: absolute; font-weight: bold; font-size: 18px; color:#fff; top:2px;left:60px;}
#layerGameIdAuth .modal_wrap .content .auth_list li .desc p{position: absolute; font-size: 14px; color:#3afffd; top:29px;left:60px;}
#layerGameIdAuth .modal_wrap .content .auth_list .auth1 .icon{background-position: -284px -228px;}
#layerGameIdAuth .modal_wrap .content .auth_list .auth2 .icon{background-position: -339px -222px;}
#layerGameIdAuth .modal_wrap .content .auth_list .auth3 .icon{background-position: -408px -227px;}
#layerGameIdAuth .modal_wrap .content .auth_list li .btn_auth{width:118px;height:44px;text-indent: -99999px;background:url('../../../ca/common/gameid/list/popup_content.png') 0px -228px;}
#layerGameIdAuth .modal_wrap .content .auth_list li .btn_auth:hover{background-position-x: -130px;}
#layerGameIdAuth .modal_wrap .noti{font-size: 14px;color:#fff;display: flex;align-items: center;line-height: 25px;margin-top:20px}
#layerGameIdAuth .modal_wrap .noti::before{content: '';position: relative;display: inline-block;margin-right: 8px;width:20px;height: 20px; background:url('../../../ca/common/gameid/list/popup_content.png') -470px -228px;top:-1px}
@keyframes chars {
    0%{transform: translateY(0px);}
    5%{transform: translateY(-8px);}
    10%{transform: translateY(0px);}
    100%{transform: translateY(0px);}
}