/** Responsive CSS **/
@media screen and (max-width: 1240px) {
  /* 1240px 이하일 때 적용될 스타일 */
  
  /* 레이아웃 */
	#viewport {
		width:100%; left:0; top:0; margin-left:0; margin-top:0;border-radius: 0;
	}
	#viewport .view {padding:20px 20px;}
    #btn_close {
        background:rgba(0,0,0,0.5); border-radius:5px; 
        right:10px; top: 10px; margin-left:0; z-index:100; left: auto;
        width:30px; height:30px; 

    }
    
    .flex-nav a  {
            border-radius: 5px; width: 50px; height: 50px; position: fixed; top:50%; z-index:999; overflow:hidden; opacity:1; cursor: pointer; color:rgba(255,255,255,0.8); *text-shadow:1px 1px 0 rgba(255,255,255,0.3); background:rgba(0,0,0,0.5);
    }
    .flex-nav a:before {
        font-size: 50px;
        line-height: 50px;
    }

    /* step1 */
    .step1-warp { grid-template-columns: repeat(2, minmax(0, 1fr));}
    .step1-warp .box .img img {
        width: auto;
        height: 100%;
    }
  .step2-warp .warp.f_ML {
    min-width: auto;
  }
}
@media screen and (max-width: 768px) {
  .step4-warp {
    padding-bottom: 200px;
  }
}

@media screen and (max-width: 480px) {
  /* 480px 이하일 때 적용될 스타일 */
  .step2-warp .box li {
    width: 100% !important;
  }
  h2 {
		font-size: 18px !important;
	}
	.step2-warp .warp .box ul {
			display: grid;
	}
	.step2-warp .warp.f_MC .box ul,
  .step2-warp .warp.f_MA1000 .box ul {
			width: 100% !important;
	}
  .step2-warp .warp.f_MO .box,
  .step2-warp .warp.f_MX .box {
    width: 100%;
  }
  .step2-warp .warp.f_MX {
    min-width: auto;
  }
  .step3-warp .photo_wrap,
  .step3-warp .color_wrap,
  .step4-warp .photo_wrap,
  .step4-warp .result_wrap {
    width: 100%;
    float: none;
    min-height: auto;
  }
  .step4-warp .result_wrap .form_mail .privacy-info {
    margin-top: 20px;
    width: 95% !important;
    float: left !important;
  }
  .step4-warp .result_btn {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}