@charset "utf-8";
/* CSS Document */
*{padding: 0; margin: 0}
input.radio {width:13px;height:13px; vertical-align:top; padding:0px; margin:0px;}
ul,li{padding:0; margin:0; list-style:none;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0} 
img,fieldset,iframe{border:0 none}
dl,ul,ol,menu,li{list-style:none}
img, input, button, select, textarea {vertical-align:middle;}
button {overflow:visible;margin:0;padding:0;border:none;background:0;vertical-align:middle;cursor:pointer;}
button::-moz-focus-inner,  
input::-moz-focus-inner{border:0;padding:0;}
.blind {clip: rect(0 0 0 0);  height: 1px;  margin: -1px;  overflow: hidden;  position: absolute;   width: 1px;}
table {border-collapse: collapse; border-spacing: 0;}

/* 다국어 폰트 정의 - 구글 웹폰트 로딩하지 않음 */
*:lang(ko)        { font-family: 'NanumGothic', '나눔고딕', 'Malgun Gothic', '맑은 고딕', 'Noto Sans CJK KR', "Noto Sans KR", Arial, Helvetica, sans-serif; }
*:lang(ja)        { font-family: 'Yu Gothic', '游ゴシック', osaka, 'Noto Sans CJK JP', "Noto Sans JP", 'Meiryo', 'メイリオ', 'MS PGothic', 'ＭＳ Ｐゴシック', Arial, Helvetica, sans-serif; }
*[lang="ko"]      { font-family: 'NanumGothic', '나눔고딕', 'Malgun Gothic', '맑은 고딕', 'Noto Sans CJK KR', "Noto Sans KR", Arial, Helvetica, sans-serif; }
*[lang="ja"]      { font-family: 'Yu Gothic', '游ゴシック', osaka, 'Noto Sans CJK JP', "Noto Sans JP", 'Meiryo', 'メイリオ', 'MS PGothic', 'ＭＳ Ｐゴシック', Arial, Helvetica, sans-serif; }

