2024/12/03 모바일 사용자화면 css 수정
This commit is contained in:
parent
e1360bc23e
commit
4dc826ac8b
@ -33,8 +33,8 @@
|
||||
<li>
|
||||
<p class="title depth03 blue_border">분쟁조정 신청 유형을 잘 모르시겠다면 하단의 안내를 확인하시거나, 신청 전 상담을 받아보시기 바랍니다.</p>
|
||||
<div class="btn_wrap left">
|
||||
<button type="button" class="btn btn_text btn_35 skyblue_fill">분쟁조정 대상 유형 알아보기</button>
|
||||
<button type="button" class="btn btn_text btn_35 skyblue_fill">분쟁조정 사례 확인하기</button>
|
||||
<button type="button" class="btn btn_text btn_35 skyblue_fill" onclick="location.href='/web/content.do?proFn=9989110'">분쟁조정 대상 유형 알아보기</button>
|
||||
<button type="button" class="btn btn_text btn_35 skyblue_fill" onclick="location.href='/web/user/exam/case/402/162/exam402List.do'">분쟁조정 사례 확인하기</button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
@ -105,7 +105,7 @@
|
||||
</div>
|
||||
<div class="bbs-view-item">
|
||||
<p class="item-title"><span style="color: red">*</span> 성별</p>
|
||||
<div class="item-box">
|
||||
<div class="item-box input_box">
|
||||
<label><input type="radio" name="joinGender" value="M" <c:if test="${memberInfo.MEMBER_ITEM_B2 == 'M'}">checked="checked"</c:if>>남</label>
|
||||
<label><input type="radio" name="joinGender" value="F" <c:if test="${memberInfo.MEMBER_ITEM_B2 == 'F'}">checked="checked"</c:if>>여</label>
|
||||
</div>
|
||||
@ -477,7 +477,7 @@
|
||||
var url = "/user/case/common/ajax/MemberDept.do";
|
||||
XHR(url, param, function(r){
|
||||
$.each(r.data, function(k,v) {
|
||||
$("#changePartDiv").append('<label><input type="checkbox" name="changeParts" style="position: relative; margin-top: -3px !important; vertical-align: middle !important;" value="'+v.code+'">'+v.value+'</label> ');
|
||||
$("#changePartDiv").append('<label><input type="checkbox" name="changeParts" style="position: relative; margin-top: -3px !important; vertical-align: middle !important;" value="'+v.code+'">'+v.value+'</label>');
|
||||
|
||||
if(k == 6) {
|
||||
$("#changePartDiv").append('<br/>');
|
||||
|
||||
@ -106,7 +106,7 @@
|
||||
</div>
|
||||
<div class="bbs-view-item">
|
||||
<p class="item-title"><span style="color: red">*</span> 성별</p>
|
||||
<div class="item-box">
|
||||
<div class="item-box input_box">
|
||||
<label><input type="radio" name="joinGender" value="M" checked="checked">남</label>
|
||||
<label><input type="radio" name="joinGender" value="F">여</label>
|
||||
</div>
|
||||
@ -421,7 +421,7 @@
|
||||
var url = "/user/case/common/ajax/MemberDept.do";
|
||||
XHR(url, param, function(r){
|
||||
$.each(r.data, function(k,v) {
|
||||
$("#changePartDiv").append('<label><input type="checkbox" name="changeParts" style="position: relative; margin-top: -3px !important; vertical-align: middle !important;" value="'+v.code+'">'+v.value+'</label> ');
|
||||
$("#changePartDiv").append('<label><input type="checkbox" name="changeParts" style="position: relative; margin-top: -3px !important; vertical-align: middle !important;" value="'+v.code+'">'+v.value+'</label>');
|
||||
|
||||
if(k == 6) {
|
||||
$("#changePartDiv").append('<br/>');
|
||||
|
||||
@ -1676,7 +1676,7 @@ function showConsignmentGubun(){
|
||||
</c:forEach>
|
||||
</c:if>
|
||||
<c:if test="${empty applcntData}">
|
||||
<div class="bbs-view-item" align="center" style="border-top:2px solid #222;">
|
||||
<div class="bbs-view-item" align="center" style="display:flex;justify-content:center;align-items:center;border-top:2px solid #222;">
|
||||
등록된 데이터가 없습니다.
|
||||
</div>
|
||||
</c:if>
|
||||
@ -1782,7 +1782,7 @@ function showConsignmentGubun(){
|
||||
</c:if>
|
||||
|
||||
<c:if test="${empty applcntData}">
|
||||
<div class="bbs-view-item" align="center" style="border-top:2px solid #222;">
|
||||
<div class="bbs-view-item" align="center" style="display:flex;justify-content:center;align-items:center;border-top:2px solid #222;">
|
||||
등록된 데이터가 없습니다.
|
||||
</div>
|
||||
</c:if>
|
||||
@ -1910,7 +1910,7 @@ function showConsignmentGubun(){
|
||||
</c:if>
|
||||
|
||||
<c:if test="${empty respondentData}">
|
||||
<div class="bbs-view-item" align="center" style="border-top:2px solid #222;">
|
||||
<div class="bbs-view-item" align="center" style="display:flex;justify-content:center;align-items:center;border-top:2px solid #222;">
|
||||
등록된 데이터가 없습니다.
|
||||
</div>
|
||||
</c:if>
|
||||
@ -2016,7 +2016,7 @@ function showConsignmentGubun(){
|
||||
</c:if>
|
||||
<c:if test="${empty selectResagent}">
|
||||
<c:if test="${empty respondentData}">
|
||||
<div class="bbs-view-item" align="center" style="border-top:2px solid #222;">
|
||||
<div class="bbs-view-item" align="center" style="display:flex;justify-content:center;align-items:center;border-top:2px solid #222;">
|
||||
등록된 데이터가 없습니다.
|
||||
</div>
|
||||
</c:if>
|
||||
|
||||
@ -73,6 +73,7 @@ content="default-src * self blob: data: gap:; style-src * self 'unsafe-inline' b
|
||||
<c:if test="${
|
||||
fn:contains(URL, '/web/user')
|
||||
&& fn:contains(URL, 'mediationStep')
|
||||
|| fn:contains(URL, '/web/user/mediation/case/01/154/mediationApp.do')
|
||||
&& fn:contains(URL, '.do')
|
||||
}">
|
||||
<link rel="stylesheet" href="/kofair_case_seed/usr/style/popup.css">
|
||||
|
||||
@ -51,10 +51,12 @@ function header() {
|
||||
// 전체메뉴
|
||||
$(".btn_all_menu").click(function(){
|
||||
$(".full_all_menu").addClass("active");
|
||||
$("body,html").css("overflow","hidden");
|
||||
});
|
||||
|
||||
$(".full_all_menu .btn_menu_close").click(function(){
|
||||
$(".full_all_menu").removeClass("active");
|
||||
$("body,html").removeAttr("style");
|
||||
})
|
||||
|
||||
// ================= 모바일 header =================
|
||||
|
||||
@ -153,10 +153,10 @@ input:disabled, input:read-only{background:#f8f9fa;border:1px solid #d8d8d8;}
|
||||
:not(.window_popup.idf) .btn{border-radius:10px;}
|
||||
:not(.window_popup.idf) .btn:hover{box-shadow:none;}
|
||||
|
||||
:not(.window_popup.idf) .btn_35{height:70px;font-size:3.2rem;padding:0 50px;}
|
||||
:not(.window_popup.idf) .btn_40{height:80px;font-size:3.4rem;padding:0 38px;}
|
||||
:not(.window_popup.idf) .btn_45{height:90px;font-size:3.4rem;padding:0 36px;}
|
||||
:not(.window_popup.idf) .btn_50{height:100px;font-size:4rem;}
|
||||
:not(.window_popup.idf) .btn_35{min-height:70px;font-size:3.2rem;padding:0 50px;}
|
||||
:not(.window_popup.idf) .btn_40{min-height:80px;font-size:3.4rem;padding:0 38px;}
|
||||
:not(.window_popup.idf) .btn_45{min-height:90px;font-size:3.4rem;padding:0 36px;}
|
||||
:not(.window_popup.idf) .btn_50{min- height:100px;font-size:4rem;}
|
||||
|
||||
|
||||
/* 노출/숨김 */
|
||||
@ -199,11 +199,11 @@ input:disabled, input:read-only{background:#f8f9fa;border:1px solid #d8d8d8;}
|
||||
@media screen and (max-width: 767px){
|
||||
|
||||
/* 버튼 */
|
||||
:not(.window_popup.idf) .btn{border-radius:5px;}
|
||||
:not(.window_popup.idf) .btn_35{height:35px;font-size:1.6rem;padding:0 25px;}
|
||||
:not(.window_popup.idf) .btn_40{height:40px;font-size:1.7rem;padding:0 18px;}
|
||||
:not(.window_popup.idf) .btn_45{height:45px;font-size:1.7rem;padding:0 18px;}
|
||||
:not(.window_popup.idf) .btn_50{height:50px;font-size:2rem;}
|
||||
:not(.window_popup.idf) .btn{border-radius:5px;height:auto;}
|
||||
:not(.window_popup.idf) .btn_35{min-height:35px;font-size:1.6rem;padding:0 25px;}
|
||||
:not(.window_popup.idf) .btn_40{min-height:40px;font-size:1.7rem;padding:0 18px;}
|
||||
:not(.window_popup.idf) .btn_45{min-height:45px;font-size:1.7rem;padding:0 18px;}
|
||||
:not(.window_popup.idf) .btn_50{min-height:50px;font-size:2rem;}
|
||||
|
||||
/* input, select, textarea */
|
||||
:not(.window_popup.idf) .input_text, .input_calendar .duet-date__input{height:40px;font-size:1.7rem;border-radius:5px;padding:0 10px;}
|
||||
|
||||
@ -286,7 +286,7 @@
|
||||
/* //바로가기 */
|
||||
|
||||
/* 사례 */
|
||||
.case_content{padding:30px 0 0 0;}
|
||||
.case_content{padding:30px 0 26px 0;}
|
||||
.case_content .title_wrap{margin:0 0 17px 0;}
|
||||
.case_content .title{font-size:1.9rem;}
|
||||
.case_content .title .btn_plus,.case_content .case_slide_util .btn.only_icon{width:30px;height:30px;padding:0;}
|
||||
@ -309,7 +309,7 @@
|
||||
.notice_content .tab:first-child::after{width:4px;height:4px;right:-2px;}
|
||||
.notice_content .tab:first-child{padding:0 13px 0 0;}
|
||||
.notice_content .tab_content.active{height:200px;margin:22.5px 0 0 0;}
|
||||
.notice_content .tab_content .btn_plus{width:30px;height:30px;left:218px;top:15px;}
|
||||
.notice_content .tab_content .btn_plus{width:30px;height:30px;left:218px;top:15px;padding:0;}
|
||||
.notice_content .tab_content .btn_plus .icon.plus{background-size:100%;margin:0;;}
|
||||
.notice_content a{font-size:1.7rem;padding:0 0 15px 8px;}
|
||||
.notice_content a::after{width:3px;height:3px;top:10.5px;}
|
||||
@ -338,7 +338,7 @@
|
||||
|
||||
/* 배너 */
|
||||
.banner_contents .case_slide_util{margin:20px 0 0 0;}
|
||||
.banner_contents .case_slide_util .btn.only_icon{width:30px;height:30px;}
|
||||
.banner_contents .case_slide_util .btn.only_icon{width:30px;height:30px;padding:0;}
|
||||
.banner_contents .btn.only_icon .icon.left, .banner_contents .btn.only_icon .icon.pause, .banner_contents .btn.only_icon .icon.right{width:100%;height:30px;background-size:100%;}
|
||||
/* //배너 */
|
||||
}
|
||||
|
||||
@ -63,7 +63,7 @@ html{font-size:62.5%;}
|
||||
.full_all_menu .nav::after{position:absolute;content:"";width:100%;height:4px;background:#2e40ba;top:80px;}
|
||||
.full_all_menu .menu_ul li{width:calc(100%/5);height:auto;text-align:center;}
|
||||
.full_all_menu .menu_title{display:flex;width:100%;height:80px;font-size:23px;font-weight:bold;color:#333;justify-content:center;align-items:center;}
|
||||
.full_all_menu .depth02_ul{display:flex;height:calc(100% - 95px);padding:32px 0 35px 30px;border-right:1px solid #d8d8d8;flex-direction:column;gap:25px;}
|
||||
.full_all_menu .depth02_ul{display:flex;height:calc(100% - 95px);padding:32px 0 35px 30px;border-right:1px solid #d8d8d8;flex-direction:column;gap:20px;}
|
||||
.full_all_menu li:last-child .depth02_ul{border-right:0;}
|
||||
.full_all_menu .depth02_ul li{width:100%;text-align:left;}
|
||||
.full_all_menu .depth02{display:flex;font-size:21px;font-weight:500;color:#333;align-items:center;}
|
||||
@ -171,9 +171,15 @@ html{font-size:62.5%;}
|
||||
|
||||
.mobile_header{height:63px;padding:0 30px;}
|
||||
.mobile_header .logo{width:55%;}
|
||||
.mobile_header .header_util button{width:30px;height:30px;}
|
||||
.mobile_header .header_util{gap:11px;}
|
||||
.mobile_header .header_util button{width:30px;height:20px;height:auto !important;max-height:30px;}
|
||||
.mobile_header .header_util button i{height:100%;background-size:auto 100%;}
|
||||
.mobile_header .header_util .btn_menu i{background-size:100% auto;}
|
||||
/* .mobile_header .header_util .btn_menu i{background-size:auto ;} */
|
||||
|
||||
.mobile_header .search_area{height:60px;bottom:-60px;}
|
||||
.mobile_header .search_area .input_search{width:calc(100% - 75px);height:40px;padding:0 15px;font-size:1.5rem;}
|
||||
.mobile_header .search_area .btn_search{width:60px;height:40px;border-radius:5px;}
|
||||
.mobile_header .search_area .btn_search i{width:40px;height:40px;background-size:23px;}
|
||||
|
||||
.mobile_header .all_menu_wrap .btn_menu_close{width:32px;height:32px;}
|
||||
.mobile_header .all_menu_wrap .btn_menu_close i{background-size:100% auto;}
|
||||
@ -213,3 +219,7 @@ html{font-size:62.5%;}
|
||||
/* //footer */
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px){
|
||||
.mobile_header{padding:0 15px;}
|
||||
}
|
||||
@ -73,7 +73,7 @@
|
||||
.page a{display:flex;width:40px;height:40px;font-size:1.7rem;color:#666;border-radius:5px;align-items:center;justify-content:center;}
|
||||
.page a:hover{background:#e5e5e5;}
|
||||
.page .active,.page .active:hover{background:#888888;font-weight:500;color:#fff;}
|
||||
.page .only_icon{border:1px solid #d8d8d8;margin:0 5px;}
|
||||
.page .only_icon{border:1px solid #d8d8d8;margin:0 5px;padding:0 !important;}
|
||||
.page i{width:40px;height:40px;}
|
||||
.page .page_first{background:url(/kofair_case_seed/usr/images/component/icon_page_first.png) center center;}
|
||||
.page .page_prev{background:url(/kofair_case_seed/usr/images/component/icon_page_prev.png) center center;}
|
||||
@ -309,15 +309,16 @@
|
||||
.sub_con_tit{font-size:5rem;margin:60px 0 0 0;}
|
||||
.sub_con_sub_tit{font-size:3.4rem;margin:80px 0 ;}
|
||||
.search_wrap{padding:60px;margin:80px 0;gap:20px;}
|
||||
:not(.window_popup.idf) .search_wrap select[name=search_category],.search_wrap select[name=reservation_category]{width:100%;}
|
||||
:not(.window_popup.idf) .search_wrap select[name=search_category],.search_wrap select[name=reservation_category],.search_wrap select[name=searchMenu]{width:100%;}
|
||||
:not(.window_popup.idf) .search_wrap select[name=search_type],.search_wrap select[name=searchType]{width:180px;}
|
||||
:not(.window_popup.idf) .search_wrap .input_text{width:calc(100% - 290px);height:80px;}
|
||||
:not(.window_popup.idf) .search_wrap .select+.select+.input_text{width:calc(100% - 330px);}
|
||||
:not(.window_popup.idf) .search_wrap .btn_search{width:110px;height:80px;padding:0;font-size:3.6rem;padding:0;}
|
||||
|
||||
.page a{font-size:3.4rem;}
|
||||
.page a,.page .only_icon{width:80px;height:80px;border-radius:10px;}
|
||||
.page i{width:80px;height:80px;}
|
||||
.page li:nth-child(n+6):nth-child(-n+12){display:none;}
|
||||
.page li:nth-child(n+6):nth-child(-n+11){display:none;}
|
||||
.page .page_first{background:url(/kofair_case_seed/usr/images/component/icon_page_first_80.png) center center;}
|
||||
.page .page_prev{background:url(/kofair_case_seed/usr/images/component/icon_page_prev_80.png) center center;}
|
||||
.page .page_next{background:url(/kofair_case_seed/usr/images/component/icon_page_next_80.png) center center;}
|
||||
@ -495,11 +496,11 @@
|
||||
.page_location .icon.home{width:19px;height:19px;background:url(/kofair_case_seed/usr/images/component/icon_home.png) no-repeat center center;}
|
||||
|
||||
.sub_con_tit{font-size:2.5rem;margin:30px 0 0 0;}
|
||||
.sub_con_sub_tit{font-size:1.7rem;margin:40px 0;}
|
||||
.sub_con_sub_tit{font-size:1.7rem;margin:40px 0;line-height:1.4;}
|
||||
.search_wrap{padding:30px;margin:40px 0;gap:10px;}
|
||||
:not(.window_popup.idf) .search_wrap select[name=search_category]{width:100%;}
|
||||
:not(.window_popup.idf) .search_wrap select[name=search_category],:not(.window_popup.idf) .search_wrap select[name=searchMenu]{width:100%;}
|
||||
:not(.window_popup.idf) .search_wrap select[name=search_type],:not(.window_popup.idf) .search_wrap select[name=searchType]{width:90px;}
|
||||
:not(.window_popup.idf) .search_wrap .input_text{width:calc(100% - 220px);height:40px;}
|
||||
:not(.window_popup.idf) .search_wrap .input_text,:not(.window_popup.idf) .search_wrap .select+.select+.input_text{width:calc(100% - 220px);height:40px;}
|
||||
:not(.window_popup.idf) .search_wrap .btn_search{width:80px;height:40px;font-size:1.8rem;}
|
||||
|
||||
.page a, .page .only_icon,.page i{width:40px;height:40px;border-radius:5px;font-size:1.7rem;}
|
||||
@ -520,21 +521,21 @@
|
||||
.mobile_view_table table{margin:20px 0 0 0;border-top:2px solid #2e40ba;}
|
||||
.mobile_view_table table thead th,.mobile_view_table table tbody td{height:50px;border-bottom:1px solid #d8d8d8;border-right:1px solid #d8d8d8;}
|
||||
|
||||
.table_type_rows table{font-size:1.7rem;margin:10px 0 0 0;border-top:2px solid #2e40ba;}
|
||||
.table_type_rows table tbody th,.table_type_rows table tbody td{display:flex;min-height:58px;padding:7px 10px;}
|
||||
.table_type_rows table tbody th{padding:7px 22.5px;}
|
||||
:not(.window_popup.idf) .table_type_rows table{font-size:1.7rem;margin:10px 0 0 0;border-top:2px solid #2e40ba;}
|
||||
:not(.window_popup.idf) .table_type_rows table tbody th,.table_type_rows table tbody td{display:flex;min-height:58px;padding:7px 10px;}
|
||||
:not(.window_popup.idf) .table_type_rows table tbody th{padding:7px 22.5px;}
|
||||
|
||||
.table_type_rows table .select{font-size:1.6rem;padding:0 14px;background-position:calc(100% - 14px);}
|
||||
:not(.window_popup.idf) .table_type_rows table .select{font-size:1.6rem;padding:0 14px;background-position:calc(100% - 14px);}
|
||||
|
||||
.table_type_rows table .phone_wrap{width:100%;}
|
||||
.table_type_rows table .phone_wrap *,.table_type_rows table .phone_wrap .input_text{width:calc((100% / 3) - 10px);}
|
||||
:not(.window_popup.idf) .table_type_rows table .phone_wrap{width:100%;}
|
||||
:not(.window_popup.idf) .table_type_rows table .phone_wrap *,.table_type_rows table .phone_wrap .input_text{width:calc((100% / 3) - 10px);}
|
||||
|
||||
.table_type_rows table .email_wrap{gap:10px;}
|
||||
.table_type_rows table .email_wrap .input_email:first-child{width:calc(100% - 40px);}
|
||||
.table_type_rows table .email_wrap .input_email:nth-child(2){width:55%;}
|
||||
.table_type_rows table .email_wrap .email_select{width:calc(45% - 10px);}
|
||||
:not(.window_popup.idf) .table_type_rows table .email_wrap{gap:10px;}
|
||||
:not(.window_popup.idf) .table_type_rows table .email_wrap .input_email:first-child{width:calc(100% - 40px);}
|
||||
:not(.window_popup.idf) .table_type_rows table .email_wrap .input_email:nth-child(2){width:55%;}
|
||||
:not(.window_popup.idf) .table_type_rows table .email_wrap .email_select{width:calc(45% - 10px);}
|
||||
|
||||
.table_type_rows table+.cf_text{margin:30px 0 0 0;}
|
||||
:not(.window_popup.idf) .table_type_rows table+.cf_text{margin:30px 0 0 0;}
|
||||
|
||||
/* view */
|
||||
.list_view_tit{font-size:2.1rem;}
|
||||
@ -637,8 +638,11 @@
|
||||
/* sub layout */
|
||||
.contents.sub .inner{padding:0 20px;}
|
||||
|
||||
.search_wrap select[name=search_category],.search_wrap select[name=search_type]{width:100%;}
|
||||
.search_wrap .input_text{width:calc(100% - 90px);}
|
||||
.search_wrap li{flex-wrap:wrap;}
|
||||
:not(.window_popup.idf) .search_wrap .select{width:100% !important;}
|
||||
:not(.window_popup.idf) .search_wrap select[name=search_category],.search_wrap select[name=search_type]{width:100%;}
|
||||
:not(.window_popup.idf) .search_wrap .input_text,:not(.window_popup.idf) .search_wrap .input_text, :not(.window_popup.idf) .search_wrap .select+.select+.input_text{width:calc(100% - 90px);}
|
||||
.search_wrap .calendar_term{width:100%;}
|
||||
|
||||
.page a, .page .only_icon, .page i{width:35px;height:35px;padding:0;}
|
||||
.page .only_icon{margin:0 2.5px;}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user