@charset "utf-8";

@media only screen and (max-width: 640px) {
	
/*============================
#mainPanelArea
============================*/
#mainPanelArea {}
#mainPanelArea img { left: -30px; transform: translateY(-50%); width: inherit; }
#mainPanelArea .category {}
#mainPanelArea .category span {}
#mainPanelArea h1.middleTitle {}
#mainPanelArea .english {}

/*============================
#leadArea
============================*/
#leadArea {}
#leadArea .copy {}

/*============================
#stepArea
============================*/
#stepArea { margin-top: 20px; }
#stepArea .step1 { padding: 30px 0 40px; }
#stepArea .step1:before {}
#stepArea .step1 .sub {}
#stepArea .step1 .titleArea {}
#stepArea .step1 .titleArea h2.main {}
#stepArea .step1 .detail { flex-direction: column; gap: 15px; margin-top: 20px; }
#stepArea .step1 .detail .image { border-radius: 10px; width: 100%; height: 100%; }
#stepArea .step1 .detail .image img {}
#stepArea .step1 .detail .contets { border-top: none; margin-top: 0; }
#stepArea .step1 .detail .contets .copy { margin-top: 0; }
#stepArea .step1 .detail .contets .note { margin-top: 10px; }
#stepArea .step1 .detail .contets .note a {}

#stepArea .step2 { padding: 30px 0 40px; margin-top: 0; }
#stepArea .step2:before {}
#stepArea .step2 .sub {}
#stepArea .step2 .titleArea {}
#stepArea .step2 .titleArea h2.main {}
#stepArea .step2 .detail { flex-direction: column; gap: 15px; margin-top: 20px; }
#stepArea .step2 .detail .image { border-radius: 10px; width: 100%; height: 100%; }
#stepArea .step2 .detail .image img {}
#stepArea .step2 .detail .contets { border-top: none; margin-top: 0; }
#stepArea .step2 .detail .contets .copy { margin-top: 0; }
#stepArea .step2 .detail .contets .note { margin-top: 10px; }
#stepArea .step2 .detail .contets .note a {}

#stepArea .step3 { padding: 30px 0 40px; margin-top: 0; }
#stepArea .step3:before {}
#stepArea .step3 .sub {}
#stepArea .step3 .titleArea {}
#stepArea .step3 .titleArea h2.main {}
#stepArea .step3 .detail { flex-direction: column; gap: 15px; margin-top: 20px; }
#stepArea .step3 .detail .image { border-radius: 10px; width: 100%; height: 100%; }
#stepArea .step3 .detail .image img {}
#stepArea .step3 .detail .contets { border-top: none; margin-top: 0; }
#stepArea .step3 .detail .contets .copy { margin-top: 0; }
#stepArea .step3 .detail .contets .note { margin-top: 10px; }
#stepArea .step3 .detail .contets .note a {}

#stepArea .step4 { padding: 30px 0 40px; margin-top: 0; }
#stepArea .step4:before {}
#stepArea .step4 .sub {}
#stepArea .step4 .titleArea {}
#stepArea .step4 .titleArea h2.main {}
#stepArea .step4 .detail { flex-direction: column; gap: 15px; margin-top: 20px; }
#stepArea .step4 .detail .image { border-radius: 10px; width: 100%; height: 100%; }
#stepArea .step4 .detail .image img {}
#stepArea .step4 .detail .contets { border-top: none; margin-top: 0; }
#stepArea .step4 .detail .contets .copy { margin-top: 0; }
#stepArea .step4 .detail .contets .note { margin-top: 10px; }
#stepArea .step4 .detail .contets .note a {}

#stepArea .step5 { padding: 30px 0 40px; margin-top: 0; }
#stepArea .step5:before {}
#stepArea .step5 .sub {}
#stepArea .step5 .titleArea {}
#stepArea .step5 .titleArea h2.main {}
#stepArea .step5 .detail { flex-direction: column; gap: 15px; margin-top: 20px; }
#stepArea .step5 .detail .image { border-radius: 10px; width: 100%; height: 100%; }
#stepArea .step5 .detail .image img {}
#stepArea .step5 .detail .contets { border-top: none; margin-top: 0; }
#stepArea .step5 .detail .contets .copy { margin-top: 0; }
#stepArea .step5 .detail .contets .note { margin-top: 10px; }
#stepArea .step5 .detail .contets .note a {}

#stepArea .step6 { padding: 30px 0 40px; margin-top: 0; }
#stepArea .step6:before {}
#stepArea .step6 .sub {}
#stepArea .step6 .titleArea {}
#stepArea .step6 .titleArea h2.main {}
#stepArea .step6 .detail { flex-direction: column; gap: 15px; margin-top: 20px; }
#stepArea .step6 .detail .image { border-radius: 10px; width: 100%; height: 100%; }
#stepArea .step6 .detail .image img {}
#stepArea .step6 .detail .contets { border-top: none; margin-top: 0; }
#stepArea .step6 .detail .contets .copy { margin-top: 0; }
#stepArea .step6 .detail .contets .note { margin-top: 10px; }
#stepArea .step6 .detail .contets .note a {}

#stepArea .step7 { padding: 30px 0 40px; margin-top: 0; }
#stepArea .step7:before {}
#stepArea .step7 .sub {}
#stepArea .step7 .titleArea {}
#stepArea .step7 .titleArea h2.main {}
#stepArea .step7 .detail { flex-direction: column; gap: 15px; margin-top: 20px; }
#stepArea .step7 .detail .image { border-radius: 10px; width: 100%; height: 100%; }
#stepArea .step7 .detail .image img {}
#stepArea .step7 .detail .contets { border-top: none; margin-top: 0; }
#stepArea .step7 .detail .contets .copy { margin-top: 0; }
#stepArea .step7 .detail .contets .note { margin-top: 10px; }
#stepArea .step7 .detail .contets .note a {}

#stepArea .step8 { padding: 30px 0 40px; margin-top: 0; }
#stepArea .step8:before {}
#stepArea .step8 .sub {}
#stepArea .step8 .titleArea {}
#stepArea .step8 .titleArea h2.main {}
#stepArea .step8 .detail { flex-direction: column; gap: 15px; margin-top: 20px; }
#stepArea .step8 .detail .image { border-radius: 10px; width: 100%; height: 100%; }
#stepArea .step8 .detail .image img {}
#stepArea .step8 .detail .contets { border-top: none; margin-top: 0; }
#stepArea .step8 .detail .contets .copy { margin-top: 0; }
#stepArea .step8 .detail .contets .note { margin-top: 10px; }
#stepArea .step8 .detail .contets .note a {}

}