/* 모달_유튜브 */
.modal_BG {display:flex; position:fixed; top:0;  right:0;  bottom:0;  left:0;  z-index:999; align-items:center;  justify-content:center;  background-color:rgba(0, 0, 0, 0.5);  box-sizing:border-box;}
.modal_BG .modal_inner {background-color: #000;  border-radius: 1rem;  box-sizing: border-box;  display: flex;  flex-direction: column;    overflow: hidden;  height:420px;   position: relative; width:700PX;}	
.modal_BG .modal_header {flex: 0 0 auto; box-sizing: border-box;  text-align: center; font-size: 1.2rem }	
.modal_BG .modal_header > img{width: 100%}
.modal_BG .modal_content { box-sizing: border-box; max-height:45rem; padding:.5rem;  overflow:hidden; height:420px; width: 700PX;   position: relative;}	
.btn-modal-close {height:4rem; width: 5rem; position: absolute;  right: -0.5rem;  top: -0.5rem;    z-index: 10;}
.modal_BG.youtube >  .modal_inner > .btn-modal-close:after, .modal_BG.youtube >  .modal_inner > .btn-modal-close:before {content: "";  height: 2px; border-bottom: 2px solid #FFF; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 3px 0px; bottom: 0;  left: 0;  margin: auto;  position: absolute;   top: 0;  width:2rem;}	
.btn-modal-close:before {right: -2px; transform: rotate(45deg);}	
.btn-modal-close:after {right: 0;  transform: rotate(-45deg);}	


/* 모달 유튜브 이외 컨텐츠 */
.modal_BG.content >  .modal_inner{ background-color: #FFF; width: 90%; max-width:400PX; height: max-content;  max-height: 600px;}
.modal_BG.content >  .modal_inner > .modal_content{padding: 0; width: 100%; height: 100%; max-width: 600px; max-height: 45rem; font-size:22px;color: #5e5e5e }

/* 모달 test cnrk */
.modal_BG.content >  .modal_inner > .modal_content .step1{text-align: center; padding-top:35px;  font-weight:500; line-height:125%}
.modal_BG.content >  .modal_inner > .modal_content .step2{text-align: center; padding-top:35px;  font-weight:500; line-height:125%}
.modal_BG.content >  .modal_inner > .modal_content img{width: 90%; max-width:250px}
.modal_BG.content >  .modal_inner > .modal_content .hl{ color: #5088ce; font-weight:500}
.modal_BG.content >  .modal_inner > .modal_content .hl_b{ color: #f571b6; font-weight:800; font-size:29px}

.modal_BG.content >  .modal_inner > .modal_content .step2 .btn_confirm{box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 5px;width:50%; margin: 0 auto;min-width:230px }
.modal_BG.content >  .modal_inner > .modal_content .step2 .btn_confirm a{ display:block;width:100%; background:#5092f6; cursor:pointer; color: #fff; padding: 9px 0  10px 0; margin: 30px 0;border-radius: 4px;}

.modal_BG.content >  .modal_inner > .modal_content > img{width: 100%}
.modal_BG.content >  .modal_inner > .btn-modal-close:after, .modal_BG.content >  .modal_inner > .btn-modal-close:before {content: "";  height: 2px; border-bottom: 2px solid #000; bottom: 0;  left: 0;  margin: auto;  position: absolute;   top: 0;  width:2rem;}	
@media (max-width: 1024px) {
	.modal_BG .modal_inner {height:360px; width:600PX;}	
	.modal_BG .modal_content {height:360px; width:600PX;  }
}
@media (max-width: 768px) {
	.modal_BG .modal_inner {height:260px; width:450PX;}	
	.modal_BG .modal_content {height:260px; width:450PX;}
}
@media (max-width: 480px) {
	.modal_BG .modal_inner {height:210px; width:350PX;}	
	.modal_BG .modal_content {height:210px; width:350PX;  }
}
@media (max-width: 350px) {
	.modal_BG .modal_inner {height:180px; width:300PX; min-width:300PX;}	
	.modal_BG .modal_content {height:180px; width:300PX; min-width:300PX; }
}


/* contents */
a{color:#666;text-decoration:none;text-overflow:ellipsis;-o-text-overflow:ellipsis;}
a:link,a:hover,a:active{text-decoration:none;}

.sec01 {background-color: #efe8fb;}
.sec02 {background-color: #f5f5f5;}
.sec03 {background: linear-gradient(160deg, rgba(29, 109, 184, 1) 0%, rgba(13, 155, 202, 1) 100%);}
.sec04 {background-color: #fff}

.aa {background: linear-gradient(160deg, rgba(155, 107, 254, 1) 0%, rgba(247, 137, 224, 1) 100%);}

.eventimg{position:relative; max-width:830px; height:auto; margin:0 auto;}
.eventimg img{ height:auto;width:100%; margin:0 auto; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

*, *:before, *:after {box-sizing: inherit;}
.align-left {float: right;margin-left: 20px;}
.align-right {float: right;margin-left: 20px;}
.slide-in {opacity: 0;transition: all .5s;}
.align-left.slide-in {transform: translateY(30%) scale(0.95);}
.align-right.slide-in {transform: translateX(30%) scale(0.95);}.slide-in.active {opacity: 1;transform: translateX(0%) scale(1);}


/* default */
/* topbg */
.eventtopbg{ position:relative;width:100%; max-height:1300px; height:115vw;  background: #3C475B url(../images/top_bg_01.jpg) top center; background-size: cover; }

.topimg.mobile{ display: none}
.eventtopbg .topimg{position:relative; margin: auto; width: 100%; height: 100%; max-width:1318px; box-sizing: border-box; }
.eventtopbg .topimg > .title{position: absolute; left: 50%; transform: translate(-50%, 0); width:100%; z-index: 2}
.eventtopbg .topimg > .title img{width: 100%; max-width:1118px;}

.eventimg  .btn_start {position: absolute;top: 85%;width: 55.6%;max-width: 529px;left: 50%;transform: translate(-50%, 0);z-index: 100;}
.eventimg .btn_start a img{ width:100%}

.eventtopbg .btn_start {position: absolute;top: 85%;width: 44.6%;max-width: 529px;left: 50%;transform: translate(-50%, 0);z-index: 100}
.eventtopbg .btn_start a img{ width:100%}


.topimg .bubble01{position: absolute; top:36.3%; left:57.7%;  width:35%; max-width: 266px;  z-index: 5}
.topimg .bubble01 img{width: 100%;  max-width:680px; animation: bubble 2s infinite 1s;}

 @keyframes bubble{
  0% {transform: translatey(0px);}
  50% {transform: translatey(-8px);}
  100% {transform: translatey(0px);}  
}


.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.3s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/* sectst test */
.sectst { padding-bottom:60px; background: #fcfcfc}

.q_box{position:relative;width:100%; padding-top: 20px;}
.q_box .timeNum{width:90%;max-width:690px;margin:0 auto; text-align: right; color: #6f7885; font-size: 23px; font-weight: 600}
.q_box .timeNum .red{width:90%;max-width:690px;margin:0 auto; text-align: right; color: #ff7885; font-size: 23px; font-weight: 600}
.q_box .timeNum img{ width:9%; max-width:32px; vertical-align: middle}
.q_box .pagebar{ position: relative;width:90%;max-width:690px;margin:0 auto; padding: 10px 0 0 0; height: 45px}
.q_box .pagebar .bar{ position: absolute; top: 10%; width: 100%; height: 10px; background:#f3f3f3; border-radius: 10px }
.q_box .pagebar .currentbar{position: absolute;top: 10%;  height: 10px; background:#54bcf8; border-radius: 10px}
.q_box .pagebar .icobar{position: absolute;top: -5px;width: 30px;  height: 30px;background:url(../images/ico_bar.png) no-repeat 0 0;  }
.q_box .pagebar .numbar{position: absolute;top: 40%;  height: 10px; text-align: center;}
.q_box .quiz_box{width:90%;max-width:710px;margin:0 auto;box-sizing: border-box;  border-radius:15px; position:relative;background-color: #fff; letter-spacing: -0.05em;box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 5px; padding-bottom: 0px;}
.q_box .quiz_box .quiz_txt{padding-bottom:20px;  position: relative; z-index:3;}
.q_box .quiz_box .q{color: #2d314e; line-height: 22px; padding-top:30px; text-align: center;font-size: 20px;padding: 25px 20px 0 20px;}
.q_box .quiz_box .quiz_jp{color: #4681ea; font-size: 29px; padding: 25px 20px 25px 20px; text-align: center;font-weight: bold;}
.q_box .quiz_box .bt_ans{position:relative;  background: #fff;border-radius: 6px; width: 90%; margin: 0 auto; margin-bottom: 18px; text-align: center; border: 1px solid #b4c9f0;font-weight: bold;}
.q_box .quiz_box .bt_ans a{ display: block;padding: 10px 18px; font-size: 26px; color:#444;font-weight: 500; }
.q_box .quiz_box .bt_ans a.sel, .q_box .quiz_box .bt_ans a:hover{border-radius: 10px;box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 5px;background:#f0f5ff url(../images/ico_check.png) no-repeat 0 2px; }
.q_box .btn_pre { position: absolute; left:-15px; top: 50%; z-index:4; border: 1px solid #4682ea; box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 5px;background:#fff url(../images/ico_pre.png) no-repeat 5px 4px; border-radius: 4px;}
.q_box .btn_pre a{ display:block;width:30px; height:30px; cursor:pointer;}
.q_box .btn_pre a:hover{background:#e7f1fd url(../images/ico_pre.png) no-repeat 5px 4px;border-radius: 4px;}
.q_box .btn_next { position: absolute; right:-15px; top:50%;  z-index:4; border: 1px solid #4682ea; box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 5px;background:#fff url(../images/ico_next.png) no-repeat 7px 4px; border-radius: 4px;}
.q_box .btn_next a{ display:block;width:30px; height:30px;cursor:pointer;}
.q_box .btn_next a:hover{background:#e7f1fd url(../images/ico_next.png) no-repeat 7px 4px;border-radius: 4px;}
.q_box .txt_next { position: absolute; right:-59px; top:44.5%;z-index:4;  background: #54bcf8; border-radius: 3px;box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 5px; color: #fff; padding:0px 7px 3px 7px; font-size:18px}



/* secrst result */
.secrst { padding:55px 0 60px 0;width:90%;max-width:730px;margin:0 auto;}

.rst_txt{ text-align: center; padding-bottom: 35px }
.rst_txt .rst_tit{ font-size: 38px; padding-bottom: 25px; color: #22263b}
.rst_txt .rst_tit img{ width:60%; max-width:322px; min-width:190px; vertical-align: bottom}
.rst_txt .name{ text-decoration: underline; font-weight: bold}
.rst_txt .rst_result{ padding: 25px 0; font-size: 24px; line-height: 24px}
.rst_txt .rst_result .an_txt{ display: inline-block; padding: 1px 35px 3px 15px; border: 1px solid #cbcbcb; border-radius: 20px;background:url(../images/ico_an.png) no-repeat right 0; font-size: 16px; vertical-align: middle; color: #666}
.rst_txt .rst_result .do_txt{ display: inline-block; padding: 1px 35px 3px 15px; border: 1px solid #cbcbcb; border-radius: 20px;background:url(../images/ico_do.png) no-repeat right 0; font-size: 16px; vertical-align: middle; color: #666}
.rst_txt .rcomd_box{ background: #fcf9f1; border-radius: 7px; padding: 30px 20px; width: 80%; margin: 0 auto;box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 5px;}
.rst_txt .rcomd_box .rcomd_txt1 { color: #646464;}
.rst_txt .rcomd_box .rcomd_txt2{font-size: 24px; line-height: 130%}

.rst_txt .n1_txt{color: #f63324; font-weight:bold}
.rst_txt .n2_txt{color: #0c70e2; font-weight:bold}
.rst_txt .n3_txt{color: #14ab42; font-weight:bold}
.rst_txt .n4_txt{color: #f7660f; font-weight:bold}
.rst_txt .n5_txt{color: #753aec; font-weight:bold}

.flex_wr3{display:flex;	flex-wrap: wrap}
.indexWrap .box_plus{ position: relative; border-radius: 7px; overflow: hidden;  background: #fff; width:19.2%; box-sizing: border-box;  margin-bottom:15px;cursor: default; margin:0.9% 0.4%; border: 1px solid #e8e8e8}

.indexWrap .box_plus .txt_tit{padding:0; color: #fff; text-align: center; font-weight: bold; padding: 6px 0; font-size: 21px}
.indexWrap .box_plus .bg_n5{background: #c4bcea; }
.indexWrap .box_plus .bg_n4{background: #f1ccbf; }
.indexWrap .box_plus .bg_n3{background: #c1edc7; }
.indexWrap .box_plus .bg_n2{background: #b3d8f5; }
.indexWrap .box_plus .bg_n1{background: #f6c6d8; }

.indexWrap table{width:100%;  color: #8c8c8c;  }
.indexWrap table tr.line{ border-bottom: 1px solid #e8e8e8 }
.indexWrap table td{ padding:4px 0 6px 0; text-align:center;font-size:2.6vmin;  }
.indexWrap table td.tdline{border-right: 1px solid #e8e8e8}
.indexWrap table td .rst_o{font-weight: 700; color: #555}
.indexWrap table td .rst_x{font-weight: 700; color: #f24747}

.btn_area { margin: 0 auto;  width: 56%; min-width: 250px;  display: block;  text-align: center;  box-sizing: border-box;  height: 50px; padding:30px 0 50px 0}
.btn_area .btn_box {width: 48%; margin: 1%; float: left; border-radius: 7px; box-sizing: border-box; border: 1px solid #008ee8; background: #FFF;}
.btn_area .btn_box a {display: block;padding: 11px 0 12px 0;font-weight: 600;font-size: 21px; color: #008ee8}
.btn_area .btn_box.blue { border: 1px solid #008ee8; background: #008ee8;}
.btn_area .btn_box.blue a {color: #fff;}
.btn_area .btn_box img{ verticlal-align:middle}


/* explain 01, 02, 03, 04 */

/* sec01 */
.sec01 { padding-bottom:50px}
ul.point-wrap{justify-content: center; align-items: center; column-gap: 1.5%; width:95%; margin:0 auto; }
.sec01 .recmd_tit{ font-size: 38px; padding:55px 0 40px 0;width:90%;max-width:730px;margin:0 auto;text-align: center; color: #22263b}
.sec01 .recmd_tit img{ width:70%; max-width:443px; min-width:220px; vertical-align: bottom}
.sec01 .recmd_tit .name{ text-decoration: underline; font-weight: bold}


/* sec02 */
.sec02{ position:relative;width:100%; max-height:662px; height:87.5vw;  background:url(../images/img_02m.png) no-repeat top center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
.sec02 .btn_down{ width: 70%; margin: 0 auto; padding-top: 61%; max-width: 314px}
.sec02 .btn_down a img{ width:100%}


/* sec03 */
.sec03 { position: relative}
.sec03 .btn_apply {position: absolute;top: 85%;width: 44.6%;max-width: 400px;left: 50%;transform: translate(-50%, 0);z-index: 100;}
.sec03 .btn_apply a img{ width:100%}


/* sec04 */

.sec04 { position: relative;padding:30px 0 60px 0;width:96%;max-width:810px;margin:0 auto; text-align: center}
.sec04 .expl_box{margin:0 auto;box-sizing: border-box;  border-radius:15px; position:relative;background-color: #eef5fc; letter-spacing: -0.05em;padding-bottom: 0px; padding: 20px 20px}
.sec04 .expl_tit img{ width:50%; max-width:327px; min-width:190px; padding: 10px 0 30px 0 }
/* 카테고리 탭 */
.sec04 .tab_select {position: relative; margin:0 auto; width:290px;  margin-bottom:10px;font-family:'Noto Sans kr'; }
.sec04 .tabbox {position: relative;white-space: nowrap; padding: 2px; border: 1px solid #008ee8; -webkit-border-radius: 30px;    border-radius: 30px;}
.sec04 .tabbox ul{width:100%; height: 40px; display:block; text-align:center}
.sec04 .tabbox ul li{width:49%; display:block; float:left;   padding:6px 0px; }
.sec04 .tabbox ul li a{color:#008ee8; font-weight:bold;  font-size: 18px;width: 100%; }
.sec04 .tabbox ul li a.tab_all span.on{ background-color: #008ee8;padding:4px 36px 6px 36px;   -webkit-border-radius: 19px;    border-radius: 19px; color:#FFF; }
.sec04 .tabbox ul li a.tab_wrong span.on{ background-color: #008ee8; padding:4px 30px 6px 30px; -webkit-border-radius: 19px;    border-radius: 19px; color:#FFF; }

.sec04 ul.test_box{letter-spacing: -0.05em;padding:20px 22px; text-align: left; color: #545454}
.sec04 ul.test_box li{position:relative; padding-bottom: 25px}
.sec04 ul.test_box .result_o{position: absolute; z-index:4; width: 40px; height:50px; top:-2px;left: -5px; background:url(../images/ico_ox.png) no-repeat 0 0;background-size:260% ;}
.sec04 ul.test_box .result_x{position: absolute; z-index:4; width: 75px; height:79px; top:-2px;left: -9px;background:url(../images/ico_ox.png) no-repeat -43px 0;background-size:160% ;}
.sec04 ul.test_box .q{padding-bottom:10px; font-size:18px}
.sec04 ul.test_box .q span{ font-weight: bold; color:#0c7fe1}
.sec04 ul.test_box .guiz_jp{padding-bottom:10px;color: #0c7fe1; font-weight: 600; font-size:22px }
.sec04 ul.test_box .quiz_txt{padding-bottom:10px;position: relative}
.sec04 ul.test_box .my_pick{padding-bottom:10px;position: relative}
.sec04 ul.test_box .quiz_txt .ans_num{color:#FF5A5F}
.sec04 ul.test_box .quiz_ex{ padding: 10px 10px 10px 50px;position: relative; background:#fafdff; border-radius: 4px}
.sec04 ul.test_box .quiz_ex .ex_tit{position: absolute; top: 10px; left: 10px; display: block; background-color:#FFF; color: #3f96e4;  text-align: center; border-radius: 4px; border:1px solid #3f96e4; padding:0px 5px; font-size: 13px}


@media (max-width: 1024px) {
	.q_box .txt_next {right:-18px;padding:0px 7px 3px 7px; }
	.eventtopbg{ height:115vw;   }

	}

@media (max-width: 768px) {
	#footer{padding-bottom:10%;}
	
	.eventtopbg{display: none}
	.topimg.pc{ display: none}
	.topimg.mobile{ display:block; }
	.rst_txt .rst_tit{ font-size: 28px}
	.rst_txt .rst_tit img{ width:50%; max-width:292px;}
	.sec02 .btn_down{ width: 65%; padding-top: 68%; max-width: 270px}
	.sec03 .btn_apply {top: 85%;width: 52.6%;max-width: 400px;}
}

@media(max-width:480px){
	
	/* test */
	.sectst { padding-bottom:35px}
	.q_box .timeNum{ font-size: 15px; font-weight: 500}
	.q_box .pagebar{padding: 5px 0 0 0;height: 40px}
	.q_box .pagebar .numbar{top: 50%; font-size: 12px;}
	.q_box .quiz_box .q{padding: 15px 20px 0 20px;font-size: 16px;}
	.q_box .quiz_box .quiz_jp{font-size: 18px; padding: 10px 10px 15px 10px; }
	.q_box .quiz_box .bt_ans{margin-bottom:8px;width: 70%;}
	.q_box .quiz_box .bt_ans a{padding: 3px 18px 2px 18px; font-size: 16px; font-weight: 500; line-height: 30px }
	.q_box .quiz_box .bt_ans a.sel, .q_box .quiz_box .bt_ans a:hover{background:#f0f5ff url(../images/ico_check.png) no-repeat 2px -3px; background-size:13%}
	.q_box .txt_next {right:-15px;top:42.5%; padding:0px 4px 3px 4px; font-size:14px}
	
	
	/* result */
	.secrst { padding:15px 0 30px 0}
	.indexWrap .box_plus{width:32.5%;}
	.indexWrap table td{ font-size:4.6vmin; padding:0}
	.indexWrap .box_plus .txt_tit{padding: 2px 0 3px 0; font-size: 15px}
	.rst_txt{padding-bottom: 10px }
	.rst_txt .rcomd_box{padding: 11px 20px; width: 80%;}
	.rst_txt .rst_result{ padding: 20px 0;}
	.rst_txt .rst_tit{ font-size: 18px; padding-bottom: 0px}
	.rst_txt .rst_tit img{ max-width:232px;}
	.rst_txt .rst_result{ padding: 15px 0; font-size: 17px; line-height: 18px}
	.rst_txt .rst_result .an_txt{font-size: 14px}
	.rst_txt .rst_result .do_txt{font-size: 14px}
	.rst_txt .rcomd_box .rcomd_txt1 {font-size: 13px}
	.rst_txt .rcomd_box .rcomd_txt2{font-size: 17px;}
	.btn_area { padding-top:10px}
	.btn_area .btn_box a {padding: 4px 0 4px 0;font-size: 16px;}
	.btn_area .btn_box a img{width:17%}
	
	.sec01 .recmd_tit{ font-size: 24px; padding:35px 0 30px 0;}
	.sec02 .btn_down{ width: 65%; padding-top: 68%; max-width: 240px}
	.sec03 .btn_apply{top: 85%;width: 61.6%;max-width: 400px;}
	
	/* explain */
	.sec04 .expl_tit img{ padding: 2px 0 15px 0 }
	.sec04 .tab_select {width:210px; padding-bottom: 0}
	.sec04 .tabbox {padding: 2px; }
	.sec04 .tabbox ul{height: 32px; }
	.sec04 .tabbox ul li{padding:2px 2px; }
	.sec04 .tabbox ul li a{font-size: 14px; }
	.sec04 .tabbox ul li a.tab_all span.on{ padding:4px 26px 5px 26px}
	.sec04 .tabbox ul li a.tab_wrong span.on{ padding:4px 19px 5px 18px}
	
	.sec04 ul.test_box{padding:8px 0px;}
	.sec04 ul.test_box .result_o{top:-3px;left: -4px; background-size:240% ;}
	.sec04 ul.test_box .result_x{top:-2px;left: -4px;background-size:130% ;}
	
	.sec04 ul.test_box .q{padding-bottom:5px; font-size:14px}
	.sec04 ul.test_box .guiz_jp{padding-bottom:5px;font-weight: 600; font-size:17px }
	.sec04 ul.test_box .quiz_txt{padding-bottom:10px}
	.sec04 ul.test_box .my_pick{padding-bottom:10px;font-size:14px}
	.sec04 ul.test_box .quiz_ex{ padding: 5px 7px 7px 41px;font-size:14px}
	.sec04 ul.test_box .quiz_ex .ex_tit{ top: 6px; left: 7px;padding:0px 3px;}

	
}

@media(max-width:360px){
	
	.q_box .btn_pre { left:-10px; }

	.q_box .btn_next {right:-10px;}
	

	.eventimg  .btn_start {width: 65.6%;}
	.q_box .pagebar{padding: 5px 0 0 0;height: 38px}
	.q_box .pagebar .numbar{top: 53%; font-size: 12px;}
	
	.q_box .quiz_box .q{padding-top:5px;font-size: 14px;}
	.q_box .quiz_box .quiz_jp{font-size: 18px; padding: 0px 10px 10px 10px; }
	.q_box .quiz_box .bt_ans{margin-bottom: 6px;width: 70%; line-height: 24px}
	.q_box .quiz_box .bt_ans a.sel, .q_box .quiz_box .bt_ans a:hover{background:#f0f5ff url(../images/ico_check.png) no-repeat 2px -2px; background-size:16%}
	
	.sec02 .btn_down{ width: 57%; padding-top: 70%; max-width: 170px}
	.sec03 .btn_apply{top: 85%;width: 67.6%;max-width: 400px;}
}