/*ALL CSS-----------------------------------------------------*/ /* font size */ .fs_12{font-size: 0.75rem;} .fs_13{font-size: 0.813rem;} .fs_14{font-size: 0.874rem;} .fs_15{font-size: 0.938rem;} .fs_16{font-size: 1rem;} .fs_17{font-size: 1.063rem;} .fs_18{font-size: 1.125rem;} .fs_20{font-size: 1.25rem;} .fs_22{font-size: 1.375rem;} .fs_24{font-size: 1.5rem;} .fs_30{font-size: 1.875rem;} .fs_35{font-size: 2.188rem;} .fs_40{font-size: 2.5rem;} .fs_55{font-size: 3.438rem;} @media screen and (max-width: 1280px){ .fs_55{font-size: 40px;} } @media screen and (max-width: 720px){ .fs_13{font-size: 11px;} .fs_15{font-size: 13px;} .fs_16{font-size: 13px;} .fs_17{font-size: 14px;} .fs_18{font-size: 14px;} .fs_20{font-size: 14px;} .fs_30{font-size: 17px;} .fs_40{font-size: 21px;} .fs_55{font-size: 21px;} } /* font weight */ .fw_r{font-weight: 300;} .fw_m{font-weight: 400;} .fw_sb{font-weight: 500;} .fw_b{font-weight: 700;} .fw_eb{font-weight: 800;} .fw_h{font-weight: 900;} /* text align center */ .txt_c{text-align: center;} /* point color */ .main_color{color: #2260fc;} /* inner */ .b_inner{max-width: 1140px; width:94%; margin: 0 auto;} /* header */ #b_header{background-color: #fff; position: fixed; left: 0; top: 0; width: 100%; z-index:10;} #b_header > div{position: relative;} #b_header > div::after{content: ''; width: 100%; height: 1px; background-color: #eaeaea; position: absolute; left: 0; bottom: 0px; z-index: 8;} #b_header > div .b_inner{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; height: 100%;} #b_header .b_hd_top{height: 70px; } #b_header .b_hd_bot{height: 50px;} #b_header .b_hd_bot::after{z-index: 3;} #b_header .b_hd_top .b_inner > div{display: flex; align-items: center;} #b_header .b_hd_top .b_left_box{height: 100%;} #b_header .b_hd_top .b_logo {margin-right: 35px;} #b_header .b_hd_top .b_logo a{display: block;} #b_header .b_hd_top nav{height: 100%;} #b_header .b_hd_top #b_gnb {display: flex; align-items: center; height: 100%;} #b_header .b_hd_top #b_gnb > li {position: relative; height: 100%;} #b_header .b_hd_top #b_gnb > li img{display: none;} #b_header .b_hd_top #b_gnb > li .b_menu{font-size: 1.125rem; font-weight: 600; padding: 0 25px; height: 100%; display: flex; align-items: center; } #b_header .b_hd_top #b_gnb .b_sub_list{position: absolute; left:50%; transform: translateX(-50%); top: 69px; width: 130px; background-color: #fff; z-index: 5; border-bottom: 1px solid #eaeaea; border-right: 1px solid #eaeaea; border-left: 1px solid #eaeaea; padding:10px 0; border-radius: 0 0 5px 5px; display: none; } #b_header .b_hd_top #b_gnb .b_sub_list li{margin-bottom: 3px; text-align: center;} #b_header .b_hd_top #b_gnb .b_sub_list li a{font-weight: 400; display: block; padding: 5px 15px; color:#666; text-align: left; } #b_header .b_hd_top #b_gnb .b_sub_list li:hover a{text-decoration: underline; color:#000; } #b_header .b_hd_top #b_gnb > li:hover > a{color: #2260fc;} #b_header .b_hd_top #b_gnb > li:hover .b_sub_list{display: block;} #b_header .b_hd_top .b_right_box{display: flex; align-items: center; column-gap: 20px ;} #b_header .b_hd_top .b_srh_box{max-width: 230px; height: 38px; border-radius: 30px; border:1px solid #d1d1d1; overflow: hidden; display: flex; align-items: center; } #b_header .b_hd_top .b_srh_box input{border: 0; outline: 0; height: 100%; width:calc(100% - 30px) !important; padding:0 15px; margin-left:0 !important; background: #fff !important; } #b_header .b_hd_top .b_srh_box input:focus{border:0 !important; box-shadow:none;} #b_header .b_hd_top .b_srh_box input::placeholder{font-size: 0.8rem; color: #646b74; opacity: .7;} #b_header .b_hd_top .b_srh_box button{width: 30px !important; height: 100%; display: flex; align-items: center; justify-content: flex-start; position: unset !important; background: #fff !important;} #b_header .b_hd_top #hd_sch{display:flex; position:unset; background:unset; padding:0; } #b_header .b_hd_top .b_srh_box form{max-width: 230px; height: 38px; border-radius: 30px; overflow: hidden; display: flex; align-items: center; padding-right:0 !important; } /* 검색결과페이지 */ #sch_res_detail .chk_box input[type="radio"] + label{margin-right:15px; padding-left: 18px;} #sch_res_detail .chk_box input[type="radio"] + label span{top: 2px;} .sch_res_list h2{font-weight:bold; font-size:1rem; padding:20px 0 ; } .sch_res_list ul{padding:0; } .sch_res_list li{box-shadow:none !important; padding:0; border:1px solid #eaeaea; border-radius:10px !important; } .sch_res_list li:last-child{border-bottom:1px solid #eaeaea !important;} .sch_more{display:none; } .sv_wrap{display:none !important; } .sch_datetime i{opacity:.4; margin-right:3px; } #sch_res_board a{line-height:unset; padding: 5px 15px; border-radius: 30px; font-size: 0.938rem; font-weight: 500; border: 1px solid #7f8d9d; color: #7f8d9d;} #sch_res_board .sch_on{background-color: #2260fc; border: 1px solid #2260fc; box-shadow:none ; border-radius: 30px; } #sch_res_ov{margin:0; } #sch_res_ov li{font-size: 0.938rem; } #sch_res_detail{padding: 10px 0;} #sch_res_detail .frm_input{font-size: 0.938rem; border-radius: 5px; padding:0 11px; } #sch_res_detail select{font-size: 0.938rem; border-radius: 5px; padding:0 7px; } #sch_res_detail .btn_submit{border:0; display: flex; align-items: center; justify-content: center;} #sch_res_board{margin:10px 0;} #sch_result .list_01{padding:0; } @media screen and (max-width: 720px){ .sch_res_list h2{padding: 0;} } #b_header .b_hd_top .b_member_list{display: flex; align-items: center; column-gap: 20px ;} #b_header .b_hd_top .b_member_list li a{font-size: 0.874rem; font-weight: 400; display: block; padding: 2.5px; color:#454a4f; } #b_header .b_hd_bot .b_left_box{position: relative; height:100%; } #b_header .b_hd_bot .b_lank_slide{width:200px; height:100%; overflow: hidden;display: flex; align-items: center;} #b_header .b_hd_bot .b_lank_slide button{width: 20px; height: 20px;} #b_header .b_hd_bot .b_lank_slide img{width: 11px; display: block; transition: transform .2s;} #b_header .b_hd_bot .b_lank_slide li{display: flex; align-items: center;} #b_header .b_hd_bot .b_lank_slide li b{font-weight: 500; width:25px;} #b_header .b_hd_bot .b_lank_slide li a{position: relative;} #b_header .b_hd_bot .b_lank_slide li a:after{content:'NEW'; position: absolute; left: 0; top:50%; transform: translateY(-50%); font-size: 0.75rem; font-weight: 400; color: #2260fc; display: none; } #b_header .b_hd_bot .b_lank_slide li.new a{padding-left: 30px;} #b_header .b_hd_bot .b_lank_slide li.new a:after{display: block;} #b_header .b_hd_bot .b_lank_slide button.on img{transform: rotate(-180deg); transition: transform .2s;} #b_header .b_lank_pop{position: absolute; left: 0; top: 100%; width: 100%; background-color: #fff; border-radius: 0 0 10px 10px; padding: 20px; box-shadow: 0 10px 20px rgba(0, 0, 0, .1); display: none;} #b_header .b_lank_pop h5{margin-bottom: 15px;} #b_header .b_lank_pop .b_list_box li{display: flex; align-items: center; margin-bottom: 8px;} #b_header .b_lank_pop .b_list_box li:last-child{margin-bottom: 0;} #b_header .b_lank_pop .b_list_box li b{font-weight: 500; width:25px;} #b_header .b_lank_pop .b_list_box li a{position: relative; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: calc(100% - 25px);} #b_header .b_lank_pop .b_list_box li a:after{content:'NEW'; position: absolute; left: 0; top:50%; transform: translateY(-50%); font-size: 0.75rem; font-weight: 400; color: #2260fc; display: none; } #b_header .b_lank_pop .b_list_box li.new a{padding-left: 30px;} #b_header .b_lank_pop .b_list_box li.new a:after{display: block;} #b_header .b_lank_pop.on{display: block;} #b_header .b_hd_bot .b_right_box{height: 100%;} #b_header .b_hd_bot .b_right_box nav{height: 100%;} #b_header .b_hd_bot #b_util_menu{display: flex; align-items: center; column-gap: 25px; height: 100%;} #b_header .b_hd_bot #b_util_menu > li {position: relative; height: 100%;} #b_header .b_hd_bot #b_util_menu > li.b_cart_btn{display: none;} #b_header .b_hd_bot #b_util_menu > li > a{font-size: 0.938rem; font-weight: 400; padding: 2.5px; color:#454a4f; height: 100%; display: flex; align-items: center;} #b_header .b_hd_bot #b_util_menu .b_sub_list{position: absolute; left:50%; transform: translateX(-50%); top: 48px; width: 100px; background-color: #fff; z-index: 3; border-bottom: 1px solid #eaeaea; border-right: 1px solid #eaeaea; border-left: 1px solid #eaeaea; padding:10px 0; border-radius: 0 0 5px 5px; display: none;} #b_header .b_hd_bot #b_util_menu .b_sub_list li a{font-size: 0.938rem; font-weight: 300;} #b_header .b_hd_bot #b_util_menu .b_sub_list li{margin-bottom: 1px; text-align: center;} #b_header .b_hd_bot #b_util_menu .b_sub_list li a{font-weight: 400; display: block; padding: 5px 15px; color:#666; text-align: left; } #b_header .b_hd_bot #b_util_menu .b_sub_list li:hover a{text-decoration: underline; color:#000; } #b_header .b_hd_bot #b_util_menu > li:hover .b_sub_list{display: block;} #b_header .b_toggle_btn{display: none; width:28px; flex-direction: column; row-gap: 5px; } #b_header .b_toggle_btn span{display:block; height: 3px; width:100%; background-color: #444; border-radius: 5px;} #popular{/* display:none; */ position:absolute; top:0; left:0; } /* 가전렌탈 서브메뉴 출력X */ #b_header .b_hd_top #b_gnb .b_menu_2 .b_sub_list{display: none !important;} /* 가전렌탈 별도 서브메뉴 */ #rental_menu{position: fixed; left: 0; top: 70px; background-color: #fff; width: 100%; height: 480px; z-index: 15; border-bottom: 1px solid #e7e7e7; display: none;} #rental_menu .b_inner{height: 100%;} #rental_menu #b_all_cate{display: flex; height: 100%; } #rental_menu #b_all_cate > li{height: 100%; padding: 20px 10px 0 10px; width:12.5% ; border-right: 1px solid #e7e7e7;} #rental_menu #b_all_cate > li > a{font-weight: 600;} #rental_menu #b_all_cate > li:hover > a{color: #2260fc; } #rental_menu #b_all_cate .b_menu_1:hover > a{color: #fff;} #rental_menu #b_all_cate .b_menu_1{background-color: #2260fc; border-right: 0;} #rental_menu #b_all_cate .b_menu_1 > a{color: #fff;} #rental_menu #b_all_cate .b_sub_list{margin-top: 15px; display: flex; flex-direction: column; row-gap: 10px;} #rental_menu #b_all_cate .b_sub_list a{display: block; font-size: 0.9rem; font-weight: 400; color: #777;} #rental_menu #b_all_cate .b_menu_1 .b_sub_list a{color: #fff;} #rental_menu #b_all_cate .b_sub_list li:hover a{color: #111; transition: color .2s; text-decoration: underline;} #rental_menu #b_all_cate .b_menu_1 .b_sub_list li:hover a{color: #fff;} #rental_menu #b_all_cate .b_acc_list{display:none;} @media screen and (max-width: 1280px){ #b_header .b_hd_top .b_logo {margin-right: 30px;} #b_header .b_hd_top #b_gnb .b_sub_list{width: 110px;} } @media screen and (max-width: 1080px){ #b_header .b_hd_bot{display: none;} #b_header .b_toggle_btn{display: flex; } #b_header .b_hd_top #hd_sch{display: none;} #b_header .b_hd_top .b_member_list{display: none;} #b_header .b_hd_top .b_cart_btn{display: none;} #b_header .b_hd_top .b_logo {margin-right: 20px;} #b_header .b_hd_top .b_logo img{width: 50px;} } @media screen and (max-width: 720px){ #b_header .b_hd_top {height: 60px;} #b_header .b_hd_top .b_logo {margin-right: 15px;} #b_header .b_hd_top #b_gnb .b_sub_list{top: 59px; display: none !important;} #b_header .b_hd_top #b_gnb > li .b_menu{padding:0; padding-right: 13px;} #b_header .b_toggle_btn{width: 22px; row-gap: 4px; } #b_header .b_toggle_btn span{ height: 2px; } #rental_menu{display: none !important;} } /* 퀵메뉴 */ #b_quick_menu{position: fixed; right: 50px; bottom:100px; z-index: 10;} #b_quick_menu li.b_call_btn {position: relative; overflow: hidden;} #b_quick_menu li > a{display: flex; align-items: center; justify-content: center; width: 60px; border-radius: 50%; aspect-ratio: 1/1;} #b_quick_menu li.b_kakao_btn {margin-bottom: 5px;} #b_quick_menu li.b_kakao_btn > a{background-color: #ffeb3b;} #b_quick_menu li.b_call_btn > a{background-color: #2260fc;} #b_quick_menu li.b_call_btn .b_number{position: absolute; left:0; top:50%; transform: translateY(-50%); width:145px; height: 30px; opacity: 0; z-index: -1; transition:left .1s;} #b_quick_menu li.b_call_btn .b_number a{display: flex; width: 85px; height: 100%; align-items: center; justify-content: center; border-radius: 20px; background-color: rgba(222,231,255,.5); } #b_quick_menu li.b_call_btn.on{overflow: visible;} #b_quick_menu li.b_call_btn.on .b_number {opacity: 1; left: -95px; transition:.3s;} @media screen and (max-width: 1080px){ #b_quick_menu{right: 20px; bottom: 30px;} #b_quick_menu li > a{width: 50px;} #b_quick_menu li img{width: 24px;} } @media screen and (max-width: 720px){ #b_quick_menu{right: 8px;} #b_quick_menu li > a{width: 35px;} #b_quick_menu li img{width: 18px;} } /* 사이트맵 */ #b_site_map{position: fixed; right: -100%; top:0; width: 100%; height: 100%; background-color: #fff; z-index: 20; padding-top:15px; transition:right .3s;} #b_site_map .b_inner{max-width: 460px; position: relative;} #b_site_map .b_top_box{margin-bottom: 40px; display: flex; justify-content: center; align-items: center;} #b_site_map .b_top_box h1 img{width: 50px; display: block;} #b_site_map .b_back_btn{width: 22px; height: 22px; position: absolute; left: 0; top: 5px;} #b_site_map .b_back_btn img{transform: rotate(90deg);} #b_site_map #b_gnb {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 10px; margin: 20px 0;} #b_site_map #b_gnb > li{position: relative; width: 23.5%;} #b_site_map #b_gnb > li > a{display: flex; align-items: center; font-size: 1.05rem; font-weight: 500; background-color: #f7f9fb; border-radius: 8px; text-align: center; justify-content:center; flex-direction: column; aspect-ratio: 1 / 1;} #b_site_map #b_gnb > li img{width: 50px; display: block; margin-bottom: 10px;} #b_site_map #b_gnb .b_sub_list, #b_site_map #b_util_menu .b_sub_list{display: none;} #b_site_map #b_gnb .b_sub_list li{margin-bottom: 10px;} #b_site_map #b_gnb .b_sub_list li:last-child{margin-bottom: 0px;} #b_site_map #b_gnb .b_sub_list li a{display: block; padding: 5px; width: fit-content; font-weight: 400; } #b_site_map #b_util_menu {display: flex; align-items: center; flex-wrap: wrap; border-bottom: 1px solid #e7ebef;} #b_site_map #b_util_menu > li {width: 50%; border-top: 1px solid #e7ebef;} #b_site_map #b_util_menu > li > a{display: flex; align-items: center; font-size: 1.05rem; font-weight: 500; text-align: center; height: 50px; position: relative; padding-left: 45px; color: #5f6d7d;} #b_site_map #b_util_menu > li > a::after{content:''; width:20px; height: 20px; position: absolute; left: 17px; top: 50%; transform: translateY(-50%); opacity: .6;} #b_site_map #b_util_menu > li:nth-child(1) > a::after{background: url(/img/icon/b_cart_icon.png) no-repeat center / 100%;} #b_site_map #b_util_menu > li:nth-child(2) > a::after{background: url(/img/icon/b_faq_icon.png) no-repeat center / 100%;} #b_site_map #b_util_menu > li:nth-child(3) > a::after{background: url(/img/icon/b_tip_icon.png) no-repeat center / 100%;} #b_site_map #b_util_menu > li:nth-child(4) > a::after{background: url(/img/icon/b_review_icon.png) no-repeat center / 100%;} #b_site_map #b_util_menu > li:nth-child(5) > a::after{background: url(/img/icon/b_event_icon.png) no-repeat center / 100%;} #b_site_map #b_util_menu > li:nth-child(6) > a::after{background: url(/img/icon/b_cs_icon.png) no-repeat center / 100%;} #b_site_map .b_login_box{margin-top: 30px;} #b_site_map .b_login_box ul{display: flex; align-items: center; justify-content: center; column-gap: 2%;} #b_site_map .b_login_box li {width: 49%;} #b_site_map .b_login_box li a{display: flex; align-items: center; justify-content: center; border-radius: 5px; height: 40px; font-weight: 500; font-size:1.05rem;} #b_site_map .b_login_box li.b_login_btn a{background-color: #2260fc; color: #fff;} #b_site_map .b_login_box li.b_join_btn a{border: 1px solid #d0d7dd; color: #5f6d7d;} #b_site_map .b_srh_box{width: 100%; height: 38px; border-radius: 30px; border:1px solid #e7ebef; overflow: hidden; display: flex; align-items: center; background-color: #fff; } #b_site_map .b_srh_box input{border: 0; outline: 0; height: 100%; width:calc(100% - 30px); padding:0 15px;} #b_site_map .b_srh_box input::placeholder{font-size: 1rem; color: #646b74; opacity: .7;} #b_site_map .b_srh_box button{width: 30px; height: 100%; display: flex; align-items: center; justify-content: flex-start; } #b_site_map.open{right:0; transition:right .3s} /* 메인비주얼 */ .swiper-button-next:after, .swiper-button-prev:after { display: none; } .b_mv_box { width: 100%; height: 500px; overflow: hidden; position: relative; margin-top: 120px; background-color: #f0f0f0; /* 로딩 전 배경색 */ } /* Swiper 기본 오버플로우 방지 */ .b_mv_box .swiper-slide { width: 100% !important; height: 100%; position: relative; overflow: hidden; } /* HTML 내 img 태그 최적화 (배경처럼 꽉 차게) */ .b_mv_box .swiper-slide img { width: 100%; height: 100%; object-fit: cover; /* 이미지가 잘리더라도 영역을 꽉 채움 */ object-position: center; display: block; } /* 만약 CSS 배경 방식을 계속 사용하신다면 아래 bg 설정을 유지하세요 */ .b_mv_box .b_mv_bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; /* 이미지보다 뒤 혹은 슬라이드 기본 배경 */ } /* 텍스트 박스 레이어 (z-index 높여서 이미지 위로) */ .b_mv_box li .b_inner { height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 5; } .b_mv_box li .b_txt_box { transform: translateY(40px); opacity: 0; transition: transform .6s, opacity .5s; } /* 슬라이드 활성화 시 애니메이션 */ .b_mv_box .mv_01.first_on .b_txt_box, .b_mv_box li.swiper-slide-active .b_txt_box { transform: translateY(0px); opacity: 1; } .b_mv_box li.swiper-slide-active .b_txt_box { transition-delay: .5s; } .b_mv_box li .b_txt_box .b_sub_txt { margin: 25px 0 30px; } .b_mv_box li.mv_02 .b_txt_box .b_sub_txt { margin-top: 0px; } .b_mv_box .b_txt_box .b_more_btn { display: flex; align-items: center; justify-content: center; width: 170px; height: 50px; background-color: #111; color: #fff; border-radius: 30px; margin-top: 25px; } /* 페이지네이션 */ .b_mv_box .b_pagi { background-color: rgba(0,0,0,.4); border-radius: 20px; color: #fff; width: 65px; height: 32px; line-height: 32px; font-weight: 500; position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 10; text-align: center; } /* 화살표 내비게이션 */ .b_mv_box .b_navi_box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; width: 100%; max-width: 1280px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; /* 박스 자체가 클릭을 막지 않도록 함 */ } .b_mv_box .b_next, .b_mv_box .b_prev { opacity: .3; pointer-events: auto; /* 버튼만 클릭 가능하게 */ width: auto; height: auto; cursor: pointer; transition: opacity .3s; } .b_mv_box .b_next:hover, .b_mv_box .b_prev:hover { opacity: 1; } .b_mv_box .b_next img { transform: rotate(180deg); } /* 반응형 구간 */ @media screen and (max-width: 1320px) { .b_mv_box .b_navi_box { display: none; } } @media screen and (max-width: 1080px) { .b_mv_box { margin-top: 70px; } } @media screen and (max-width: 720px) { .b_mv_box { height: 400px; margin-top: 60px; } /* 높이 살짝 조정 */ .b_mv_box .b_pagi { width: 45px; height: 22px; line-height: 22px; font-size: 12px; bottom: 15px; } .b_mv_box li .b_inner { justify-content: flex-start; padding: 40px 20px 0; } .b_mv_box li .b_txt_box { text-align: center; width: 100%; } .b_mv_box li .b_txt_box .b_sub_txt { margin: 10px 0; font-size: 15px; } .b_mv_box .b_txt_box .b_more_btn { width: 130px; height: 40px; margin: 20px auto 0; font-size: 14px; } /* 모바일에서 li 안의 이미지 처리 */ .b_mv_box .swiper-slide img { object-position: center; /* 모바일에서 인물/사물이 하단에 있을 때 유용 */ } /* CSS 배경 방식 사용 시 모바일 이미지 교체 */ .b_mv_box li.mv_01 .b_mv_bg { background: url(/img/index/mv_01_m.jpg) no-repeat center bottom / cover; } .b_mv_box li.mv_02 .b_mv_bg { background: url(/img/index/mv_02_m.jpg) no-repeat center / cover; } .b_mv_box li.mv_03 .b_mv_bg { background: url(/img/index/mv_03_m.jpg) no-repeat center / cover; } } /* scroll motion */ .b_motion .b_item {transition: transform .8s, opacity 0.6s ease; opacity: 0; transform: translate3d(0px, 50px, 0);} .b_motion .b_item.b_tr {transform: translate3d(-50px, 0, 0);} .b_motion .b_item.b_tl {transform: translate3d(50px, 0, 0);} .b_motion .b_item.b_move {opacity: 1 !important; transform: translateZ(0) !important;} .b_item.b_delay_01{transition-delay: .3s;} .b_item.b_delay_02{transition-delay: .6s;} .b_item.b_delay_03{transition-delay: .9s;} .b_item.b_delay_04{transition-delay: 1.2s;} /* 섹션 공통 */ .b_section{padding: 100px 0;} .b_section .b_tit_box {display: flex; align-items: center; justify-content: space-between; margin-bottom:35px;} .b_section .b_tit_box .b_more_btn{color: #5f6d7d; display: flex; align-items: center; column-gap: 8px;} @media screen and (max-width: 1080px){ .b_section{padding: 70px 0;} } @media screen and (max-width: 720px){ .b_section{padding: 40px 0;} .b_section .b_tit_box{margin-bottom: 20px;} .b_section .b_tit_box .b_more_btn{column-gap: 5px;} .b_section .b_tit_box .b_more_btn img{width: 10px;} } /* 휴대폰 특징 컬러박스 (5G / 인기 / 추천) */ .b_spec_list > ul{display: flex; flex-wrap: wrap; align-items: center; column-gap: 3px;} .b_spec_list li{border-radius: 10px; padding: 2px 8px; display: flex; align-items: center;} .b_spec_list .b_green{color:#27c907; background-color: rgba(39,201,7,.15);} .b_spec_list .b_orange{color:#ff8a00; background-color: rgba(255,138,0,.15);} .b_spec_list .b_blue{color:#2260fc; background-color: rgba(34,96,252,.15);} .b_spec_list .b_red{color:#ff486f; background-color: rgba(255,72,111,.15);} /* 제품카테고리 리스트 */ .cate_tit_box {margin-bottom: 40px;} .cate_tit_box .b_tit_box {margin-bottom: 35px;} .cate_tit_box .b_cate_list{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;} .cate_tit_box .b_cate_list li{background-color: #fff; border-radius:15px ; width: 10.1%; aspect-ratio: 9 / 9.7;} .cate_tit_box .b_cate_list li a{display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; } .cate_tit_box .b_cate_list li p{text-align: center; word-break: keep-all;} .cate_tit_box .b_cate_list li figure{margin-bottom: 16px; width: fit-content; display: flex; align-items: center; justify-content:center;} .cate_tit_box .b_cate_list li figure img{display: block; max-width: 100%;} .cate_tit_box .b_cate_list li.b_all_btn figure{height: 60px;} .cate_tit_box .b_cate_list li.b_all_btn figure i{display: block; width: 30px; height: 2px; background-color: #2260fc; position: relative;} .cate_tit_box .b_cate_list li.b_all_btn figure i::after{content:''; width:2px; height: 30px; background-color: #2260fc; position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%);} .cate_tit_box .b_cate_list li.on{background-color: #2260fc; color:#fff;} .cate_tit_box .b_cate_list li.on.b_all_btn figure i{background-color: #fff; } .cate_tit_box .b_cate_list li.on.b_all_btn figure i::after{background-color: #fff; } @media screen and (max-width: 1080px){ .cate_tit_box .b_cate_list li{border-radius: 10px; width: 10.3%; } .cate_tit_box .b_cate_list li figure{margin-bottom: 10px;} .cate_tit_box .b_cate_list li figure img{width: 60px;} .cate_tit_box .b_cate_list li.b_all_btn figure {height: 45px;} .cate_tit_box .b_cate_list li.b_all_btn figure i{width: 24px;} .cate_tit_box .b_cate_list li.b_all_btn figure i::after{height: 24px;} } @media screen and (max-width: 720px){ .cate_tit_box .b_cate_list{justify-content: flex-start; column-gap: 1.875%; row-gap: 10px; } .cate_tit_box .b_cate_list li{width: 18.5%; border-radius: 5px; min-height: 77px;} .cate_tit_box .b_cate_list li figure{margin-bottom: 5px;} .cate_tit_box .b_cate_list li figure img{width: 50px;} .cate_tit_box .b_cate_list li.b_all_btn figure {height: 37.5px;} .cate_tit_box .b_cate_list li.b_all_btn figure i{width: 18px;} .cate_tit_box .b_cate_list li.b_all_btn figure i::after{height: 18px;} } /* 제품카테고리 > 전체보기 팝업 */ #all_cate_box{position: fixed; left: 0; top: 0; z-index: 20; background-color: rgba(0,0,0,.7); width: 100%; height: 100%; display: none;} #all_cate_box .b_box_wrap{max-width: 1000px; margin: 0 auto; width: 94%; background-color: #fff; border-radius: 20px; height: 500px; margin-top:150px; text-align: center; padding: 70px 50px 50px; position: relative; transform:translateY(30px) scale(0.98); opacity:0; transition:.2s; } #all_cate_box .b_close_btn{width: 25px; height: 25px; position: absolute; right: 12px; top: 10px; display: flex; justify-content: center; align-items: center; opacity: .3;} #all_cate_box .b_close_btn span{width: 16px; height: 2px; background-color: #111; position: relative; display: block; transform: rotate(45deg);} #all_cate_box .b_close_btn span::after{content: ''; width: 2px; height: 16px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: #111; } #all_cate_box h4{margin-bottom: 40px;} #all_cate_box #b_all_cate{display: flex; justify-content: center; flex-wrap: wrap;} #all_cate_box #b_all_cate > li {padding: 0 20px;} #all_cate_box #b_all_cate > li > a{font-size: 1.125rem; font-weight: bold; padding: 5px 0; position: relative;} #all_cate_box #b_all_cate > li > a::after{content:''; width: 4px; height: 4px; border-radius: 50%; background-color: #2260fc; position: absolute; left: -5px; top: -10px; opacity: 0; transition: .2s;} #all_cate_box #b_all_cate .b_sub_list{position: fixed; left: 50%; top: 360px; transform: translateX(-50%); max-width: 650px; width: 94%; display: none; padding: 25px 0 5px; top: 205px;} #all_cate_box #b_all_cate .b_sub_list::after{content: ''; clear: both; display: block;} #all_cate_box #b_all_cate .b_sub_list::before{content:''; width: 110%; height: 100%; background-color: #f7f9fb; border-radius: 8px; position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: -1;} #all_cate_box #b_all_cate .b_sub_list li{width: 24%; float: left; margin-bottom: 20px; transition:color .2s;} #all_cate_box #b_all_cate .b_sub_list li a{font-weight: 400; font-size: 1rem;} #all_cate_box #b_all_cate .b_sub_list:hover li{color: #888; transition:color .2s;} #all_cate_box #b_all_cate .b_sub_list:hover li:hover{color: #111; transition:color .2s; -webkit-text-stroke: 0.02em;} #all_cate_box #b_all_cate > li.on .b_sub_list{display: block; } #all_cate_box #b_all_cate > li.on > a{color: #2260fc; } #all_cate_box #b_all_cate > li.on > a::after{top: 0px; opacity: 1;} #all_cate_box #b_all_cate > li > a.on::after{top: 0px; opacity: 1; transition: .3s;} #all_cate_box #b_all_cate > li > a.on{color: #2260fc; } #all_cate_box .b_box_wrap.show{transform:translateY(0px) scale(1); opacity:1; transition:.4s; } @media screen and (max-width: 1080px){ #all_cate_box .b_box_wrap{padding:40px 20px 0px; margin-top: 100px;} #all_cate_box #b_all_cate > li {padding: 0; width: 11%;} #all_cate_box #b_all_cate .b_sub_list{width: 85%; top: 170px;} #all_cate_box #b_all_cate .b_sub_list::before{width: 100%;} } @media screen and (max-width: 720px){ #all_cate_box #b_all_cate{justify-content: flex-start; row-gap: 18px; column-gap: 1.25%;} #all_cate_box #b_all_cate > li{width:19%;} /* #all_cate_box #b_all_cate .b_sub_list{top: 280px;}*/ #all_cate_box #b_all_cate .b_sub_list li{width: 33.333%; margin-bottom: 15px;} #all_cate_box .b_box_wrap{height: 370px;} } /* 제품 리스트 */ .pdt_list_page .b_wrap_box .b_list_box{display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 2%; row-gap: 25px;} .pdt_list_page .b_wrap_box .b_list_box > li{width: 23.5%; background-color: #fff; border-radius: 20px; cursor: pointer; padding:25px 20px; } .pdt_list_page .b_wrap_box .b_list_box .b_img_box {margin-bottom: 20px; padding: 20px 0;} .pdt_list_page .b_wrap_box .b_list_box .b_img_box img{display: block; margin:0 auto; /*max-width: 100%;*/ max-width: 145px; width: 100%;} .pdt_list_page .b_wrap_box .b_list_box .b_tit_box{display: block; margin-bottom:13px;} .pdt_list_page .b_wrap_box .b_list_box .b_tit_box .b_name_txt{margin: 10px 0;} .pdt_list_page .b_wrap_box .b_list_box .b_tit_box .b_plan_box{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;} .pdt_list_page .b_wrap_box .b_list_box .b_tit_box .b_plan_box .b_color_list {display: flex; align-items: center; column-gap: 5px;} .pdt_list_page .b_wrap_box .b_list_box .b_tit_box .b_plan_box .b_color_list li .color_set{border:1px solid #d1d1d1; border-radius: 50%; width:10px; height:10px; display: block; background-color: #333;} .pdt_list_page .b_wrap_box .b_list_box .b_price_box ul{display: flex; flex-direction: column; row-gap: 5px;} .pdt_list_page .b_wrap_box .b_list_box .b_price_box ul li{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;} .pdt_list_page .b_wrap_box .b_list_box .b_price_box ul li span{color: #555;} .pdt_list_page .b_wrap_box .b_list_box .b_price_box ul li.b_sale_box span{color: #000;} .pdt_list_page .b_wrap_box .b_list_box .b_price_box .b_total_price{text-align: right; margin-top: 10px;} .pdt_list_page .b_wrap_box .b_list_box .b_price_box .b_total_price b{color: #2260fc;} @media screen and (max-width: 1080px){ .pdt_list_page .b_wrap_box .b_list_box{column-gap: 1.333%; row-gap: 10px;} .pdt_list_page .b_wrap_box .b_list_box > li{border-radius: 10px; width: 24%;} .pdt_list_page .b_wrap_box .b_list_box .b_tit_box .b_plan_box .b_color_list{column-gap: 2px;} } @media screen and (max-width: 960px){ .pdt_list_page .b_wrap_box .b_list_box{column-gap: 2%; row-gap: 15px;} .pdt_list_page .b_wrap_box .b_list_box > li{width: 32%;} } @media screen and (max-width: 720px){ .pdt_list_page .b_wrap_box .b_list_box{column-gap: 3%; row-gap: 10px;} .pdt_list_page .b_wrap_box .b_list_box > li{width: 48.5%; padding: 20px 15px;} .pdt_list_page .b_wrap_box .b_list_box .b_img_box img{max-width: 100px;} } /* 섹션 1 - 제품카테고리 > 휴대폰 견적비교 */ .b_sec01 {background-color: #f7f9fb;} .b_sec01 .b_top_box {margin-bottom: 40px;} .b_sec01 .b_bot_box .b_tit_box .b_left_box{display: flex; align-items: center; column-gap: 15px;} .b_sec01 .b_bot_box .b_tit_box .b_brand_list{display: flex; align-items: center; background-color: #fff; border-radius: 20px; height: 30px; border:1px solid #dce2f0; } .b_sec01 .b_bot_box .b_tit_box .b_brand_list li{padding:0 15px; border-radius: 20px; height: 100%; display: flex; align-items: center; color: #888; cursor: pointer;} .b_sec01 .b_bot_box .b_tit_box .b_brand_list li.on{background-color: #111; color: #fff;} /* 제품카테고리 > 브랜드(삼성/애플) 탭 */ .b_sec01 .b_wrap_box .b_tab_cont{display: none;} .b_sec01 .b_wrap_box .b_tab_cont.on{display: block;} @media screen and (max-width: 720px){ .b_sec01 .b_bot_box .b_tit_box .b_left_box{column-gap: 10px;} .b_sec01 .b_bot_box .b_tit_box .b_brand_list{height: 25px;} .b_sec01 .b_bot_box .b_tit_box .b_brand_list li{padding: 0 12px;} } /* 섹션 2 - 이용후기 */ .b_sec02 .b_review_slide{overflow: hidden;} .b_sec02 .b_review_slide li{border-radius: 20px; overflow: hidden; background-color: #f7f9fb;} .b_sec02 .b_review_slide li > a{display: block;} .b_sec02 .b_review_slide li .b_img_box{aspect-ratio: 9/6; } .b_sec02 .b_review_slide li .b_img_box img{display: block; width: 100%; height: 100%; object-fit: cover;} .b_sec02 .b_review_slide li .b_txt_box{height: 175px; padding:20px;} .b_sec02 .b_review_slide li .b_txt_box .b_subject{margin:10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .b_sec02 .b_review_slide li .b_txt_box .b_cont{color: #555555; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; line-height: 1.4;} @media screen and (max-width: 1080px){ .b_sec02 .b_review_slide li{border-radius: 10px;} } @media screen and (max-width: 720px){ .b_sec02 .b_review_slide li .b_txt_box {height: 130px; padding: 12px; padding-bottom: 15px;} .b_sec02 .b_review_slide li .b_txt_box .b_subject{margin: 6px 0;} } /* 섹션 3 - 자주하는질문 / 구매꿀팁 */ .b_sec03 .b_inner{display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;} .b_sec03 .b_box{width: 48%;} .b_sec03 .b_box .b_cont_box{height: 335px;} .b_sec03 .b_faq_sec .b_cont_box{padding:10px 30px; border: 1px solid #ececec; border-radius: 20px;} .b_sec03 .b_faq_sec .b_faq_list li{border-bottom: 1px solid #e7e7e7; position: relative;} .b_sec03 .b_faq_sec .b_faq_list li:last-child{border-bottom:0;} .b_sec03 .b_faq_sec .b_faq_list .b_top_box {display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding:20px 0; } .b_sec03 .b_faq_sec .b_faq_list .b_top_box b{color: #2260fc;} .b_sec03 .b_faq_sec .b_faq_list .b_top_box img{transition:transform .2s;} .b_sec03 .b_faq_sec .b_faq_list .b_top_box.open img{transform: rotate(-180deg); transition:transform .2s;} .b_sec03 .b_faq_sec .b_faq_list .b_bot_box{position: absolute; left: 50%; top:100%; background-color: #fff; border-radius: 0px; width: 100%; transform: translateX(-50%); box-shadow: 0 3px 20px rgba(0,5,19,.1); z-index: 3; padding: 20px; line-height: 1.3; display: none; border: 1px solid #ececec; } .b_sec03 .b_tip_sec .b_tip_list{height: 100%; display: flex; flex-direction: column; justify-content: space-between;} .b_sec03 .b_tip_sec .b_tip_list li {height: 31%;} .b_sec03 .b_tip_sec .b_tip_list li a{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; height: 100%;} .b_sec03 .b_tip_sec .b_tip_list .b_img_box{overflow: hidden; border-radius: 15px; width:26.5%; height: 100%;} .b_sec03 .b_tip_sec .b_tip_list .b_img_box img{display: block; width: 100%; height: 100%; object-fit: cover;} .b_sec03 .b_tip_sec .b_tip_list .b_txt_box{width:73.5%; padding-left:25px;} .b_sec03 .b_tip_sec .b_tip_list .b_txt_box .b_sub_txt{color: #2260fc; background-color: rgba(34,96,252,.15); height: 25px; padding: 0 12px; width: fit-content; display: block; line-height: 25px; border-radius: 20px;} .b_sec03 .b_tip_sec .b_tip_list .b_txt_box .b_tit_txt{line-height: 1.4; margin-top:10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break:keep-all; } @media screen and (max-width: 1080px){ .b_sec03 .b_box {width: 48.5%;} .b_sec03 .b_box .b_cont_box{height: 280px;} .b_sec03 .b_faq_sec .b_cont_box{border-radius: 10px; padding: 10px 20px;} .b_sec03 .b_faq_sec .b_faq_list .b_top_box{padding: 15px 0;} .b_sec03 .b_faq_sec .b_faq_list .b_top_box img{width: 10px;} .b_sec03 .b_tip_sec .b_tip_list .b_img_box{border-radius: 7px;} .b_sec03 .b_tip_sec .b_tip_list .b_txt_box{padding-left: 18px;} } @media screen and (max-width: 720px){ .b_sec03 .b_box {width: 100%;} .b_sec03 .b_box .b_cont_box{height: auto;} .b_sec03 .b_faq_sec .b_cont_box{padding: 0px 20px;} .b_sec03 .b_faq_sec .b_faq_list .b_bot_box{padding: 10px;} .b_sec03 .b_tip_sec {margin-top: 80px; z-index: -1;} .b_sec03 .b_tip_sec .b_tip_list{row-gap: 10px;} .b_sec03 .b_tip_sec .b_tip_list li {height: 90px;} .b_sec03 .b_tip_sec .b_tip_list .b_txt_box .b_sub_txt{height: 20px ; padding: 0 9px; line-height: 20px;} } /* 섹션 4 - 하단배너 */ .b_banner_sec { padding-top: 0; position: relative; z-index: 1; /* z-index가 -1이면 클릭이 안 될 수 있어 1로 수정 권장 */ } .b_banner_sec .b_inner { /* height: 150px; 제거: 이미지가 들어갈 경우 고정 높이는 위험합니다 */ min-height: 150px; /* 최소 높이만 지정 */ background-color: #2260fc; display: flex; align-items: center; justify-content: space-between; overflow: hidden; /* 영역 밖으로 나가는 것 방지 */ } /* 이미지 반응형 핵심 설정 */ .b_banner_sec .b_inner img { display: block; max-width: 100%; /* 부모 너비보다 커지지 않게 함 */ height: auto; /* 비율 유지 */ } .b_banner_sec h4 { color: #fff; } .b_banner_sec .b_more_btn { display: flex; align-items: center; justify-content: center; width: 170px; height: 50px; background-color: #fff; color: #2260fc; border-radius: 30px; flex-shrink: 0; /* 버튼이 찌그러지지 않게 보호 */ } @media screen and (max-width: 720px) { .b_banner_sec .b_inner { height: auto; /* 모바일에서는 높이 자동 */ min-height: unset; flex-direction: column; justify-content: center; } .b_banner_sec .b_inner img { width: 100%; /* 모바일에서는 이미지가 꽉 차게 */ } .b_banner_sec h4 { text-align: center; margin-bottom: 15px; } .b_banner_sec .b_more_btn { width: 150px; height: 40px; } /* 터치하기 적당한 크기 */ } /* footer */ #b_footer{background-color: #edf1f6; padding:60px 0;} #b_footer .b_inner > div{display: flex; justify-content: space-between; align-items: center;} #b_footer .b_ft_top {margin-bottom: 35px;} #b_footer .b_ft_top .b_left_box{display: flex; align-items: center; column-gap: 40px;} #b_footer .b_ft_top .b_logo a{display: block;} #b_footer .b_ft_top .b_terms_list{display: flex; align-items: center; column-gap: 20px; color: #7f8d9d;} #b_footer .b_ft_top .b_sns_list{display: flex; align-items: center; column-gap: 10px;} #b_footer .b_ft_top .b_sns_list li a{display: block;} #b_footer .b_ft_bot address{color: #7f8d9d; margin-bottom: 15px;} #b_footer .b_ft_bot address span{line-height: 1.5; margin-right: 5px;} #b_footer .b_ft_bot .b_cs_box{text-align: right;} #b_footer .b_ft_bot .b_cs_box h5{display: flex; align-items: center; justify-content: flex-end; margin:10px 0; } @media screen and (max-width: 1080px){ #b_footer{padding: 45px 0;} #b_footer .b_ft_top {margin-bottom: 20px;} #b_footer .b_ft_top .b_left_box{column-gap: 20px;} #b_footer .b_ft_top .b_logo img{width: 50px;} #b_footer .b_ft_top .b_terms_list{column-gap: 15px;} #b_footer .b_ft_top .b_sns_list{column-gap: 5px;} #b_footer .b_ft_top .b_sns_list li img{width: 30px;} #b_footer .b_ft_bot .b_left_box figure img{width: 40px;} #b_footer .b_ft_bot .b_cs_box img{width: 18px; margin-right: 5px;} } @media screen and (max-width: 720px){ #b_footer{padding: 30px 0;} #b_footer .b_inner > .b_ft_top{flex-direction: column; justify-content: center; margin-bottom: 15px;} #b_footer .b_inner > .b_ft_bot{flex-direction: column-reverse; justify-content: center;} #b_footer .b_ft_top .b_left_box{column-gap: unset; flex-direction: column;} #b_footer .b_ft_top .b_terms_list{margin: 15px 0; column-gap: 10px;} #b_footer .b_ft_bot .b_cs_box {text-align: center; margin-bottom: 15px;} #b_footer .b_ft_bot .b_cs_box h5{justify-content: center; margin: 5px 0;} #b_footer .b_ft_bot address{text-align: center;} #b_footer .b_ft_bot .b_left_box figure{text-align: center;} } /* 개인정보처리방침 및 이용약관 팝업 */ .add_pop_wrap{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.7); z-index: 50; display: none;} .add_pop_inner{position: absolute; top: 50%; left: 50%; width: 94%; max-width: 700px; /*height: 600px;*/ border-radius: 15px; overflow: hidden; transform: translate(-50%,-50%) scale(.9); transition: transform .3s ease; overflow:hidden; } .add_pop_wrap.active .add_pop_inner{transform: translate(-50%,-50%) scale(1);} .add_pop_tit{background: #2260fc; color: #FFF; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 25px; font-weight: bold; border-radius: 15px 15px 0 0;} .add_pop_close{width: 20px; height: 48px; position: relative;} .add_pop_close span{position: absolute; top: 23px; left: 0; width: 20px; height: 2px; background: #FFF; z-index: 1; transition: transform .3s ease;} .add_pop_close span:nth-child(1){transform: rotate(45deg);} .add_pop_close span:nth-child(2){transform: rotate(-45deg);} .add_pop_close:hover span{transform: rotate(0);} .add_pop_con{background: #FFF; padding: 22px 25px; overflow-y: scroll; height: 540px;} .add_pop_con h5{font-size: 1rem; font-weight: bold; margin-bottom: 10px;} .add_pop_con p{font-size: 14px; line-height: 160%; margin-bottom: 25px; -webkit-text-stroke: 0.015em; /*-- 기본폰트 나눔스퀘어/나눔스퀘어 라운드가 아닐 경우 제거 --*/ }