html, body { background-color: #f2f2f2; }
/* #howQna { padding:0.3rem 0.6rem; width: calc(100% - 1.2rem); } */


/* ** 시작페이지 ** */
#howStart { overflow-y: auto; height: 100vh; height: 100svh; font-family: 'Pretendard-Medium'; }
.start_bg { align-content: center; padding: 2rem 1rem 0 2.4rem; }
.logo_image { width: 30%; }
.main_title { font-family: 'Pretendard-Bold'; font-size: 3.6rem; margin: 3rem 0 2rem; }
.mtitle_txt { margin-bottom: .8rem; }
.mtitle_txt1 { color: #9e9e9e; }
.mtitle_txt2 { color: #595959; }
.sub_title { color: #595959; font-size: 2rem; display: flex; }
.stitle { width: 72%; }
.stitle_txt { margin-bottom: .4rem; }
.sub_image { width: 22%; }
.howStart_btn { display: flex; margin: 4rem 0 5rem; }
.start_button { border: .2rem solid; padding: 1rem 2rem; border-radius: .8rem; font-family: 'Pretendard-SemiBold';
  font-size: 1.6rem; cursor: pointer; }
.main_exp { font-family: 'Pretendard-Bold'; font-size: 2rem; margin-bottom: 1.4rem; }
.mexp_txt { margin-bottom: .4rem; }
.sub_exp { color: #595959; font-size: 1.24rem; }
.sexp_txt { margin-bottom: .2rem; }
.last_exp { margin: .8rem 0 2rem 0; font-size: 1.6rem; }
.lexp_txt, .cbanner_txt { margin-bottom: .3rem; }
.consumer_banner { font-family: 'Pretendard-SemiBold'; font-size: 1.6rem; position: relative; }
/* #howStart { overflow-y: auto; height:100vh; height: 100svh; display: flex;
  flex-wrap: wrap; align-content: center; align-items: center; } */
/* .start_bg { align-content: center; } */
/* .start_img1 { margin-top: 30%; } */
/* .start_img2 { margin-top: 10%; margin-bottom: 10%; } */
/* .start_button {
  background-color: #0e6ca5; width: 70%; color: white; margin-left: 15%; padding: 3% 0;
  text-align: center; font-size: 1.8rem; font-weight: 600; border-radius: 1rem; cursor: pointer;
  margin-top: 2rem; }
.start_img3 { margin-top: 5%; }
.ch_title1 { font-family: 'Pretendard-Black'; font-size: 4rem; text-align: center; }
.ch_title2 { font-family: 'Pretendard-semiBold'; font-size: 3.6rem; text-align: center; margin: 1rem 0; } */
/* // 시작페이지 // */


#howQna { /*background-color: #262628;*/background-color: var(--BGcolor); color:#000; }  /* 230511  040919 262628 */
/* #howQna { padding-bottom:5rem; padding-top:8rem; } */
#howQna { overflow-y: auto; height:100vh; height: 100svh; }
#howQna::-webkit-scrollbar { display: none; }
#howQna { -ms-overflow-style: none; /* 인터넷 익스플로러 */ scrollbar-width: none; /* 파이어폭스 */}

body #container { background-color: var(--BGcolor); color:#000; } /* 230511  040919 */
body #container #header { background-color: var(--bgcolor); }

#footer, #f_footer { position:absolute; width:100%; bottom:0; }
#footer {
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  max-width: 450px;
  left: 50%;
  transform: translateX(-50%);
}
#f_footer { max-width:450px; margin:0 auto; }
#f_footer .step_btn { display: flex; justify-content: center; gap: 2%; padding: 0.5rem 0; }
#f_footer .stepbtn { width: 47%; padding: 1rem; text-align: center; font-size: 1.3rem; cursor: pointer; }
button.rst_btn { background: #383849; border: 0.1rem solid #383849; color: #fae100; font-weight: bold; }
button.shr_btn.stepbtn { background: #fae100; color: #000; font-weight: bold; }

/* //// 모달 팝업 //// */
#modalWrap {
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  max-width:450px;
  overflow: auto; /* Enable scroll if needed */
  background-color: #171c32; /* Black w/ opacity */
}

#modalContent { height:100%; }

#modalHead {
  height:0%;
  margin: 0 auto;
  background-color: #eeeeee;
}

#modalBody {
  height:100%;
  margin: 0 auto;
  background-color: #171c32;
}

/*#modalWrap .md_rolling { overflow: auto; }*/

.modalbtn { position:absolute; }

.md-slide_div, .md-slide, .md_rolling, .md-slide .slick-list, .md-slide .slick-track { height:100%; }
.md_rolling_i1, .md_rolling_i2, .md_rolling_i3, .md_rolling_i4 { height:100%; }
.md_rolling_i1, .md_rolling_i2, .md_rolling_i3 { background-color:#eee; }
.md_rolling_i4 { background-color:#579FEB; }

.md_rolling_img img { width: 100%; max-width: 450px; }
/* ////////////// */

/* //// 슬라이더 이동 //// */
#modalWrap .slick-dots { position: absolute; top:4%; left: 50%; margin: 0; padding: 0; transform: translateX(-50%); z-index:1; height: 2rem; } /*마진패딩 초기화 */
#modalWrap .slick-dots li { list-style: none; float: left; margin-right: .5rem;} /* 가로배치, 점들 사이의 간격 */
#modalWrap .slick-dots li:last-child { margin-right:0px; }
#modalWrap .slick-dots li button { background: #58CCFF; opacity: 0.7; width: 1.3rem; height: 1.3rem;  border-radius: 50%; border: none;  text-indent: -9999px;} /* 원 모양 */
#modalWrap .slick-dots li:hover button { background: #58CCFF; opacity: 1;} /*마우스를 올렸을 때 */
#modalWrap .slick-dots li.slick-active button { background: #1675FB; opacity: 0.7; width:5rem; border-radius: 1rem;} /*현재슬라이드 위치 표시*/
#modalWrap .slick-dots li.slick-active:hover button { opacity: 1;}

.modalbtn { position: absolute; z-index: 10;right: 6%; top: calc(4% - .5rem); cursor: pointer; }
.modal_skip { color: black; font-weight: 600; padding: 0.5rem;}
.modal_skip:hover { color:#fff}
/* ////////////// */

/* 인트로 */
.search_word { position:absolute; color:white; background-color: white; font-size:.8rem; z-index:-10; }
/* //////////////// */

/* //// 질문 //// */
.fa-solid.fa-circle.white_circle { color:#fff; }
/* .qna_div { padding:0 5rem; } */
.qna_div, .qna_00-1, .qna_00-2 { padding:5rem 5rem 5rem 5rem; }
#qna_17.qna_div { padding:4rem 1rem 0rem 1rem;  }
.question { padding-bottom: 2rem; border-bottom: solid .2rem #c2c2c2; margin-bottom: 2rem; }
#question_17.question { padding: 0rem 3rem 2rem 3rem; word-break: keep-all;
  overflow-wrap: break-word; }

.pagenum { padding-bottom:1rem; display:none; }
.pageall { border-bottom:solid .4rem #c2c2c2; width:100%; }
.pagecur { border-bottom:solid .4rem #18a8f1; z-index:1; }
.pagecur1 { width:11%; }
.pagecur2 { width:22%; }
.pagecur3 { width:33%; }
.pagecur4 { width:44%; }
.pagecur5 { width:55%; }
.pagecur6 { width:66%; }
.pagecur7 { width:77%; }
.pagecur8 { width:88%; }
.pagecur9 { width:100%; }
.pagebar { padding-bottom:5rem; }

.qna_17 .pagenum { padding: 0 3rem 1rem 3rem; }
.qna_17 .pagebar { margin: 0rem 3rem; }
.qna_17 .pagebar { padding-bottom:0; }
.qna_17 .pagetitle { padding: 0 3rem 1rem; color: #0e6ca5; font-size: 1.5rem; }
.qna_17 .page_explan { padding-top: 1rem; font-size: 1.4rem; }

#when_buy { width:100%; height:3rem; padding: 0 1rem; }
.when_buy_select { color:#777; }

select#when_buy {
  -webkit-appearance: none;  /* 크롬 화살표 없애기 */
  -moz-appearance: none; /* 파이어폭스 화살표 없애기 */
  appearance: none;  /* 화살표 없애기 */
  display: inline-block;
  border: 1px solid #dbdbdb;
  width: 100%;
}

.select_renewal{
  background: url(/img/arrow_down_24px.png) calc(100% - 7px) center no-repeat ;
  border-radius: 6px;
}

.input-text {
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}

#select_whenbuy { width:100%; font-size:1.6rem; color:#787878; }
.select_choice { border: .1rem solid #787878; padding: .5rem 1rem; border-radius: .6rem; cursor:pointer; }
.sel_choice_txt { width:97%; }
.sel_choice_arrow { width:3%; padding:0 .5rem; }
.sel_arrow { width:100%; }
.select_ex { margin: 1rem 0; border: .1rem solid #dbdbdb; border-radius: .6rem; cursor:pointer; color:#000;
  box-shadow: 1px 1px 4px #dbdbdb;
  border-top: 0.1rem solid rgba(200, 200, 200, 0.4);
  border-left: 0.1rem solid rgba(200, 200, 200, 0.4); }
.select_ex_txt { padding:.1rem 1rem; }
.select_ex_txt:hover { color:#fff; background-color:#1172c4; box-sizing:border-box; }



.q_num { color:#1187cf; font-size:1.9rem; font-weight: 700; }
.q_txt { font-size:2rem; font-weight:800; line-height:2.4rem; padding: 1rem 0; }
.q_explan { font-weight:400; font-size: 1.5rem; }

.ex_btn_group { flex-wrap: wrap; gap: 1rem; }
.ex_btn_group li { width: 100%; }
.ex_btn, .etc_btn, .dontcare_btn { padding:1rem 1.4rem; border:.1rem solid #bbb; color:#000; background-color:#fff;
  border-radius:1rem; font-size: 1.4rem; font-weight: 600; text-align: left; }
.ex_btn.select, .etc_btn.select, .dontcare_btn.select { border:.1rem solid rgba(47,59,132,0.4); background-color:rgba(184,233,255,0.4); color:#1187CF; }
button.ex_btn.disabled {
  opacity: 0.5;
  cursor: default;
}

.ex_explan_group { padding: 2rem 0; }
.ex_explan_title { padding-bottom: 1rem; font-size: 1.4rem; font-weight: 600; }
.ex_explan_title i { font-size: .7rem; vertical-align: middle; margin-bottom: .4rem; margin-right: .5rem; }
#qna_11 .ex_explan, #qna_12 .ex_explan, #qna_14 .ex_explan, #qna_15 .ex_explan {
  white-space: pre-line; /* 줄바꿈(\n) 인식 */
  padding-left: 1rem;   /* 전체 들여쓰기 */
  text-indent: -.4rem;   /* 첫 줄만 앞으로 빼기 */ }
.ex_explan i { font-size: .7rem; vertical-align: middle; margin-right:.5rem; }
.ex_explan { font-weight: 400; }

.ex_explain_image { width:90%; }
#qna_02 .ex_explain_image, #qna_11 .ex_explain_image { margin:0 auto; }
#qna_11 .ex_btn, #qna_11 .dontcare_btn, #qna_12 .ex_btn, #qna_13 .ex_btn, #qna_15 .ex_btn, #qna_16 .etc_btn { width:100%; }
#qna_12 .ex_btn, #qna_13 .ex_btn { text-align: center;}
.ex_explan_img { width:100%; }

.b_solid { text-decoration: underline; cursor:pointer; color:#000; }

.step_btn { width:100%; }
/* .before_btn { color:#595959; background-color: rgba(231,231,231,1); }
.next_btn { color: rgba(200, 200, 200, 1); background-color: rgba(231, 231, 231, 1); } */
.stepbtn.enabled { color: rgba(50,50,50,1); cursor:pointer;}
.next_btn.enabled { background-color: rgba(163, 220, 249, 1); }
.stepbtn { width: 50%; height:3.5rem; border: 0.1rem solid rgba(47,59,132,0.4); padding: 1rem 0; cursor:default; 
  color: rgba(200, 200, 200, 1); background-color: rgba(231, 231, 231, 1); }

/* QNA_05번 (게임) */
#example_05 { padding-top: 1rem; }
#question_05.question { margin-bottom: 1rem; }
.game_btn { width: 100%; padding: 0.8rem; border:.1rem solid #bbb; color:#000;
  background-color:#fff; border-radius:1rem; font-size: 1.4rem; font-weight: 600;}
.game_btn.select { border:.1rem solid rgba(47,59,132,0.4); background-color:rgba(184,233,255,0.4); color:#1187CF; }
.game_explain { width: 100%; flex-wrap: wrap; gap: .2rem; }
button.game { width:24%; border:.1rem solid var(--botcolor); }
.game_img { width:100%; }
#gamechk { margin-bottom: 1rem; }
.gamechk { background-color: #f9e54d; color:#000; padding:.3rem .6rem; margin:.2rem; font-size:1.2rem; border-radius:0.5rem; }
.gamechk span i { color: red; margin-left:0.4rem; }
.qna_opentalk { margin: 2rem 0; }
.opentalk_img { border-radius: 1rem;}
.searchbox { padding: 1rem 0; border: .1rem solid #eee; display:flex; justify-content: center; width:100%; flex-wrap: wrap;}
.searchgame { padding-top:1rem; width:100%; }
.SearchBorder { width: 92%; align-content: center; }
.SearchIcon { border: .1rem solid #999; padding: .4rem 1rem; border-radius: 1rem; }
input#SearchInput { border: none; width: 84%; height:2.4rem; }
.search_icon { margin-right:.8rem; }
.searchbox .game_explain_div { padding-left:1%; width:99.5%; }
.searchbox .game_explain { width: 100%; flex-wrap: wrap; gap: .2rem; display: flex; align-items: center; }
.searchbox .no_search { display:flex; justify-content: center; color:#777; width:100%; }
input#SearchInput {
  outline:none;
  /* border: 2px solid #4A90E2; /* 포커스 시 테두리 색 변경 */
  /*box-shadow: 0 0 5px rgba(74,144,226,0.5); */ /*빛나는 효과 추가 (선택사항) */
}


/* QNA_07번 (그래픽) */
.graphic_btn { width: 100%; padding: 0.8rem; border:.1rem solid #bbb; color:#000;
  background-color:#fff; border-radius:1rem; font-size: 1.4rem; font-weight: 600;}
.graphic_btn.select { border:.1rem solid rgba(47,59,132,0.4); background-color:rgba(184,233,255,0.4); color:#1187CF; }
.graphic_explain { width: 100%; flex-wrap: wrap; margin:1.6rem 0; gap: .2rem; }
button.graphic { width:24%; border:.1rem solid var(--botcolor); }
.graphic_img { width:100%; }
/* #graphic_chk { margin-top: .6rem; padding:0 4%; } */
#graphic_chk { margin-bottom:1rem; }
.graphic_chk { background-color: #f9e54d; color:#000; padding:.3rem .6rem; margin:.2rem; font-size:1.2rem; border-radius:0.5rem; }
.graphic_chk span i { color: red; margin-left:0.4rem; }

/* QNA12, 13 주관식 */
#qna_13 .ex_explan_title, #qna_15 .ex_explan_title { padding-top: 2rem; padding-bottom:0.2rem; }

/* QNA16 */
#etcchk { margin-bottom: 1rem; }
.etcchk { background-color: #f9e54d; color:#000; padding:.3rem .6rem; margin:.2rem; font-size:1.2rem; border-radius:0.5rem; }
.etcchk span i { color: red; margin-left:0.4rem; }

/* 1차 결과 */
.fst_intro, .fst_pick { border-radius: 1rem;
  box-shadow: 5px 5px 3px #eee;
  border-top: .1rem solid rgba(200, 200, 200, 0.1);
  border-left: .1rem solid rgba(200, 200, 200, 0.1);}
.fst_pick { position:relative; }
.fst_intro .fst_bottom { position:relative; }
.qna_complete_txt { padding: 1rem 1.4rem; font-size:1.6rem; }
.fst_center { padding: 1rem 1.4rem; }
.fst_sel_txt { font-size:1.6rem; }
.fst_bottom_text { padding: 1rem 1.4rem; font-size: 1.5rem; }
.fst_qna_keyword { padding:.4rem 0; }
.fst_keyword_line { display:flex; gap:.4rem; }
.fst_keyword { white-space: normal; display:-webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow:hidden; }
.fst_intro .add_icon { color:#1675FB; cursor: pointer;}
.frslide_intro, .frslide_link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.f1_high_txt, .f2_high_txt, .f3_high_txt { overflow-wrap: break-word; word-break: break-word; }
.fst_highlights { padding: 2rem; font-size: 1.8rem; }
.fpick_bottom { font-size: 1.8rem; padding: 1rem 2rem; }
.pop_info_img { width:100%; position: relative; }
.pop_fst_info { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; cursor:pointer; }
.fst_close { position: absolute; top: 1rem; right: 1.4rem; font-size: 2rem; cursor:pointer; }

.qna_20.qna_div { padding-left:1rem; padding-right:1rem; }
.first_ad { padding: 3rem 5rem; }


/* 1차결과 251212 */
.qna_17 .pagetitle { color: #595959; }
#qna_17 .pageall { border-bottom:solid .4rem #9e9e9e; }
#qna_17 .pagecur { border-bottom:solid .4rem #000; }
.question_title { padding: 5rem 3rem; }
.qtitle { font-family: 'Pretendard-Bold'; font-size: 3.4rem; margin-bottom: .8rem; }
.question_text { padding: 0 3rem; margin-bottom: 4rem; font-size: 2.4rem; font-family: 'Pretendard-Bold'; color: #595959; }
.question_txt { margin-bottom: .4rem; }
.fresult_button { padding: 0 3rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.fs_button { display: flex; width: 100%; text-align: center; }
.fs_btn { font-family: 'Pretendard-Regular'; font-size: 2rem; width: 70%; border-radius: .8rem; padding: 1.4rem 0; cursor: pointer; }
.fs_btn.rec_btn { background-color: #000; color: #fff; }
.fs_btn.eff_btn { border: .1rem solid #c2c2c2; }
/* //////////// */


/* //// 효과 //// */
.slide-top {
	-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-in-bottom {
	-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-1-18 13:33:24
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(3rem);
            transform: translateY(3rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(3rem);
            transform: translateY(3rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);    
    opacity: 1;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2023-1-18 13:9:8
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(3rem);
            transform: translateY(3rem);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(3rem);
            transform: translateY(3rem);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}