html, body { background-color: #f2f2f2; }
/* #howQna { padding:0.3rem 0.6rem; width: calc(100% - 1.2rem); } */
#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%; }

#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; }

/* //// 모달 팝업 //// */
#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;} /*마진패딩 초기화 */
#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 { 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번 (게임) */
.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;}

/* 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; }
/* //////////// */


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