@media screen and (max-width: 480px) {
	.new-intro, .final-chart { background-size: cover; }
	
	.new-intro { width: 100vw; display: flex; align-items: center; justify-content: center; }
	.new-intro .middle-cir { width: 80vw; height: 80vw; max-width: 315px; max-height: 315px; left: 53%; /*left: 0; top: 0; position: relative; margin: 0;*/ }
	.new-intro .middle-cir h1 { font-size: 32px; }
	.new-intro .middle-cir h2 { font-size: 24px; }
	.new-intro .middle-cir h4 { font-size: 14px; }
	.new-intro .middle-cir p { font-size: 14px; }
	.new-intro .middle-cir .str-bt a { font-size: 14px; }
	
	.middle-cir { width: 90vw; height: 90vw; }
	
	.quiz-header { width: 100vw; }
	.quiz-header .head { width: calc(100vw - 20px); padding: 10px; display: flex; }
	.quiz-header .head .logo-2 { width: 100vw; }
	.quiz-header .head .social-icon { width: 100vw; display: flex; flex-direction: column; text-align: right; }
	.quiz-header .head .social-icon li { margin: 0 0 3px 0; padding: 0; height: 20px; }
	
	.quiz-body { width: 100vw; }
	.quiz-body .center { width: 100vw; }
	.quiz-body .menu-box { display: none; width: 100vw; }
	.quiz-body .clue-box { top: 35px !important; }
	.quiz-body .clue-box .question1 { width: 100vw; }
	.quiz-body .clue-box .question1 .qust-tittle { width: 100vw; margin-top: 10px !important; }
	.quiz-body .clue-box .question1 .q1-clue-box { width: 100vw; margin-top: 25px; }
	.quiz-body .clue-box .question1 .q1-clue { display: flex; }
	.quiz-body .clue-box .question1 .q1-clue li { width: 100vw; height: auto; text-align: center; }
	.quiz-body .clue-box .question1 .q1-clue li img { width: 80%; height: 80%; max-width: 350px; max-height: 350px; margin: 0 auto; }
	.quiz-body .clue-box .question1 .needcluebtn { right: 29%; top: 20px; }
	.quiz-body .clue-box .question1 .cir-main { width: 100vw; height: 85vw; margin: 10px 0 0; }
	.quiz-body .clue-box .question1 .submit-box { width: calc(100vw - 20px); margin: 0 0 20px 20px; }
	
	.quiz-body .clue-box .question1 .ans-result { width: calc(100vw - 20px); margin-left: 20px; }
	.quiz-body .clue-box .question1 .ans-result h1 { width: calc(100vw - 20px); margin-top: 0; font-size: 18px; }
	.quiz-body .clue-box .question1 .ans-result h1 span { font-size: inherit; }
	.quiz-body .clue-box .question1 .ans-result h2 { font-size: 16px; }
	.quiz-body .clue-box .question1 .ans-result p { width: calc(100vw - 20px); line-height: 20px; font-size: 14px; }
	
	.final-chart .center { width: 100vw; }
	.final-chart .result-final { width: 100vw; height: 100vh; display: flex; align-items: center; }
	#myDoughnut { width: 100vw; margin: 0 !important; position: relative; left: 0; }
	/*.f-rest { width: 90vw; height: 90vw; border-radius: 100vw; padding: 10px; top: 7px; left: 7px; }*/
	.f-rest { width: calc(100vw - 20px); height: calc(100vw - 20px); border-radius: calc(100vw - 20px); padding: 10px; top: 0; left: 0; }
	.f-rest .text-box { width: 100%; }
	.f-rest .text-box h2 { font-size: 18px; }
	.f-rest .text-box p { line-height: 18px; font-size: 14px; }
	.f-rest .text-box .social-icon-chart .social-icon-chart-list { display: flex; }
	
	#wrapper-myDoughnut-canvas { width: 100vw !important; height: 100vw !important; }
	#wrapper-myDoughnut-canvas canvas { margin: 0; }
	#myDoughnut-canvas { width: 100vw !important; height: 100vw !important; }
	.canvas-wrapper { border-radius: 100vw; }
	#myDoughnut-canvas { width: 100vw; height: 100vw; }
	
	.quiz-footer .footer { width: 100vw; }
}