@charset "utf-8"; /* */
/**
* @author CodeClicker
*/


.shop_section06_container {background:#fff; overflow:  hidden;}
.shop_section06_container .main-title-wrapper { text-align: center; margin-bottom: 80px;}
.shop_section06_container .shop_section06_wrapper .shop_section06_title_wrap {margin-bottom:110px;}
.shop_section06_container .shop_section06_wrapper .shop_section06_title_wrap .shop_section06_title { color:#000; font-size:46px; font-weight:700; line-height:60px; text-align:center;}

.shop_section06_wrapper .shop_section06_process_wrap {}
.section06_process_swiper_container { display: flex;  flex-direction: column;  align-items: center;}
.shop_section06_process_wrap .shop_section06_process_content_wrap { position: relative; display: grid; grid-template-columns: repeat(5, 1fr);  align-items: start; padding: 5px; border-radius: 35px; background: #1F272D;}
.shop_section06_process_wrap .shop_section06_process_content_wrap .line_progress {     position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
        border: 1px dashed #D8D8D8;
    width: 86%;
    z-index: 0;}

.shop_section06_process_wrap .shop_section06_process_content_wrap .line_progress:nth-chlid(2) { display: none; }

/* default */
.shop_section06_process_container {padding: 12px 33px; border-radius: 35px; }
.shop_section06_process_container .shop_section06_process_circle 	{  }
.shop_section06_process_circle .shop_section06_process_num {color: #fff; text-align: center; font-size: 20px; font-weight: 600; line-height: 24px; letter-spacing: 1px; }

/* active */
.shop_section06_process_container.POn {  background: #fff; }
.shop_section06_process_container.POn .shop_section06_process_circle {}
.shop_section06_process_container.POn .shop_section06_process_num { color: #1F272D; font-weight: 700;}



.shop_section06_wrapper .shop_section06_process_wrap .shop_section06_process_content_wrap .shop_section06_process_container {    display: flex; flex-direction: column; align-items: center; gap: 34px; z-index: 1;  cursor: pointer;}


.shop_section06_img_wrapper {margin-top: 80px; margin-left: 120px;}

.shop_section06_process_title_wrap { text-align: center;  font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: 0.8px;}

.shop_section06_img_slide.swiper-slide { position: relative;  display: flex; align-items: center; overflow: hidden; max-width: 920px;  height: 450px; border-radius: 35px; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); cursor: pointer;  }

.shop_section06_img_slide .process_bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

.shop_section06_img_slide .process_cotents { position: absolute; left: 40px; top: 40px; }
.shop_section06_img_wrapper { gap:45px; }

.shop_section06_img_slide .process_cotents .step_title { color: #9A9A9A; font-size: 24px; font-weight: 600; line-height: 30px; margin-bottom: 13px; }
.shop_section06_img_slide .process_cotents .process_title { font-size: 32px; font-weight: 700; line-height: 40px; }



@media screen and (max-width: 768px) {
	.shop_section06_container .shop_section06_wrapper .shop_section06_title_wrap .shop_section06_title { font-size: 20px; font-weight: 800; line-height: 28px; overflow-x: hidden;}
	.shop_section06_process_container { padding: 10px 17px; }
	.shop_section06_process_container.POn .shop_section06_process_num { color: #fff; }

	.shop_section06_container .shop_section06_wrapper .shop_section06_title_wrap { margin-bottom: 56px; }

	.shop_section06_wrapper .shop_section06_process_wrap {padding:0; }	
	.shop_section06_process_wrap .shop_section06_process_content_wrap { display: flex;  flex-direction: row; overflow-x: scroll; width: 100%;         background: #fff; border-radius: 0px; gap: 10px;}

	.shop_section06_process_circle .shop_section06_process_num { font-size: 14px; color: #000; 	width: 100%;
        display: block;
        white-space: nowrap}


	.shop_section06_wrapper .shop_section06_process_wrap .shop_section06_process_content_wrap .shop_section06_process_container {background: #E3E3E3;}
	.shop_section06_wrapper .shop_section06_process_wrap .shop_section06_process_content_wrap .shop_section06_process_container.POn { background: #1F272D; }  
	.shop_section06_process_title_wrap {	font-size: 11px; line-height: 12.373px; letter-spacing: 0.55px;}

	.shop_section06_process_wrap .shop_section06_process_content_wrap .line_progress {   top: 16px;  left: 50%; height: 1px;  width: 79%;}
	.shop_section06_process_wrap .shop_section06_process_content_wrap .line_progress:nth-child(2) { top: 101px; left: -15px; transform: translateX(0); width: 64%;}


	.shop_section06_img_wrapper { gap:0; margin-top: 70px; margin-left: 0;}

	.shop_section06_img_slide.swiper-slide { max-height: 230px; overflow: unset; padding: 0 15px; box-shadow: unset;}
	.shop_section06_img_slide .process_cotents { left: 30px; top: 70px;}
	
	.shop_section06_img_slide .process_cotents .step_title {font-size: 14px; line-height: 11.752px;}
	.shop_section06_img_slide .process_cotents .process_title { font-size: 16px; line-height: 19.587px;}
	.shop_section06_img_slide .process_bg { position: relative; object-fit: cover; border-radius: 15px;  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);}
	
	
	
	
	
	
	
}