/* 초기화 */
h1, h2, h3, h4, h5, h6, th, td {font-weight: normal;}
i {font-style: normal;}
* {box-sizing: border-box; margin:0; padding:0;}
table { padding:0; border:0; border-spacing: 0; border-collapse: collapse;}
button {background:none;}
/* 공통 */
.flex {display: flex;}
.flex.btwn {justify-content: space-between;}
.flex.col {flex-direction: column;}
.flex.center_j {justify-content: center;}
.flex.center_a {align-items: center;}
.bl_txt {color:#1C8FED !important;}
.red_txt {color:#F14738 !important;}
.gr_txt {color:#949494 !important;}
.gr2_txt {color:#6c6c6c !important;}
.gr3_txt {color:#B9B9B9 !important;}
.gn_txt {color:#8EDD13 !important; font-family: 'noto-B'; font-size: 20px;}
.posr {position: relative;}

.recommd_wrap {width: 100%; height: 100vh; overflow: hidden; background:#EEFED6;}
.recommd_wrap h2 {font-family: 'noto-B'; font-size: 32px; color: #3A3A3A;}
.recommd_wrap h3 {font-family: 'noto-B'; font-size: 20px; color: #3A3A3A; letter-spacing: -0.8px;}
.recommd_wrap h4 {font-family: 'noto-B'; font-size: 18px; color: #3A3A3A;}
.recommd_wrap h5 {font-family: 'noto-B'; font-size: 16px; color: #3A3A3A;}
.recommd_wrap img {width:100%; display: block;}
.recommd_wrap a {cursor: pointer;}

.recommd_wrap .logo {position: absolute; top: 16px; left: 16px; width: 120px; z-index: 10;}
.recommd_wrap .logo a {width: 100%; display: block;}

/* 모바일에서 스크롤 시 */
.recommd_wrap.scrolled .logo {z-index: 1;}
.recommd_wrap.scrolled .choose_sec .tit_wrap {z-index: unset;}


/* 팝업 모바일*/
/* 스펙 체크 팝업 */
.popup_Modal {width: 100%; height: 100vh; position: fixed; top: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); z-index: 50; display: none;}
.popup_Modal .pop_inner {width: 100%; border-radius: 25px 25px 0px 0px; background: #fff; position: absolute; bottom: 0; padding: 20px 16px 40px; box-sizing: border-box;}
.popup_Modal .pop_inner h3 {text-align: center; margin-bottom: 20px;}
.popup_Modal .pop_cont{width: 100%; max-height: calc(85dvh - 80px); min-height: 35dvh; height: 100%;
 overflow-y: auto; padding-bottom: 80px; box-sizing: border-box;}
.popup_Modal .pop_cont ul {border: 1px solid #D8D8D8; border-radius: 15px; padding: 16px; box-sizing: border-box; margin: 0 auto 12px; display: grid; grid-template-columns: repeat(1, 1fr); gap: 8px;}
.popup_Modal .pop_cont ul li {gap: 8px;}
.popup_Modal .pop_cont ul li span {font-size: 16px; font-family: 'noto-R';}
.popup_Modal .pop_cont ul li span:nth-child(1) {color: #6C6C6C;}
.popup_Modal .pop_cont ul li span:nth-child(2) {text-align: right; color: #3A3A3A;}
.popup_Modal .pop_cont a.bl_txt {text-decoration: underline; font-size: 15px; font-family: 'noto-R';} 
.spec_pop .pop_inner button {width: calc(100% - 32px); position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);}
.popup_Modal a.close_X {width: 24px; height: 24px; background: url(//image5.compuzone.co.kr/img/images/svg_icon/3A3A3A/icon_line_close_24.svg) 50% 50%/contain no-repeat; position: absolute; top: 20px; right: 20px;}

/* 공유하기 팝업 */
.share_pop .pop_inner{border-radius: 10px; width: calc(100% - 50px); top: 50%; left: 50%; bottom: unset; transform: translate(-50%,-50%); padding: 20px 0 16px; max-width: 450px;}
.share_pop .pop_inner h3{border-bottom: 1px solid #d8d8d8; padding-bottom: 20px;}
.popup_Modal .share_inner .lst {display: flex; flex-wrap: wrap; gap: 42px; justify-content: center; padding: 0 40px; box-sizing: border-box;} 
.popup_Modal .share_inner .lst li {width: 60px; text-align: center; } 
.popup_Modal .share_inner .lst li button{padding: 0 !important;}
.popup_Modal .share_inner .lst li .share i { display: block; width: 100%; color: #6C6C6C; white-space: nowrap; font-family: '맑은고딕'; font-style: normal; font-size: 13px;} 
.popup_Modal .share_inner .lst li .share i:before {display: block!important; margin: 0 auto; margin-bottom: 7px; content: ""; width: 60px; height: 60px;} 
.popup_Modal .share_inner .lst li .share i.kakao:before {background: url('//image5.compuzone.co.kr/img/images/product_detail/btn_kakao_24.png') center center/cover no-repeat;} 
.popup_Modal .share_inner .lst li .share i.facebook:before {background: url('//image5.compuzone.co.kr/img/images/product_detail/btn_facebook_24.png') center center/cover no-repeat;} 
.popup_Modal .share_inner .lst li .share i.twitter:before {background: url('//image5.compuzone.co.kr/img/images/product_detail/btn_x_24.png') center center/cover no-repeat;} 
.popup_Modal .share_inner .lst li .share i.url:before {background: url('//image5.compuzone.co.kr/img/images/product_detail/btn_url_24.png') center center/cover no-repeat;} 


/* 로딩중 */
.load_wrap {display: none;}
.load_wrap.on {display: block;}
.loading {width: 100%; height: 100vh; background: linear-gradient(#E1FFFF, #EEFED6); padding: 0 16px; box-sizing: border-box; gap: 20px; position: absolute; top: 0; left: 0; z-index: 100;}
.loading .flex {gap: 8px; text-align: center;}
.loading p {font-family: 'noto-R'; font-size: 15px;}
.recommd_wrap .load_obj {position: relative; width: 150px; height: 150px; animation: load 1s infinite linear;}
.recommd_wrap .load_obj span:nth-child(1) {width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.recommd_wrap .load_obj span:nth-child(2) { width: 100px; height: 100px; border-radius: 50%; background: #fff; clip-path: path("M50,0 A50,50 0 1,1 50,100 A50,50 0 1,1 50,0 Z M50,25 A25,25 0 1,0 50,75 A25,25 0 1,0 50,25 Z"); clip-rule: evenodd; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

@keyframes load {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

/* 원형 오브제 */
.donut {position: absolute; top: 60px; left: 50%; transform: translateX(-50%) rotate(90deg); width: 280px; height: 280px; border-radius: 50%; background: linear-gradient(#E9FFC8, #C5FEFE); clip-path: path("M140,0 A140,140 0 1,1 140,280 A140,140 0 1,1 140,0 Z M140,70 A70,70 0 1,0 140,210 A70,70 0 1,0 140,70 Z"); clip-rule: evenodd; }
.donut.blur {background: transparent; clip-path: path("M140,0 A140,140 0 1,1 140,280 A140,140 0 1,1 140,0 Z M140,70 A70,70 0 1,0 140,210 A70,70 0 1,0 140,70 Z"); clip-rule: evenodd; backdrop-filter: blur(5px); display: none; z-index: 1;} 
.donut.right {top: -140px; left: unset; right: -70px; transform: translate(0,0) rotate(90deg);}

.choose_sec .tit_wrap.step1 .donut {animation:ani1 4s linear infinite;}
.choose_sec .tit_wrap .donut.blur {animation:ani2 0.5s 0.3s ease-in-out both; display: block;}
.choose_sec .tit_wrap.step1 .tit1 {display: flex;}
.choose_sec .tit_wrap.step2 .tit2 {display: flex;}
.choose_sec .tit_wrap.step3 .tit3 {display: flex;}

@keyframes ani1 {
  0%, 100% {transform: translateX(-50%) rotate(90deg);}
  50% {transform: translateX(-50%) rotate(360deg);}
}
@keyframes ani2 {
  0%{opacity: 1; }
  100% {opacity: 0;}
} 
@keyframes ani3 {
  0%{transform: scale(0); opacity: 0;};
  80% {transform: scale(1); opacity: 1;}
}
@keyframes ani4 {
  0%, 100%{transform: translateY(0);}
  50% {transform: translateY(20px);}
}

/* PC 노출 오브제 */
.recommd_wrap .obj_wrap {position: absolute; top: 0; right: 0;}
.recommd_wrap .obj_wrap span {position: absolute;}
.recommd_wrap .obj_wrap span:nth-child(1) {width: 100px; top: 175px; right: 345px; z-index: 1;}
.recommd_wrap .obj_wrap span:nth-child(2) {width: 300px; top: 30px; right: 100px;}
.recommd_wrap .obj_wrap span:nth-child(3) {width: 100px; top: 225px; right: 70px;}

/* 선택영역 공통 */
.choose_sec {position: relative; width: 100%; height: 100%;}
.choose_sec .content {position: absolute; bottom: 0;}
.choose_sec .box {background: #fff; border-radius: 15px 15px 0px 0px; box-shadow: 0px 0px 16px #00000008; padding: 16px; box-sizing: border-box; position: relative; z-index: 2;}
.choose_sec .list ul { display: flex; gap: 8px; flex-wrap: wrap;}
.choose_sec .content .list ul.flexwrap {flex-wrap: wrap ;}
.choose_sec .content .list ul.flexwrap li{padding:20px; justify-content: center;}
.choose_sec .list ul li {width: 100%; padding: 16px; box-sizing: border-box; background: #F9F9F9; border-radius: 10px; display: flex; cursor: pointer; border: 2px solid transparent;}
.choose_sec .list ul li i{width: 32px; height: 32px; display: block;}
.choose_sec .tit_wrap {padding: 80px 16px 40px; box-sizing: border-box; background: linear-gradient(#E1FFFF, #EEFED6);}
.choose_sec .tit_wrap .flex {position: relative;}

.choose_sec .gray_box {width: 100%; padding: 20px 30px; box-sizing: border-box; }
.choose_sec .gray_box p{color: #d8d8d8;}
/* 질문 1 */
.choose_sec .tit1 {gap: 7px; display: none; text-align: center;}
.choose_sec .tit1 p{font-family: 'noto-M'; font-size: 14px;}
.choose_sec .content1 {width: 100%; display: none;}
.choose_sec .content1.on {display: block;}
.choose_sec .content1 .box > div:nth-child(1) {margin-bottom: 16px;}
.choose_sec .content1 .list {overflow-y: auto; height: calc(100vh - 300px); padding-bottom: 90px; box-sizing: border-box;}
.choose_sec .content1 .list ul li { gap: 12px; display: flex; align-items: center;}
.choose_sec .content1 .list ul li div {gap: 4px; word-break: keep-all;}
.choose_sec .content1 .list ul li div p {font-family: 'noto-M'; font-size: 13px;}

/* 질문 2 */
.choose_sec .tit_wrap.step2 {padding: 80px 16px 16px;}
.choose_sec .tit2 {display: none;}
.choose_sec .tit2 button {font-family: 'noto-M'; font-size: 12px; padding: 5px 8px; box-sizing: border-box; border: 1px solid #D8D8D8; background: #f9f9f9; border-radius: 30px; color: #3a3a3a;} 
.choose_sec .content2 {width: 100%; transform: translateY(100%); transition: all 0.3s;}
.choose_sec .content2.on, .choose_sec .content3.on {transform: translateY(0%);}
.choose_sec .content2 .box {height: calc(100vh - 125px); display: flex; flex-direction: column;}
.choose_sec .content2 .box > div:nth-child(1) {margin-bottom: 16px;}
.choose_sec .content2 .list {overflow-y: auto; padding-bottom: 90px; box-sizing: border-box;}
.choose_sec .content2 .list ul li {gap: 16px; display: flex; align-items: flex-start; flex-direction: column;}
.choose_sec .content2 .list ul li div:nth-child(1) {gap: 12px; align-items: center; word-break: keep-all; text-align: left;}
.choose_sec .content2 .badge_list {flex-wrap: wrap; gap: 4px; width: 100%;}
.choose_sec .content2 .badge_list span {font-size: 12px; padding: 4px 8px; box-sizing: border-box;border-radius: 5px; background: #fff;}

/* 제품영역 */
.choose_sec .select_box {display:none; width:max-content; background:#fff; border-radius: 10px; position:absolute; top:30px; left:-215px; z-index: 3; box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.5); overflow:hidden;}
.choose_sec .select_box ul {display:flex; flex-direction: column; gap:10px; padding:20px;}
.choose_sec .select_box li a {font-size:16px; font-family:'noto-R'; color:#1a1a1a;}
.choose_sec .select_box li.on a {font-family:'noto-M';}
.choose_sec .content3 .select_box {left: unset; right: 0;}
.choose_sec .tit_wrap.step3 {padding: 62px 16px 20px; position: fixed; top: 0; width: 100%; z-index: 5;}

.choose_sec .tit3 {flex-direction: column; align-items: center; gap: 8px; display: none;}
.choose_sec .tit3 .spec_btn {font-size: 12px; color: #fff; padding: 5px 8px; box-sizing: border-box; background: #8EDD13; border-radius: 30px; font-weight: bold; text-align: center;}
.choose_sec .tit3 .arrow {display: block; width:16px; height:16px; margin-left:4px; background:url('//image5.compuzone.co.kr/img/images/svg_icon/3A3A3A/icon_line_down_24.svg') center center/contain; position:relative; cursor: pointer;}
.choose_sec .content3 {width: 100%; transform: translateY(100%); transition: all 0.3s; z-index: 2;}
.choose_sec .content3 .top {border-radius: 15px 15px 0px 0px; padding: 16px; box-sizing: border-box; background: #fff;}
.choose_sec .content3 .top p.total {font-family: 'noto-B'; font-size: 14px; color: #3a3a3a;}
.choose_sec .content3 > .box {padding: unset; width: 100%; height: 100vh; overflow-y: auto; padding-top: 145px; background: unset; border-radius: unset;}

.choose_sec .content3 .filter_m_wrap {gap: 16px;}
.choose_sec .content3 .filter_m:nth-child(2):before {content: ''; width: 1px; height: 12px; background: #d8d8d8; position: absolute; top: 50%; left: -9px; transform: translateY(-50%);}
.choose_sec .content3 .filter_m {position: relative;} 
.choose_sec .content3 .filter_m a {font-family:'noto-M'; font-size: 14px; color: #3a3a3a;} 
.choose_sec .content3 .filter_m a i {width: 18px; height: 18px; display: block;}
.choose_sec .content3 .filter_m a .icon1 {background: url(//image5.compuzone.co.kr/img/images/svg_icon/3A3A3A/icon_line_down_12.svg) 50% 50% /12px no-repeat;}
.choose_sec .content3 .filter_m a .icon2 {background: url(//image5.compuzone.co.kr/img/images/svg_icon/3A3A3A/icon_line_array_24.svg) 50% 50% /contain no-repeat;}

.content3 .prod_area {min-height: calc(100% - 52px); padding: 0 16px 130px; box-sizing: border-box; background: #fff;}
.content3 .prod_area > ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 12px;}
.content3 .prod_area .imgbox {width: 100%; height: auto; position: relative; border-radius: 10px; overflow: hidden;} 
.content3 .prod_area .imgbox::before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(150, 134, 134, 0.03);} 
.content3 .prod_area .keyword {padding: 5px 8px; box-sizing: border-box;  position: absolute; bottom: 0; left: 0; background: #1C8FED; border-radius:0 10px 0 10px;}  
.content3 .prod_area .keyword p {font-family: noto-m; font-size: 12px; color: #fff; letter-spacing: -0.24px;}
.content3 .prod_area .prod_info a {gap: 10px; margin-top: 8px; display: flex; flex-direction: column;}
.content3 .prod_area .name {font-family: 'noto-R'; font-size: 15px; color:#3A3A3A; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; margin-bottom: 2px; max-height:42px; line-height:21px;}
.content3 .prod_area .detail_wrap .grade_warp {gap: 16px;}
.content3 .prod_area .grade_warp span {width: 12px; height: 12px; background: url(//image5.compuzone.co.kr/img/images/svg_icon/Fill/icon_fill_light_star.svg) 50% 50%/contain no-repeat; display: inline-block;}
.content3 .prod_area .detail_wrap p {font-family: 'spoqa R'; color: #3A3A3A; font-size: 14px; position: relative;}
.content3 .prod_area .detail_wrap p.flex {gap: 4px;}
.content3 .prod_area .detail_wrap p:nth-child(2)::before {content: ''; width: 1px; height: 12px; background: #d8d8d8; position: absolute; top: 50%; left: -9px; transform: translateY(-50%);}
.content3 .prod_area .badge_wrap {gap: 4px; margin-top: 4px; flex-wrap: wrap;}
.content3 .prod_area .badge_wrap span{width: max-content; font-family: '맑은고딕'; font-weight: bold; font-size: 12px; color: #6c6c6c; padding: 3px 8px; box-sizing: border-box; border-radius: 5px; background: #f9f9f9; text-align: center; display: block;}
.content3 .prod_area .num {font-family: spoqa m; font-weight: bold; font-size: 16px;}
.content3 .prod_area .price_ori {font-family: spoqa r; font-size: 14px; text-decoration: line-through; position: relative; display: none;}
.content3 .prod_area .price {color: #3A3A3A; font-size: 16px; font-family: spoqa m; font-weight: bold;  margin-left: 4px; position: relative;}
.content3 .prod_area .btn_price{background:#fff url(https://image5.compuzone.co.kr/img/images/svg_icon/6C6C6C/icon_line_down_12.svg)50% 50%/12px no-repeat; width:18px; height:18px; cursor:pointer; border-radius: 50%; border: 1px solid #D8D8D8; vertical-align: sub; display: none;}
.content3 .prod_area .btn_price:hover{background:#6c6c6c url(https://image5.compuzone.co.kr/img/images/svg_icon/FFFFFF/icon_line_down_12.svg)50% 50%/12px no-repeat; border: 1px solid #FFFFFF;}
.content3 .prod_area .btn_price:hover + .price_Layer{ display:block;}
.content3 .prod_area .price_Layer{ display:none; position:absolute; width:217px; top:28px; right:0; z-index:99; padding:18px; border:1px solid #555; box-shadow:0 3px 8px rgba(0, 0, 0, 0.2); background-color:#fff; font-size:13px; font-family:'맑은고딕'; color:#555; box-sizing:border-box;}
.content3 .prod_area .price_Layer dl {display: flex; justify-content: space-between; align-items: center;}
.content3 .prod_area .price_Layer .org{padding-bottom:8px; border-bottom:2px solid #eee;}
.content3 .prod_area .price_Layer dd{ text-align:right; font-size:16px; font-weight:bold; white-space: nowrap;}
.content3 .prod_area .price_Layer dd > em{font-size:15px;}
.content3 .prod_area .price_Layer .dis{padding-top:8px;}
.content3 .prod_area .price_Layer .sum{padding-top:8px; color:#F14738;}
.choose_sec .tit3 .change_btn {padding: 10px 20px; background:#1A1A1A; font-size: 14px; border-radius: 2px; font-family: 'noto-R'; box-sizing: border-box; color: #FFF; line-height: 20px; display: none;}

/* 검색된 상품 없을때 */
.choose_sec .prod_area .no_list {width: 100%; background: #fff; border-radius: 15px; height: calc(100vh - 445px);}
.choose_sec .prod_area .no_list div {height: 100%; gap: 8px;}
.choose_sec .prod_area .no_list i {width: 60px; height: 60px; display: block; background: url(//image5.compuzone.co.kr/img/images/svg_icon/D8D8D8/icon_line_exclamation_mark_circle_48.svg) 50% 50% /contain no-repeat;}

.search {display: none;}
.search_box {display: block; width: 200px; height: 40px; position: relative;}
.search_box > input {width:100%; height:100%; padding:0 50px 0 15px; border:1px solid #d8d8d8; border-radius: 2px; line-height:36px; outline:none;}
.search_box > button {display: inline-block; width: 24px; height: 24px; position: absolute; top: 50%; right: 5px; transform: translateY(-50%); background: transparent url(//image5.compuzone.co.kr/img/images/svg_icon/3A3A3A/icon_line_search_24.svg) center no-repeat;}
.reset_btn {display: inline-block; padding: 0 20px; min-width: 78px; height: 40px; line-height: 40px; background: #fff; border: 1px solid #d8d8d8; border-radius: 2px; text-align: center; outline: none; cursor: pointer; margin-left: 10px;
}

/* 상품 검색 중 로딩 */
.search_load > div {width: 100%; background: #fff; border-radius: 15px; height: calc(100vh - 445px);}
.search_load i{width: 110px; height: 110px; background: url(//image5.compuzone.co.kr/img/images/product_list/productList_N/loading_img3.gif) no-repeat;}

/* 맞춤가 클릭 시 로딩 */
.search_load2 {display: none;}
.search_load2 >div {gap: 18px;}
.search_load2 .load_icon1 {background: url(//image5.compuzone.co.kr/img/images/product_list/productList_N/loading_img1.gif) no-repeat;}
.search_load2 .load_icon2 {background: url(//image5.compuzone.co.kr/img/images/product_list/productList_N/loading_img2.gif) no-repeat;}
.search_load2 p {text-align: center;}

.filter_pc {width: 100%; background: #fff; border-radius: 10px; border:1px solid #D8D8D8; padding: 24px 20px; box-sizing: border-box; display: none;}
.filter_pc li a {width: 100%; padding: 0px 20px; display: block; color: #949494; font-size: 16px; font-family: 'noto-R'; position: relative; cursor: pointer;}
.filter_pc li a::before {content: ''; width: 1px; height: 16px; background: #D8D8D8; position: absolute; top: 50%; transform: translateY(-50%); right: 0;}
.filter_pc li:last-child a::before {display: none;}
.filter_pc li.on a, .filter_pc li:hover a {color: #1A1A1A;} 

/* 제품영역 하단 고정 */
.fix_wrap {width: 100%; position: fixed; bottom: 0; box-shadow: 0px -5px 10px #00000014; border-radius: 20px 20px 0px 0px; background: #fff; padding: 16px 16px 40px; box-sizing: border-box; gap: 8px; z-index: 3;} 
.fix_wrap button img{width: 30px; height: 30px;}
.recommd_wrap .w_btn {min-width: 50px; height: 50px; background: #fff; border: 1px solid #D8D8D8; border-radius: 10px; box-sizing: border-box;}
.recommd_wrap .b_btn {color: #fff; font-size: 16px; font-family: 'noto-M'; text-align: center; padding: 13px; width: 100%; background: #0D6DE3; border-radius: 10px; box-sizing: border-box;}
.recommd_wrap .bk_btn {width: 100%; background: #1A1A1A;  border-radius: 10px; box-sizing: border-box; font-family: 'noto-m'; font-size: 16px; color: #fff; padding: 13px;}

/* 123213 다른추천도 있어요 하단 고정 영역 추가 */
/* 모바일용 */
.fix_btn {width: 100%; position: fixed; bottom: 0; padding: 16px 16px 40px; z-index: 3; background: #fff;}
.recommd_wrap .fix_btn button { height: 50px; display: flex; justify-content: center; align-items: center; gap: 4px; border-radius: 15px;}
.fix_btn i {width: 16px; height: 16px; background: url(//image5.compuzone.co.kr/img/images/svg_icon/FFFFFF/icon_line_next_24.svg)50% 50%/contain no-repeat; display: block; margin-top: 2px;}

/* pc용 */
.reco_btn {width: 100px; border-radius: 10px; background: #fff; display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 20px 0; box-sizing: border-box; position: fixed; z-index: 5; box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.129);}
.reco_btn::before {content: ''; width: 20px; height: 20px; border-radius: 50%; background: #FFF url(//image5.compuzone.co.kr/img/images/svg_icon/3A3A3A/icon_line_plus_12.svg) 50% 50% /12px no-repeat; position: absolute; top: -28px; left: 0; box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.129); transition: all 0.5s;} 
.reco_btn span{width: 50px; display: block;}
.reco_btn p{text-align: center; line-height: 1.5;}
.reco_btn:hover::before {transform: rotate(360deg);}


/* 다른추천도 있어요 팝업 */
.popup_Modal.reco_pop .pop_cont{padding-bottom: 0;}
.popup_Modal .reco_list_wrap {max-height: 292px; overflow-y: auto;}
.popup_Modal .reco_list {width: 100%; height: 92px; border-radius: 10px; padding: 16px; align-items: center; justify-content: space-between; border: 1px solid #D8D8D8; margin-bottom: 8px; box-sizing: border-box; gap: 8px;}
.popup_Modal .reco_list:last-child {margin: 0;}
.popup_Modal .reco_list.on {border: 2px solid #1D8EED;}
.popup_Modal .reco_list .pro_img {width: 60px; height: 60px; display: block; border-radius: 10px; position: relative; overflow: hidden;  flex-shrink: 0; }
.popup_Modal .reco_list .pro_img::before {content: ''; width: 100%; height: 100%;  background: rgba(0, 0, 0, 0.02); position: absolute; top: 0; left: 0;}
.popup_Modal .reco_list div {flex-grow: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0;}
.popup_Modal .reco_list div p {color: #949494; font-family: 'noto-R'; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%;}

@media screen and (max-width: 360px) {
  .recommd_wrap h2 {font-size: 28px;}
}

@media screen and (min-width: 782px) {
  .recommd_wrap .logo {width: 140px;}
  .choose_sec .tit_wrap .donut.right {width: 360px; height: 360px; clip-path: path("M180,0 A180,180 0 1,1 180,360 A180,180 0 1,1 180,0 Z M180,90 A90,90 0 1,0 180,270 A90,90 0 1,0 180,90 Z"); top: -215px; animation: ani4 2s ease-in-out infinite;}
  .choose_sec .tit_wrap.step2 .donut.blur {display: none;}
  .choose_sec .tit_wrap.step3 .donut.blur {display: none;}
  .popup_Modal .pop_cont ul {grid-template-columns: repeat(2, 1fr); gap: 8px 16px;}
  .choose_sec .tit_wrap {padding: 82px 16px 40px;}
  .choose_sec .tit_wrap.step2 {padding: 122px 16px 16px;}
  .choose_sec .tit_wrap.step3 {padding: 122px 16px 20px;}
  .choose_sec .content .list ul li {width: calc(100%/2 - 4px); flex-direction: column; padding: 30px;}
  .choose_sec .content1 .list {height: calc(100vh - 320px); padding: unset;}
  .choose_sec .content1 .list ul li div {align-items: center;}
  .choose_sec .content1 .list ul li div h5{text-align: center;}
  .choose_sec .content1 .list ul li div p {font-size: 14px; text-align: center;}
  .choose_sec .content2 .box {height: calc(100vh - 170px);}
  .choose_sec .content2 .list  {padding: unset;}
  .choose_sec .content2 .list ul li div:nth-child(1) { width: 100%; flex-direction: column; align-items: center; text-align: center;}
  .choose_sec .content2 .list ul li {gap: 8px;}
  .content3 .prod_area > ul {grid-template-columns: repeat(4, 1fr);}
  .choose_sec .list ul li i {width: 36px; height: 36px;}
  .choose_sec .content2 .badge_list {justify-content: center;}
  .choose_sec .content3 > .box {padding-top: 171px;}
  .choose_sec .tit3 {flex-direction: row; justify-content: space-between;}
  .choose_sec .select_box {left: -175px;}
}

@media screen and (min-width: 1024px) {
  .recommd_wrap {overflow-x: hidden; overflow-y: auto; position: relative;}
  .recommd_wrap .logo {top: 40px; left: 40px;}
  .recommd_wrap.bg {background: linear-gradient(#E1FFFF, #EEFED6, #FFF 40%);}
  .recommd_wrap .loading {gap: 40px;}
  .recommd_wrap .loading h3 {font-size: 32px;}
  .recommd_wrap .loading p {font-size: 16px;}
  .recommd_wrap .loading .flex {gap: 20px;}
  .recommd_wrap .load_obj {width: 220px; height: 220px;}
  .recommd_wrap .load_obj span:nth-child(2) {width: 150px; height: 150px; clip-path: path("M75,0 A75,75 0 1,1 75,150 A75,75 0 1,1 75,0 Z M75,37.5 A37.5,37.5 0 1,0 75,112.5 A37.5,37.5 0 1,0 75,37.5 Z");}

  .recommd_wrap h2 {font-size: 48px; text-align: left;}
  .recommd_wrap h3 {font-size: 24px;}
  .recommd_wrap h5 {font-size: 20px;}
  .gn_txt {font-size: 24px;}
  .choose_sec {position: static; width: inherit; height: unset; padding-bottom: 100px;}
  .choose_sec .tit1 p {text-align: left; font-size: 18px;}
  .choose_sec .content1 .list ul li div p {font-size: 16px;}
  .choose_sec .logo {top:40px; left: 40px;} 
  .choose_sec .tit_wrap {padding: 125px 40px 50px;}
  .choose_sec .tit_wrap.step1 .tit1 {align-items: flex-start;}
  .choose_sec .tit_wrap.step1 .tit1 {animation: none;}
  .recommd_wrap .tit1 h2 span {display: block;}
  .recommd_wrap .tit3 h3 {font-size: 32px;}
  .choose_sec .tit3 .arrow { width:24px; height:24px; background:url('//image5.compuzone.co.kr/img/images/svg_icon/3A3A3A/icon_line_down_24.svg') center center/contain;}
  .choose_sec .tit3 .flex {gap: 8px;}
  .choose_sec .tit3 .spec_btn {padding: 10px 20px; background:#1C8FED; font-size: 14px; border-radius: 2px; font-family: 'noto-R'; font-weight: normal; line-height: 20px;}
  .choose_sec .tit3 .share_btn {font-size: 14px; font-family: 'noto-R'; color: #3A3A3A; gap: 4px; margin-right: 10px;}
  .choose_sec .tit3 .share_btn img {width: 20px; height: 20px;}
  .choose_sec .tit_wrap.step3 {padding: 80px 40px 20px; position: relative; overflow: visible; z-index: unset;}

  .choose_sec .tit_wrap .obj_wrap span:nth-child(1), .choose_sec .tit_wrap.step1 .obj_wrap span:nth-child(3){animation:ani3 0.4s ease-in-out both, ani4 2s 0.5s ease-in-out infinite;}
  .choose_sec .tit_wrap .obj_wrap span:nth-child(2) {animation: ani3 0.4s ease-in-out both, ani4 2s 1s ease-in-out infinite;}

  .donut {width: 570px; height: 570px; clip-path: path("M285,0 A285,285 0 1,1 285,570 A285,285 0 1,1 285,0 Z M285,142.5 A142.5,142.5 0 1,0 285,427.5 A142.5,142.5 0 1,0 285,142.5 Z"); top: -33px; left: unset; right: -35px; transform: translate(0,0);}
  .donut.blur {clip-path: path("M285,0 A285,285 0 1,1 285,570 A285,285 0 1,1 285,0 Z M285,142.5 A142.5,142.5 0 1,0 285,427.5 A142.5,142.5 0 1,0 285,142.5 Z");} 
  .choose_sec .tit_wrap .donut.right {width: 500px; height: 500px; clip-path: path("M250,0 A250,250 0 1,1 250,500 A250,250 0 1,1 250,0 Z M250,125 A125,125 0 1,0 250,375 A125,125 0 1,0 250,125 Z");}
  .choose_sec .tit_wrap.step1 .donut.right {display: none;}

  .choose_sec .cont_wrap {width: calc(100% - 200px); height: 675px; border-radius: 20px; overflow: hidden; left: 44%; transform: translateX(-50%); z-index: 1; background: #fff;}
  .choose_sec .cont_wrap.step3 {width: calc(100% - 80px); height: 100%; background: transparent; border-radius: unset; overflow: visible; left: 50%;} 
  .choose_sec .content .box {width: 100%; height: calc(100% - 75px); border-radius: 20px; padding: 20px 30px;}
  .choose_sec .content3 > .box {padding: unset; box-shadow: unset;}
  .choose_sec .content3 .top {background: unset;}
  .choose_sec .content .list {height: 470px;}
  .choose_sec .content .list ul{flex-wrap: nowrap; height: 100%;}
  .choose_sec .content .list ul li {transition: all 0.3s; min-height: 180px; justify-content: normal; padding: 80px 20px 0;}
  .choose_sec .content .list ul li:hover {border: 2px solid #1C8FED; background: #fff;}
  .choose_sec .list ul li i {width: 48px; height: 48px;}
  .choose_sec .content { height: 100%; bottom: unset; top: 0px; border-radius: 20px; overflow: hidden;}
  .choose_sec .content1 {transform: translateY(0%);}
  .choose_sec .content2 {background: #f2f2f2; bottom: 75px; top: unset;}
  .choose_sec .content2.on {bottom: unset;}
  .choose_sec .content2 .badge_list span {border: 1px solid #d8d8d8;}
  .choose_sec .content2.on .gray_box {cursor: pointer;}
  .choose_sec .content3 {height: inherit; border-radius: unset; transform: translateY(0); display: none; overflow: visible;}
  .choose_sec .content3.on {display: block;}
  .choose_sec .content3 .top {padding: unset; gap: 40px;}
  .choose_sec .content3 .top p.total {font-size: 16px;}
  .choose_sec .content3 > .box {height: unset; background: transparent; border-radius: unset;}
  .choose_sec .content3 .prod_area {padding: unset; margin-top: 20px; padding-bottom: 100px; background: unset;}
  .content3 .prod_area > ul {grid-template-columns: repeat(3, 1fr); gap: 32px 16px;}
  .choose_sec .content .list ul.flexwrap li{padding: 0 20px;}

  @keyframes ani1 {
    0%, 100% {transform: translateX(0) rotate(90deg);}
    50% {transform: translateX(0) rotate(360deg);}
  }
  .content3 .prod_area .name {font-family: 'noto-m'; font-size: 16px; margin-top: 0; height: 46px;}
  .content3 .prod_area .num,   .content3 .prod_area .price {font-size: 18px;}
  .content3 .prod_area .pri_wrap {justify-content: space-between;}
  .content3 .prod_area .prod_info a {margin-top: 12px;} 
  .content3 .prod_area .keyword {padding: 5px 10px;}
  .content3 .prod_area .keyword p {font-size: 14px;}
  .content3 .prod_area .btn_price {display: inline-block;}
  .content3 .prod_area .grade_warp span {width: 20px; height: 20px;}
  .content3 .prod_area .detail_wrap p {font-size: 13px;}
  .content3 .prod_area .badge_wrap{margin-top: 12px;}
  .content3 .prod_area .badge_wrap span {color: #949494; border-radius: 17px; padding: 5px 10px;}


  .fix_wrap, .filter_m {display: none;}
  .recommd_wrap.step3 {background: linear-gradient(#EEFED6, #fff 90%); position: static; z-index: 1;}
  .recommd_wrap.step3 .cont_wrap {background: transparent; border-radius: unset; height: inherit;}
  .change_btn, .filter_pc, .content3 .prod_area .price_ori {display: block;}
  .search {display: flex;} 
  .search > div {margin-right: 20px; position: relative;}
  .search .checkbox {display:flex; align-items: center; position:relative; }
  .search input.check[type="checkbox"] {display:none; vertical-align:middle;}
  .search input.check[type="checkbox"] + label.check {color:#1a1a1a; font-size:14px; line-height:1; font-family:Noto-R; cursor:pointer; background-size:contain; display: flex; align-items: center;}
  .search input.check[type="checkbox"] + label.check > i {display:inline-block; width:18px; height:18px; background:url("//image5.compuzone.co.kr/img/images/bsk/simp_checkG.png") center no-repeat; cursor:pointer; vertical-align:middle; margin:0 8px 0 0; background-size:contain;}
  .search input.check[type="checkbox"]:checked + label.check > i {background:url("//image5.compuzone.co.kr/img/images/bsk/simp_checkedB.png") center no-repeat; background-size:contain;}
  .search > div .qu_over {width: 20px; height: 20px; display: inline-block; background:url("//image5.compuzone.co.kr/img/images/svg_icon/6C6C6C/icon_line_question_mark_circle_24.svg") center /contain no-repeat;}
  .search .myP_layer_pop {position: absolute; top: 30px; left: unset; right: 0; transform: translate(0,0);}
  

  /* 팝업 */
  .popup_Modal .pop_inner {width: 410px; top: 50%; left: 50%; bottom: unset; transform: translate(-50%,-50%); padding:30px; border-radius: unset;}
  .popup_Modal .pop_inner h3 {font-size: 18px; padding: 0 0 20px; border-bottom: 1px solid #1a1a1a;}
  .popup_Modal .pop_cont {max-height: 320px; min-height: unset; padding: unset;}
  .popup_Modal .pop_cont ul {grid-template-columns: repeat(1, 1fr); border: none; padding: unset; gap: unset; margin-bottom: 10px;}
  .popup_Modal .pop_cont ul li {border-bottom: 1px solid #D8D8D8; gap: unset;}
  .popup_Modal .pop_cont ul li:nth-child(1) {border-top: 1px solid #D8D8D8; } 
  .recommd_wrap .popup_Modal .pop_cont ul li span {padding: 7px 10px; font-size: 13px; color: #6C6C6C; text-align: left;}
  .popup_Modal .pop_cont ul li span:nth-child(odd){width: 120px; background: #F9F9F9; color: #1A1A1A;}
  .popup_Modal .pop_cont button {display: block;}
  .popup_Modal .pop_cont a.bl_txt {font-size: 13px; cursor: pointer;}
  .spec_pop .pop_inner button {display: none;}
  .popup_Modal .share_inner .lst {padding: unset; justify-content: flex-start; gap: 36px;}
  .popup_Modal.reco_pop {background: unset; top: 200px; opacity: 0;  transition: all 0.5s;}
  .popup_Modal.reco_pop .pop_inner {border: 1px solid #d8d8d8; top: 45%; left: unset; right: 25px; transform: unset;}
  .popup_Modal .reco_list_wrap {max-height: unset;}
  .popup_Modal .reco_list {height: 72px; padding: 12px;}
  .popup_Modal.reco_pop .pop_inner h3 {border-bottom: none; margin-bottom: 0;}
  .popup_Modal.reco_pop .pop_inner h5 {font-size: 14px; color: #1a1a1a; font-family: 'noto-m';}
  .popup_Modal.reco_pop .pop_inner p {color: #6c6c6c; font-family: '맑은 고딕';}
  .popup_Modal .reco_list .pro_img {width: 50px; height: 50px;}
  .reco_btn {top: 405px; right: 40px; opacity: 1; transition: all 0.5s; transform: translateY(20px);} 
  .reco_btn.on {opacity: 0; transform: translateY(0px);} 
  .popup_Modal.reco_pop.on {top: 0px; opacity: 1;}
}

@media screen and (min-width: 1280px) {
  .donut {top: 390px; left: -120px; right: unset;}
  .choose_sec .tit_wrap .donut.pc {width: 360px; height: 360px; clip-path: path("M180,0 A180,180 0 1,1 180,360 A180,180 0 1,1 180,0 Z M180,90 A90,90 0 1,0 180,270 A90,90 0 1,0 180,90 Z"); top: 0px; right: -180px; left: unset; animation: ani4 2s ease-in-out infinite;}
  .donut.right {right: -315px;}
  .recommd_wrap {background: linear-gradient(#E1FFFF, #EEFED6 30%); overflow: hidden;}
  .choose_sec {max-width: 1204px; height: 100%; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; align-items: center; position: relative; padding: unset;}
  .choose_sec.col {padding-top: 100px;}
  .choose_sec.col .donut.pc{display: none;}
  .choose_sec .tit_wrap {background: unset; padding: unset; height: calc(100vh - 335px);}
  .choose_sec .tit1 {gap: 20px;}
  .choose_sec .cont_wrap {width: 800px; left: 0; transform: translateX(0);}
  .choose_sec .cont_wrap.step3 {width: 100%; left: unset;}
  .choose_sec .tit_wrap.step3 {padding: 0 0 20px; width: 100%; height: auto;}
  .recommd_wrap .obj_wrap {left: 0; right: unset;}
  .recommd_wrap .obj_wrap span:nth-child(1) {top: 600px; left: -10px; right: unset;}
  .recommd_wrap .obj_wrap span:nth-child(2) {top: 480px; left: 45px; right: unset;}
  .recommd_wrap .obj_wrap span:nth-child(3) {top: 670px; left: 244px; right: unset;}
  .recommd_wrap .logo {width: 158px;}
  .content3 .prod_area > ul {grid-template-columns: repeat(4, 1fr); gap: 50px 20px;}
  .reco_btn {top: 160px;  right: calc(50% - 740px);}
  .popup_Modal.reco_pop .pop_inner{ transform: unset; top: 130px; right: 10%;}
}