/* ===== 공통 ===== */ * {box-sizing:border-box;} /* ===== 래퍼 ===== */ #pointmallWraper{width:100%; padding:0 4%; overflow:hidden; background:var(--color-white);} /* ===== 페이지 타이틀 ===== */ #pointmallWraper h3{width:100%; text-align:center; padding:6% 0 4% 0; font-size:var(--text-22); font-weight:800; color:var(--color-slate-900); font-family:'Noto Sans KR', sans-serif !important; line-height:1.4;} #pointmallWraper h3 span{display:block; font-size:var(--text-16); font-weight:600; color:var(--color-primary-500); margin-top:2%;} /* ===== 총 포인트 박스 ===== */ #pointmallWraper .total_point_box{background:var(--color-slate-100); border-radius:2vw; padding:4% 0; text-align:center; color:var(--color-slate-700); font-size:4vw; margin-bottom:8%; font-family:'Noto Sans KR', sans-serif !important;} #pointmallWraper .total_point_box span{font-size:4.5vw; font-weight:800; color:var(--color-slate-900);} /* ===== 섹션 컨테이너 ===== */ #pointmallWraper .container{width:100%;} /* ===== 섹션 타이틀 (h4) ===== */ #pointmallWraper h4{width:100%; margin:8% 0 4% 0; overflow:hidden;} #pointmallWraper h4 .list_main_title{float:left; font-size:4.5vw; font-weight:700; color:var(--color-slate-900); white-space:nowrap; padding-right:3%; font-family:'Noto Sans KR', sans-serif !important; line-height:1; margin:0; padding-bottom:0;} #pointmallWraper h4 .default_centerLine{overflow:hidden; height:1px; background:var(--color-slate-300); margin-top:2.5vw;} /* ===== 포인트 지급내역 테이블 ===== */ #board_box{width:100%; overflow-x:auto; margin-bottom:6%;} #board_box .point_board_list{width:100%; border-collapse:collapse; border:1px solid var(--color-slate-300);} #board_box .point_board_list thead tr{background:var(--color-slate-700);} #board_box .point_board_list thead th{color:var(--color-white); font-size:3.2vw; font-weight:600; padding:3% 0; text-align:center; font-family:'Noto Sans KR', sans-serif !important; border-right:1px solid var(--color-slate-500);} #board_box .point_board_list thead th:last-child{border-right:none;} #board_box .point_board_list tbody tr{border-bottom:1px solid var(--color-slate-200);} #board_box .point_board_list tbody tr:last-child{border-bottom:none;} #board_box .point_board_list tbody td{color:var(--color-slate-700); font-size:3.2vw; padding:3% 1%; text-align:center; font-family:'Noto Sans KR', sans-serif !important; border-right:1px solid var(--color-slate-200); word-break:keep-all;} #board_box .point_board_list tbody td:last-child{border-right:none;} /* ===== 포인트 사용내역 ===== */ #pointmallWraper .point_use_box{width:100%;} #pointmallWraper .point_use_box > div{overflow:hidden; border:1px solid var(--color-slate-200); border-radius:2vw; margin-bottom:4%; padding:4%;} #pointmallWraper .point_use_box > div > ul{overflow:hidden; border:none; background:none;} #pointmallWraper .point_use_box > div > ul li{float:left; border:none; padding-bottom:0;} #pointmallWraper .point_use_box > div > ul li:first-child{width:22%;} #pointmallWraper .point_use_box > div > ul li:first-child img{width:100%; border-radius:1.5vw;} #pointmallWraper .point_use_box > div > ul li:last-child{width:78%;} #pointmallWraper .point_use_box > div > ul li .pro_title{color:var(--color-slate-700); font-size:3.5vw; text-align:left; margin-left:4%; font-family:'Noto Sans KR', sans-serif !important; font-weight:600; line-height:1.4;} #pointmallWraper .point_use_box > div > ul li .pro_title span{color:var(--color-slate-400); font-size:3vw; display:block; text-align:left; font-weight:400; margin-bottom:1%;} #pointmallWraper .point_use_box > div > ul li .use_point{color:var(--color-rose-600); font-size:4vw; font-weight:700; text-align:left; margin-left:4%; margin-top:4%; font-family:'Noto Sans KR', sans-serif !important;} #pointmallWraper .point_use_box > div .second_con{width:100%; overflow:hidden; margin-top:4%; border:1px solid var(--color-slate-200); border-collapse:collapse;} #pointmallWraper .point_use_box > div .second_con tbody th{text-align:center; color:var(--color-slate-500); font-size:2.8vw; font-family:'Noto Sans KR', sans-serif !important; font-weight:600; padding:2.5% 1%; background:var(--color-slate-100); border:1px solid var(--color-slate-200);} #pointmallWraper .point_use_box > div .second_con tbody td{text-align:left; color:var(--color-slate-700); font-size:2.8vw; font-family:'Noto Sans KR', sans-serif !important; padding:2.5% 2%; border:1px solid var(--color-slate-200);} /* ===== 상품 목록 (메인) ===== */ #pointmallWraper ul{overflow:hidden; background:var(--color-white); border:1px solid var(--color-slate-300); border-top:none;} #pointmallWraper ul.nth1{border-top:1px solid var(--color-slate-300);} #pointmallWraper ul li{float:left; width:50%; border-left:1px solid var(--color-slate-300); position:relative; padding-bottom:6%;} #pointmallWraper ul li:nth-child(odd){border-left:none;} #pointmallWraper ul li .proImg{width:84%; margin:0 auto; margin-top:8%;} #pointmallWraper ul li .title{width:96%; height:8vw; color:var(--color-slate-700); text-align:center; margin:0 auto; margin-top:4%; font-size:3.5vw; font-weight:600; line-height:4vw;} #pointmallWraper ul li .sale_plat{width:15%; height:auto; position:absolute; top:75%; right:2%;} #pointmallWraper ul li .priceBox{width:84%; height:12vw; border:1px solid var(--color-slate-300); margin:0 auto; margin-top:2%;} #pointmallWraper ul li .priceBox > div{width:40%; height:100%; background:var(--color-primary-700); float:left; font-weight:bold; text-align:center;} #pointmallWraper ul li .priceBox > div:nth-child(2){width:60%; background:var(--color-white);} #pointmallWraper ul li .priceBox > div > p{color:var(--color-white); margin-top:2vw; font-size:3vw;} #pointmallWraper ul li .priceBox > div > p.point{color:var(--color-rose-600); margin-top:3.5vw; font-size:3.8vw;} #pointmallWraper ul li .detailBtn{width:50%; margin:0 auto; margin-top:8%;} /* ===== 로그인 ===== */ #pointmallWraper .pw_research{float:right; background:var(--color-slate-400); padding:1% 3%; color:var(--color-white); font-size:3vw; font-weight:500; font-family:'Noto Sans KR', sans-serif !important; margin-top:6%; margin-right:10%; overflow:hidden;} #pointmallWraper .login_box{width:90%; margin:0 auto; margin-top:4%; overflow:hidden;} #pointmallWraper .login_box input{border:1px solid var(--color-slate-300); height:12vw; border-radius:2vw; background:none; -webkit-appearance:none; box-sizing:border-box; padding-left:4%; width:100%; font-size:3.5vw; color:var(--color-slate-700);} #pointmallWraper .btn_box{width:70%; margin:0 auto; margin-top:8%; overflow:hidden;} #pointmallWraper .btn_box > div{float:left; width:49%;} #pointmallWraper .btn_box > div:last-child{margin-left:2%;} /* ===== 뷰 ===== */ #pointmallWraper .mall_view{width:92%; margin:0 auto;} #pointmallWraper .mall_view h5{width:100%; margin:0 auto; margin-top:4%; font-size:4.5vw; color:var(--color-slate-900); font-weight:700; text-align:center; line-height:1.5;} #pointmallWraper .mall_view .priceBox{width:100%; height:17vw; border:1px solid var(--color-slate-300); border-left:none; margin:0 auto; margin-top:2%; position:relative;} #pointmallWraper .mall_view .priceBox .sale_plat{width:13%; height:auto; position:absolute; top:-30%; right:-5%;} #pointmallWraper .mall_view .priceBox > div{width:50%; height:100%; background:var(--color-white); float:left; font-weight:bold; text-align:center; font-size:3vw; padding:3vw; border-left:1px solid var(--color-slate-300);} #pointmallWraper .mall_view .priceBox > div > p{color:var(--color-white); margin-top:2vw; font-size:4vw;} #pointmallWraper .mall_view .priceBox > div > p.point{color:var(--color-rose-600); font-size:5vw;} #pointmallWraper .mall_view .priceBox > div > p.cash{color:var(--color-primary-700); font-size:5vw;} #pointmallWraper .mall_pro_view{width:100%;} #pointmallWraper .mall_pro_view .title{width:100%; background:var(--color-slate-700); padding:2% 0; text-align:center; margin-top:8%; color:var(--color-white); font-size:4vw; font-weight:bold;} #pointmallWraper .mall_pro_view .set_products{width:100%; margin:0 auto; margin-top:8%; overflow:hidden; padding-bottom:8%;} #pointmallWraper .mall_pro_view .set_products ul{overflow:hidden;} #pointmallWraper .mall_pro_view .set_products ul li{width:50%; height:39vw; float:left; cursor:pointer;} #pointmallWraper .view_payment_box{width:100%; position:fixed; bottom:0; left:0; background:var(--color-slate-100); border-top:1px solid var(--color-slate-300); padding:2% 4%;} #pointmallWraper .view_payment_box .payment_btn{width:100%; background:var(--color-primary-700); color:var(--color-white); font-size:4.5vw; font-weight:bold; text-align:center; padding:3% 0; border-radius:2vw;} #pointmallWraper .payment_page_title{width:100%; background:var(--color-slate-100); border-bottom:1px solid var(--color-slate-300); padding:3% 4%; font-weight:bold; color:var(--color-slate-900); font-size:5vw; position:relative;} #pointmallWraper .payment_page_title .cancel{position:absolute; right:4%; top:50%; transform:translateY(-50%); color:var(--color-slate-500); background:var(--color-white); border:1px solid var(--color-slate-300); font-size:3vw; font-weight:bold; padding:1.5% 3%; border-radius:1vw;} #pointmallWraper .result_box{background:var(--color-primary-500); width:92%; margin:0 auto; overflow:hidden; border-radius:3vw; padding-bottom:4%; margin-top:6%; margin-bottom:6%;} #pointmallWraper .result_box h2{color:var(--color-white); font-weight:bold; margin-left:4%; margin-top:4%; font-size:4.5vw;} #pointmallWraper .result_box .result_con_box{width:92%; margin:0 auto; margin-top:3%; padding-bottom:3%; background:var(--color-white); border-radius:2.5vw; overflow:hidden;} #pointmallWraper .result_box .result_con_box ul{width:92%; margin:0 auto; margin-top:3%; border:none;} #pointmallWraper .result_box .result_con_box ul li{width:100%; border-bottom:1px solid var(--color-slate-200); color:var(--color-slate-900); border-left:none; font-size:3.5vw; padding:3% 0 2% 0;} #pointmallWraper .result_box .result_con_box ul li:last-child{border-bottom:none;} #pointmallWraper .result_box .notice{color:var(--color-white); margin-top:4%; margin-left:4%; font-size:3.2vw;} #pointmallWraper .result_box .notice span{color:var(--color-rose-600);} /* ===== 신청 박스 ===== */ #applyBox{width:100%; margin:0 auto; margin-top:8%; box-sizing:border-box;} #applyBox ul.view_apply_tab{width:100%; overflow:hidden;} #applyBox ul.view_apply_tab > li{width:33.3%; float:left; overflow:hidden;} #applyBox .applyCon{overflow:hidden; width:96%; height:auto;} #applyBox .applyCon h6{font-size:4vw; color:var(--color-slate-700); font-weight:600; margin-top:6%; text-align:left;} #applyBox .applyCon .apply{overflow:hidden; width:100%; margin-top:2%; border-top:2px solid var(--color-slate-500); border-collapse:collapse;} #applyBox .applyCon .apply tbody{background:var(--color-white);} #applyBox .applyCon .apply tbody th{background:var(--color-slate-100); color:var(--color-slate-500); font-size:3.5vw; padding:2%; text-align:right; border-bottom:1px solid var(--color-slate-300); border-right:1px solid var(--color-slate-300);} #applyBox .applyCon .apply tbody td{color:var(--color-slate-700); font-size:3.5vw; padding:2%; text-align:left; border-bottom:1px solid var(--color-slate-300);} #applyBox .applyCon .apply tbody td span{color:var(--color-rose-600); font-size:3vw; margin-left:2%;} #applyBox .applyCon .apply tbody td input{border:1px solid var(--color-slate-300); height:9vw; color:var(--color-slate-700); font-size:3.5vw; padding-left:2%; width:100%; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none;} #applyBox .applyCon .apply tbody td textarea{border:1px solid var(--color-slate-300); color:var(--color-slate-700); font-size:3.5vw; padding:2%; width:100%; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none;} #applyBox .applyCon .btn_point{width:60%; height:12vw; margin:0 auto; margin-top:6%; background:var(--color-rose-600); text-align:center; font-size:4.5vw; color:var(--color-white); font-weight:bold; line-height:12vw; border-radius:2vw;} #applyBox .applyCon .btn_cash{width:60%; height:12vw; margin:0 auto; margin-top:6%; background:var(--color-primary-700); text-align:center; font-size:4.5vw; color:var(--color-white); font-weight:bold; line-height:12vw; border-radius:2vw;}