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: 35%; }
.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 { 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%);
}

/* //// 모달 팝업 //// */
#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:10%; }
.pagecur2 { width:20%; }
.pagecur3 { width:30%; }
.pagecur4 { width:40%; }
.pagecur5 { width:50%; }
.pagecur6 { width:60%; }
.pagecur7 { width:70%; }
.pagecur8 { width:80%; }
.pagecur9 { width:90%; }
.pagecur10 { 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 { 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 { border:.1rem solid rgba(47,59,132,0.4); background-color:rgba(184,233,255,0.4); color:#1187CF; }

.ex_explan_group { padding: 2rem 0; }
.ex_explan_title { padding-bottom: 1rem; font-size: 1.4rem; font-weight: 600; }
.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; }
.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; }


/* 1차 결과 */
.qna_17.qna_div { padding-left:1rem; padding-right:1rem; }

.first_ad { padding: 3rem 5rem; }
/* //////////// */


/* 1차결과 260114 */
.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 3.2rem;  }
.qtitle { font-family: 'Pretendard-Bold'; font-size: 3.4rem; margin-bottom: .8rem; color: #595959; }
.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%; }
.fs_btn {
  font-family: 'Pretendard-Regular';
  font-size: 1.7rem;
  width: 100%;
  border-radius: .8rem;
  padding: 1.4rem;
  cursor: pointer;
  border: .1rem solid rgba(0, 0, 0, 0.15);
  font-weight: 600;
  color: #595959;
}
/* .fs_btn.rec_btn { border-color: #000; } */
.fs_btn .f_black { font-family: 'Pretendard-Black';}
.fsbtn_text.fsbtn_sub { margin-top: .4rem; align-items: center; font-size: 1.4rem; font-weight: 600; color: #000; }
.Right_fsbtn {
  color: #000;
  font-weight: 500;
  font-size: 1.6rem;
}
/* //////////// */


/* //// 효과 //// */
.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);
  }
}