#wrap { background: unset;}
.inner p,
.inner span,
.inner div,
.inner label,
.inner input,
.inner select { font-family: 'Paperlogy'; font-weight: 300;}

.exam_btn { display: block; width: 140px; padding: 8px; text-align: center; color: #333; font-size: 20px; margin: 35px auto 15px; background: #f7f7f7; border-radius: 15px; border: 1px solid #b9b9b9;}
.next_btn { display: block; width: 140px; padding: 8px; text-align: center; color: #fff; font-size: 20px; margin: 15px auto; background: #415067; border-radius: 15px;}

.info_wrap { padding: 15px; background: #464646;}
.info_wrap .img_wrap { padding: 0 15px;}
.info_wrap .img_wrap img { max-width: 150px; width: 40%; transform: scaleX(-1);}
.info_wrap .text_wrap { background: #fff; padding: 15px; border-radius: 5px;}
.info_wrap .text_wrap .light { margin-bottom: 3px;}
.info_wrap .text_wrap .big { font-size: 30px; }
.info_wrap .text_wrap .big span { font-weight: 700; font-size: inherit;}

.noti_wrap { padding: 30px 15px; }
.noti_wrap .title { font-size: 22px; font-weight: 700; margin-bottom: 15px;}
.noti_wrap .box { padding: 15px; border-radius: 15px; border: 1px solid #dddddd; background: #f7f7f7; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
.noti_wrap .box p { margin-bottom: 15px; line-height: 1.1; }
.noti_wrap .box p:nth-last-child(1) { margin-bottom: 0;}
.noti_wrap .box p span { line-height: 1.3; font-weight: 700;}

.exam_wrap { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #1a1a1a78; z-index: 9999;}
.exam_wrap.on { display: block;}
.exam_wrap .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: auto; background: #fff; width: calc(100vw - 30px); padding: 20px 15px; max-width: 1024px; max-height: calc(100vh - 50px);}
.exam_wrap .box .cls_btn { margin: 0 0 0 auto; display: block;}
.exam_wrap .box .cls_btn i { font-size: 20px;}
.exam_wrap .box .img_wrap { overflow: auto; margin-top: 15px;}
.exam_wrap .box .img_wrap img { width: 100%;}

.step_wrap { padding: 15px;}
.step_wrap .bar { position: relative; display: flex; justify-content: space-between;}
.step_wrap .bar:before { content: ''; width: 100%; height: 5px; background: #D2D2D2; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.step_wrap .bar:after { content: ''; height: 5px; background: #415067; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.step_wrap .bar.step1:after { width: 10%;}
.step_wrap .bar.step2:after { width: 50%;}
.step_wrap .bar.step3:after { width: 100%;}
.step_wrap .bar p { width: 20px; height: 20px; border-radius: 50%; color: #fff; background: #d2d2d2; display: flex; align-items: center; justify-content: center; position: relative; z-index: 10;}
.step_wrap .bar p.on { background: #415067;}

.character_form { padding: 15px;}
.character_form .noti { display: flex; gap: 5px; margin-bottom: 20px; }
.character_form .noti i { color: #ffca00;}
.character_form .noti p { font-weight: 600; line-height: 1.1;}
.character_form .input_wrap { margin-bottom: 15px; border-radius: 15px; border: 1px solid #D9D9D9; display: flex; overflow: hidden;}
.character_form .input_wrap label { width: 30%; padding: 10px 5px; background: #D9D9D9; text-align: center; font-weight: 700;}
.character_form .input_wrap input { padding: 10px 15px; width: 70%;}
.character_form .input_wrap select { padding: 11.5px 15px; background: url(../img/down2.png) no-repeat calc(100% - 15px) 50% / 22px; width: 70%; border: none;}
.character_form .not_found p {text-align: center; font-size: 20px; color: #D30000; line-height: 1.3;}
.character_form .not_found p span { font-size: inherit; color: inherit;  font-weight: 600; line-height: inherit; }

.intro_form { padding: 15px;}
.textarea_wrap { border: 1px solid #D2D2D2; border-radius: 15px; overflow: hidden; display: flex; flex-direction: column;}
.textarea_wrap label { background: #D2D2D2; padding: 8px 15px; font-weight: 700; }
.textarea_wrap textarea { padding: 15px; border: none;}

.font_preview_wrap { margin-top: 30px; border: 1px solid #D2D2D2; border-radius: 15px; overflow: hidden; display: flex; flex-direction: column;}
.font_preview_wrap .title { background: #D2D2D2; padding: 8px 15px; font-weight: 700; }
.font_preview_wrap input { display: none;}
.font_preview_wrap input:checked + label{ border: 3px solid #ff4444; }
.font_preview_wrap label { padding: 15px;}
.font_preview_wrap label:nth-last-child(1) { border-radius: 0 0 15px 15px;}
.font_preview_wrap .type_name { padding: 0 0 10px 5px; border-bottom: 1px solid #888; font-weight: 500; font-size: 20px;}
.font_preview_wrap .font_wrap:nth-child(2) {  border-bottom: 1px solid #D2D2D2;}
.font_preview_wrap .preview { margin-top: 15px; font-size: 20px;}


.result_wrap * { font-family: 'Paperlogy'; font-weight: 400;}
.result_wrap div,
.result_wrap p,
.result_wrap h2,
.result_wrap h3 { color: #1A1A1A;}

.result_wrap .box { border: 1px solid #C0C0C0;}
.result_wrap .fl { display: flex;}
.result_wrap .w10 { width: 10%;}
.result_wrap .w20 { width: 20%;}
.result_wrap .w30 { width: 30%;}
.result_wrap .w40 { width: 40%;}
.result_wrap .w50 { width: 50%;}
.result_wrap .w50 { width: 50%;}
.result_wrap .tit { background: #EAF2F4; padding: 10px; text-align: center; }
.result_wrap .con { font-weight: 600; padding: 10px 15px;}
.result_wrap .bb { border-bottom: 1px solid #c0c0c0;}
.result_wrap .br { border-right: 1px solid #c0c0c0;}

.result_container { overflow: auto; border: 1px solid #ccc; margin-bottom: 30px;}
.result_wrap { width: 1000px; padding: 50px; background: #fff; }
.result_wrap h2 { padding-bottom: 15px; border-bottom: 1px solid #000; font-weight: 700; font-size: 36px; text-align: center; }
.result_wrap h3 { margin: 25px 0 10px; font-weight: 700; font-size: 20px; }

.result_wrap .personal_wrap .box .img_wrap { width: 150px; border-right: 1px solid #C0C0C0; position: relative; overflow: hidden;}
.result_wrap .personal_wrap .box .img_wrap img { width: 500px; position: absolute; top: -110px; left: -178px; }
.result_wrap .personal_wrap .box .personal_content { width: calc(100% - 150px);}
.result_wrap .personal_wrap .box .personal_content .tit { width: 85px;  }
.result_wrap .personal_wrap .box .personal_content .con { width: calc(100% - 85px);  }

/* 캐릭터 일러 위치 */
.result_wrap .personal_wrap .box .darkknight img {width: 325px; top: -66px; left: -31px;}
.result_wrap .personal_wrap .box .adel img { top: -65px; left: -173px;}
.result_wrap .personal_wrap .box .angelicburster img { width: 400px; top: -67px; left: -153px;}
.result_wrap .personal_wrap .box .aran img { top: -125px; left: -201px;}
.result_wrap .personal_wrap .box .ark img { width: 450px; top: -107px; left: -152px;}
.result_wrap .personal_wrap .box .battlemage img { width: 325px; top: -78px; left: -34px;}
.result_wrap .personal_wrap .box .bishop img { width: 450px; top: -105px; left: -148px;}
.result_wrap .personal_wrap .box .blaster img { width: 400px; top: -105px; left: -103px;}
.result_wrap .personal_wrap .box .bowmaster img { width: 450px; top: -103px; left: -148px;}
.result_wrap .personal_wrap .box .bulldog img { width: 400px; top: -69px; left: -120px;}
.result_wrap .personal_wrap .box .canon img { width: 400px; top: -104px; left: -113px;}
.result_wrap .personal_wrap .box .captain img { width: 400px; top: -115px; left: -80px;}
.result_wrap .personal_wrap .box .daemonavenger img { width: 400px; top: -128px; left: -48px;}
.result_wrap .personal_wrap .box .daemonslayer img { width: 400px; top: -67px; left: -88px;}
.result_wrap .personal_wrap .box .dualblade img { width: 350px; top: -100px; left: -105px;}
.result_wrap .personal_wrap .box .erel img { width: 400px; top: -89px; left: -113px;}
.result_wrap .personal_wrap .box .evan img { width: 400px; top: -103px; left: -118px;}
.result_wrap .personal_wrap .box .flamewizard img { width: 400px; top: -103px; left: -110px;}
.result_wrap .personal_wrap .box .hero img { width: 400px; top: -103px; left: -125px;}
.result_wrap .personal_wrap .box .hoyoung img { width: 400px; top: -94px; left: -94px;}
.result_wrap .personal_wrap .box .kadena img { width: 400px; top: -60px; left: -92px;}
.result_wrap .personal_wrap .box .kain img { width: 400px; top: -60px; left: -125px;}
.result_wrap .personal_wrap .box .kaiser img { width: 400px; top: -85px; left: -99px;}
.result_wrap .personal_wrap .box .kinesis img { width: 450px; top: -101px; left: -136px;}
.result_wrap .personal_wrap .box .knightwalker img { width: 400px; top: -101px; left: -155px;}
.result_wrap .personal_wrap .box .lara img { width: 400px; top: -84px; left: -129px;}
.result_wrap .personal_wrap .box .luminous img { width: 400px; top: -103px; left: -118px;}
.result_wrap .personal_wrap .box .mechanic img { width: 350px; top: -74px; left: -90px;}
.result_wrap .personal_wrap .box .mercedes img { width: 400px; top: -99px; left: -91px;}
.result_wrap .personal_wrap .box .mihile img { width: 400px; top: -117px; left: -67px;}
.result_wrap .personal_wrap .box .nightroad img { width: 400px; top: -117px; left: -95px;}
.result_wrap .personal_wrap .box .paladin img { width: 400px; top: -74px; left: -130px;}
.result_wrap .personal_wrap .box .pathfinder img { width: 400px; top: -96px; left: -122px;}
.result_wrap .personal_wrap .box .phantom img { width: 350px; top: -93px; left: -76px;}
.result_wrap .personal_wrap .box .shadow img { width: 400px; top: -74px; left: -96px;}
.result_wrap .personal_wrap .box .shrine img { width: 400px; top: -120px; left: -102px;}
.result_wrap .personal_wrap .box .silverwall img { width: 400px; top: -82px; left: -103px;}
.result_wrap .personal_wrap .box .soulmaster img { width: 400px; top: -104px; left: -127px;}
.result_wrap .personal_wrap .box .striker img { width: 400px; top: -115px; left: -79px;}
.result_wrap .personal_wrap .box .suncall img { width: 400px; top: -86px; left: -136px;}
.result_wrap .personal_wrap .box .viper img { width: 400px; top: -176px; left: -76px;}
.result_wrap .personal_wrap .box .wildhunter img { width: 400px; top: -56px; left: -117px;}
.result_wrap .personal_wrap .box .windbreaker img { width: 350px; top: -71px; left: -79px;}
.result_wrap .personal_wrap .box .xenon img { width: 300px; top: -51px; left: -79px;}


.result_wrap .intro_wrap #intro { padding: 15px; font-size: 20px;}

.result_wrap .item_wrap .box .title_wrap { width: 100%;}
.result_wrap .item_wrap .box .title_wrap .tit:nth-child(1),
.result_wrap .item_wrap .box .con_wrap .con:nth-child(1) { width: 30%;}
.result_wrap .item_wrap .box .title_wrap .tit:nth-child(2),
.result_wrap .item_wrap .box .con_wrap .con:nth-child(2) { width: 10%; text-align: center; justify-content: center;}
.result_wrap .item_wrap .box .title_wrap .tit:nth-child(3),
.result_wrap .item_wrap .box .con_wrap .con:nth-child(3) { width: 61%;}
.result_wrap .item_wrap .box .con_wrap:nth-last-child(1) { border-bottom: none;}

.result_wrap .item_wrap .box .con_wrap .con { display: flex; align-items: center;}
.result_wrap .item_wrap .box .con_wrap .con:nth-child(1) { gap: 5px;}
.result_wrap .item_wrap .box .con_wrap img { width: 25px;}

.result_wrap .vmatrix_wrap .box { flex-wrap: wrap;}
.result_wrap .vmatrix_wrap .box .title_wrap { width: 100%;}
.result_wrap .vmatrix_wrap .box .title_wrap .tit { width: calc(20% / 2 + 0.5px);}
.result_wrap .vmatrix_wrap .box .title_wrap .tit:nth-child(1),
.result_wrap .vmatrix_wrap .box .title_wrap .tit:nth-child(4) { width: calc(60% / 2);}

.result_wrap .vmatrix_wrap .box .con_wrap { width: 50%;}
.result_wrap .vmatrix_wrap .box .con_wrap .con { width: calc(20% + 0.5px); text-align: center; display: flex; align-items: center; justify-content: center;}
.result_wrap .vmatrix_wrap .box .con_wrap .con:nth-child(1),
.result_wrap .vmatrix_wrap .box .con_wrap .con:nth-child(4) { width: 60%; text-align: left; justify-content: left; gap: 5px;}

.result_wrap .vmatrix_wrap .box .con_wrap .con img { width: 30px;}

.result_wrap .vmatrix_wrap .box .con_wrap:nth-child(odd) .con:nth-last-child(1) { border-right: none;}
.result_wrap .vmatrix_wrap .box .con_wrap:last-of-type { border-bottom: none; }
.result_wrap .vmatrix_wrap .box.even .con_wrap:nth-last-of-type(-n+2) { border-bottom: none; }

.download_btn { display: block; padding: 8px; text-align: center; color: #fff; font-size: 20px; margin: 20px auto; background: #415067; border-radius: 15px;}
.inner .view_noti { margin-bottom: 5px; font-weight: 400;}

.edit_btn { width: 100%; display: block; padding: 8px; text-align: center;  font-size: 20px; margin: 20px auto; background: #D9D9D9; border-radius: 15px;}

.copy { text-align: right; margin-top: 30px;}
.copy p { line-height: 1.3; color: #888;}