@charset "utf-8";
/* @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en"); */
/* @import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700"); */

/* https://codepen.io/moonspam/pen/wqVKPO */

/*
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
body        { font: 24px/30px 'Noto Sans KR', sans-serif; }
.thin       { font-weight: 100 }
.light      { font-weight: 300 }
.regular    { font-weight: 400 }
.medium     { font-weight: 500 }
.bold       { font-weight: 700 }
.bolder     { font-weight: 900 }
*/


/*
// iOS 11.0 버전
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)
// iOS 11.2 이상
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)
*/


html	{ font-size: 18px; }
/* body	{ font: 24px/30px 'Noto Sans KR', sans-serif; background-color: #f8f8f8; } */
/* body	{ width: calc(100vw); height: calc(100vh); margin: 0; padding: 0; font: 24px/30px 'NEXON Lv1 Gothic OTF', sans-serif; background-color: #fff !important; display: none; } */
body	{ width: calc(100vw); height: calc(100vh); margin: 0; padding: 0; font: 24px/30px 'Gmarket Sans', sans-serif; background-color: #ffffff !important; display: none; }

body.modal-open { overflow: hidden; overflow-y: hidden; }

div		{ box-sizing: border-box; clear: both; }

html, body, div { overflow: scroll-y; -webkit-overflow-scrolling: touch; }

#topBar { width: 100%; height: 58px; position: relative; background-color: #ffffff; text-align: center; z-index: 1000; box-shadow: rgb(17 17 26 / 5%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 24px, rgb(17 17 26 / 5%) 0px 16px 20px; }
#wrapper { height: calc(100vh); overflow: hidden; }
 
#topBar .myAlarmList { width: 25px; height: 30px; position: absolute; top: 16px; right: 20px; cursor: pointer;
	background-image: url("../img/header/icon_alarm.png"); background-repeat: no-repeat; background-size: contain;  }
#topBar .myAlarmList.on { background-image: url("../../mobi/top/top_alarm_off.png"); }

#topBar .viewBackBtn { width: 30px; height: 30px; position: absolute; top: 14px; left: 20px; cursor: pointer; 
						background-image: url("../../mobi/top/top_back.png"); background-repeat: no-repeat; background-size: contain;
						}
#topBar .viewBackBtn:after { content: ''; color: #BEBEBE; font-size: 15px; font-weight: 700; }
#topBar .viewTitle { display: none; width: 100%; font-weight: 500; text-align:center; line-height: 40px; border-bottom: 1px solid #e3e3e3; font-weight: bold; font-size: 16px;}
#topBar .viewTitleBG { display: inline-block; width: 129px; font-weight: 500; text-align:center; height: 30px; line-height: 30px;
    margin: 14px 0px;  background-image: url("../../mobi/top/top_logo.png"); background-repeat: no-repeat; background-size: contain;
}


#topBar .btn_my_configBtn { width: 24px; height: 24px; position: absolute; top: 6px; right: 10px; cursor: pointer; }
#topBar .btn_my_configBtn img{width:100%;height:100%;}

#topBar .btn_alarmBtn { width: 21px; height: 24px; position: absolute; top: 16px; right: 20px; cursor: pointer; 
						background-image: url("../../mobi/top/top_alarm_off.png"); background-repeat: no-repeat; background-size: contain; }
#topBar .btn_alarmBtn.on { background-image: url("../../mobi/top/top_alarm_on.png"); background-repeat: no-repeat; background-size: contain; }
#topBar .btn_alarmBtn img{width:100%;height:100%;}


/*
#topBar .btnLogin { width: 23px; height: 30px; position: absolute; top: 16px; left: 20px; cursor: pointer;
	background-image: url("../img/header/icon_login.png"); background-repeat: no-repeat; background-size: contain;  }
#topBar .btnLogin.on { border: 1px solid #cf1820; }
*/



/* #mainViewTitleBar .btn_my_configBtn { width: 24px; height: 24px; position: absolute; top: 6px; right: 10px; cursor: pointer; } */
/* #mainViewTitleBar .btn_my_configBtn img{width:100%;height:100%;} */
#mainViewTitleBar { width: 100%; height: 58px; position: relative; background-color: #ffffff; text-align: center; z-index: 1000; box-shadow: rgb(17 17 26 / 5%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 24px, rgb(17 17 26 / 5%) 0px 16px 20px; }
#mainViewTitleBar .viewBackBtn { width: 30px; height: 30px; position: absolute; top: 14px; left: 20px; cursor: pointer; background-image: url("../../mobi/top/top_back.png"); background-repeat: no-repeat; background-size: contain; }
#mainViewTitleBar .viewBackBtn:after { content: ''; color: #BEBEBE; font-size: 15px; font-weight: 700; }
#mainViewTitleBar .viewTitle { display: none; width: 100%; font-weight: 500; text-align:center; line-height: 40px; border-bottom: 1px solid #e3e3e3; font-weight: bold; font-size: 16px;}
#mainViewTitleBar .viewTitleBG { display: inline-block; width: 129px; font-weight: 500; text-align:center; height: 30px; line-height: 30px;
    margin: 14px 0px;  background-image: url("../../mobi/top/top_logo.png"); background-repeat: no-repeat; background-size: contain;
}

#mainViewTitleBar .btn_alarmBtn { width: 21px; height: 24px; position: absolute; top: 16px; right: 20px; cursor: pointer; 
						background-image: url("../../mobi/top/top_alarm_off.png"); background-repeat: no-repeat; background-size: contain; }
#mainViewTitleBar .btn_alarmBtn.on { background-image: url("../../mobi/top/top_alarm_on.png"); background-repeat: no-repeat; background-size: contain; }
#mainViewTitleBar .btn_alarmBtn img{width:100%;height:100%;}

#titleBar { width: 100%; height: 58px; position: relative; background-color: #ffffff; text-align: center; z-index: 1000; box-shadow: rgb(17 17 26 / 5%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 24px, rgb(17 17 26 / 5%) 0px 16px 20px; }
#titleBar .viewBackBtn { width: 30px; height: 30px; position: absolute; top: 14px; left: 20px; cursor: pointer; background-image: url("../../mobi/top/top_back.png"); background-repeat: no-repeat; background-size: contain; }
#titleBar .viewBackBtn:after { content: ''; color: #BEBEBE; font-size: 15px; font-weight: 700; }
#titleBar .viewTitle { display: none; width: 100%; font-weight: 500; text-align:center; line-height: 40px; border-bottom: 1px solid #e3e3e3; font-weight: bold; font-size: 16px;}
#titleBar .viewTitleBG { display: inline-block; width: 129px; font-weight: 500; text-align:center; height: 30px; line-height: 30px;
    margin: 14px 0px;  background-image: url("../../mobi/top/top_logo.png"); background-repeat: no-repeat; background-size: contain;
}

#titleBar .btn_alarmBtn { width: 21px; height: 24px; position: absolute; top: 16px; right: 20px; cursor: pointer; 
						background-image: url("../../mobi/top/top_alarm_off.png"); background-repeat: no-repeat; background-size: contain; }
#titleBar .btn_alarmBtn.on { background-image: url("../../mobi/top/top_alarm_on.png"); background-repeat: no-repeat; background-size: contain; }
#titleBar .btn_alarmBtn img{width:100%;height:100%;}


#shopViewTitleBar { width: 100%; height: 46px; position: relative; text-align: center; color: #000000; font-size: 18px; border-bottom: none;  background-color: #f8f8f8; }
/* #shopViewTitleBar .viewBackBtn { width: 18px; height: 24px; position: absolute; top: 8px; left: 20px; cursor: pointer; background-image: url("../img/frame/btn_view_back.png"); background-repeat: no-repeat; background-size: contain; } */
#shopViewTitleBar .viewBackBtn { width: 18px; height: 24px; position: absolute; top: 6px; left: 10px; cursor: pointer; }
#shopViewTitleBar .viewBackBtn:after { content: '<'; color: #000000; font-size: 15px; font-weight: 700; }
#shopViewTitleBar .viewTitle { display: inline-block; width: 100%; text-align: left; font-weight: 500; line-height: 45px; padding-left: 40px; border-bottom: 1px solid #e3e3e3; }

#shopViewTitleBar.topTitleBarFixed { position: fixed; top: 40px; z-index: 1; }

.bodyWrapper { position: relative; width: 100%; height: 100%; min-height: calc(100vh - (40px + 70px)); background-color: #f8f8f8; }
.bodyContents { width: 100%; height: 100%; background-color: #f8f8f8; min-height: calc(100vh - (40px + 70px)); overflow-y: auto; }

.bodyContents#main { display: none; }
.bodyContents#menuView { position: absolute; top: 0px; left: calc(100vw); width: 100%; height: 100%; background-color: #f8f8f8; display: none; min-height: calc(100vh); }
.bodyContents#subView  { position: absolute; top: 0px; left: calc(100vw); width: 100%; height: 100%; background-color: #f8f8f8; display: none; min-height: calc(100vh); }
.bodyContents#subView2 { position: absolute; top: 0px; left: calc(100vw); width: 100%; height: 100%; background-color: #f8f8f8; display: none; min-height: calc(100vh); }
.bodyContents#shopView { position: absolute; top: 0px; left: calc(100vw); width: 100%; height: 100%; background-color: #f8f8f8; display: none; min-height: calc(100vh); }
.bodyContents#cartView { position: absolute; top: 0px; left: calc(100vw); width: 100%; height: 100%; background-color: #f8f8f8; display: none; min-height: calc(100vh); }

.bodyContents#main.open { display: block; }
.bodyContents#menuView.open { display: block; left: 0; overflow-x:hidden;  }
.bodyContents#subView.open  { display: block; left: 0; }
.bodyContents#subView2.open { display: block; left: 0; }
.bodyContents#shopView.open { display: block; left: 0; z-index: 1025; }
.bodyContents#cartView.open { display: block; left: 0; }

.bodyContents .contentsBody { padding: 0px calc(6vw) 60px calc(6vw); box-sizing: border-box; margin-bottom: 150px; min-height: calc(70vh); }

.sideButtonBar { position: fixed; bottom: 58px; right: 10px; z-index: 1029; text-align: right; }
.btn_my_cart { width: 53px; height: 53px; cursor: pointer; display: inline-block; margin-bottom: 30px;
	background-image: url("../img/frame/btn_cart.png"); background-repeat: no-repeat; background-size: 100% 100%; 
	box-shadow: rgb(17 17 26 / 10%) 0px 4px 16px, rgb(17 17 26 / 10%) 0px 8px 24px, rgb(17 17 26 / 10%) 0px 16px 56px;
    border-radius: 30px;
}
.btn_my_cart.off { display: none; }
.btn_my_cart span { 
	width: 22px; height: 22px; position: absolute; top: 8px; right: 5px;
	background-color: #ededed; border-radius: 10px; border: 1px solid #c6c6c6; padding: 2px;
	font-size: 13px; font-weight: bold; text-align: center; display: inline-block; line-height: 20px; 
}
.btn_my_cart.none span { display: none; }
					
/* .todayEnableNotice { width: 70px; height: 69px; position: fixed; bottom: 58px; right: 10px; z-index: 1040; display: block; */
.todayEnableNotice { width: 70px; height: 69px; display: block; cursor: pointer;
	background-image: url("../img/frame/btn_emergency.png"); background-repeat: no-repeat; background-size: 100% 100%; display: none; 
}
.todayEnableNoticeOn { width: 70px; height: 69px; background-image: url("../img/frame/btn_emergency_on.png"); background-repeat: no-repeat; background-size: 100% 100%; opacity: 0; }

/*
.todayEnableNotice.on { display: block; } 
.todayEnableNotice.on .todayEnableNoticeOn { animation-name: opacityEff; animation-duration: 0.5s; animation-delay: 0.1s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: alternate; 
						background-image: url("../img/frame/btn_emergency_on.png"); background-repeat: no-repeat; background-size: 100% 100%; }
*/						
/* .todayEnableNotice:hover { background-image: url("../img/frame/btn_emergency_on.png"); background-repeat: no-repeat; background-size: 100% 100%; } */

.sideButtonBar.noticeON .btn_my_cart { margin-bottom: 0px; } 
.sideButtonBar.noticeON .todayEnableNotice { display: block; } 
.sideButtonBar.noticeON .todayEnableNotice .todayEnableNoticeOn { animation-name: opacityEff; animation-duration: 0.5s; animation-delay: 0.1s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: alternate; } 

@keyframes opacityEff {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

footer { display: block; width: 100%; height: 80px; position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 1040; background-color: #FFFFFF; border: 0px solid #f8f8f8;
	        border-radius: 20px 20px 0px 0px; box-shadow: rgb(17 17 26 / 10%) 0px 4px 16px, rgb(17 17 26 / 10%) 0px 8px 24px, rgb(17 17 26 / 10%) 0px 16px 56px; }
footer #footerBox { display: block; position: relative; }

footer #footerBox .bottomMenuBar { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; padding: 17px calc(4vw) 12px calc(4vw);}
footer #footerBox .bottomMenuBar .menu { position: relative; width: auto; height: 48px; text-align: center; }


footer #footerBox .bottomMenuBar .menu .menu01 { display: inline-block; width: 50.3px; height: 42.6px; background-image: url("../../mobi/bottom/bottom_menu01_off.png"); background-repeat: no-repeat; background-size: 100% 100%;  }
footer #footerBox .bottomMenuBar .menu .menu02 { display: inline-block; width: 50px; height: 44.6px; background-image: url("../../mobi/bottom/bottom_menu02_off.png"); background-repeat: no-repeat; background-size: 100% 100%;  }
footer #footerBox .bottomMenuBar .menu .menu03 { display: inline-block; width: 45.6px; height: 41px; background-image: url("../../mobi/bottom/bottom_menu03_off.png"); background-repeat: no-repeat; background-size: 100% 100%;background-position: center;  }
footer #footerBox .bottomMenuBar .menu .menu04 { display: inline-block; /* width: 43.6px; */width:51px; height: 45px; background-image: url("../../mobi/bottom/bottom_menu04_off.png"); background-repeat: no-repeat; background-size: 100% 100%;  }
footer #footerBox .bottomMenuBar .menu .menu05 { display: inline-block; width: 41.3px; height: 42.6px; background-image: url("../../mobi/bottom/bottom_menu05_off.png"); background-repeat: no-repeat; background-size: 100% 100%;  }
footer #footerBox .bottomMenuBar span { display: inline-block; background-color: #d9d9d9; width: 1px; height: 44px; }


footer #footerBox .bottomMenuBar .menu.active span { color: #007AFF;  }


footer #footerBox .bottomMenuBar .menu .menu01.selected { background-image: url("../../mobi/bottom/bottom_menu01_on.png"); background-repeat: no-repeat; background-size: 100% 100%;  }
footer #footerBox .bottomMenuBar .menu .menu02.selected { background-image: url("../../mobi/bottom/bottom_menu02_on.png"); background-repeat: no-repeat; background-size: 100% 100%;  }
footer #footerBox .bottomMenuBar .menu .menu03.selected { background-image: url("../../mobi/bottom/bottom_menu03_on.png"); background-repeat: no-repeat; background-size: 100% 100%;  }
footer #footerBox .bottomMenuBar .menu .menu04.selected { background-image: url("../../mobi/bottom/bottom_menu04_on.png"); background-repeat: no-repeat; background-size: 100% 100%;  }
footer #footerBox .bottomMenuBar .menu .menu05.selected { background-image: url("../../mobi/bottom/bottom_menu05_on.png"); background-repeat: no-repeat; background-size: 100% 100%;  }


.layerPopup { padding: 0px; position: absolute; top: 0px; left: 0px; right: 0px; display: none; max-height: calc(100vh - 78px); outline: none; }
.modal-dialog { margin: 0px; z-index: 1021; }
.modal-content { border-radius: 15px; background: transparent; border: none; margin: 0px 10px; }


h4.modal-title img { width: 129px; }
.modal-header > .close { width: 31px; height: 31px; position: absolute; top: 12px; right: 20px; opacity: 1; border: 1px solid #d5c6f1; border-radius: 5px; padding: 5px; }
.modal-body { height: calc(100vh - 50px); max-height: calc(100vh); padding: 0px calc(4vw); background-color: #f8f8f8; }
.modal-body img { width: 100%; }
.modal-body .communityView { padding: 20px calc(6vw) 20px calc(6vw); }
.modal-backdrop { z-index: 1020; }

/* IPHONE (Notch) safearea */
/* IPHONE (Notch) safearea */
body.iOS { background: #f8f8f8; }
/* body.iOS #wrapper { padding:  calc(env(safe-area-inset-top) - 12px) 0 0 0 !important; height: calc(100vh); overflow-y: hidden;} */
body.iOS #wrapper { padding:  calc(env(safe-area-inset-top) - 0px) 0 0 0 !important; height: calc(100vh); overflow-y: hidden;}
/* body.iOS #wrapper #topBar.topOpen { top: calc(env(safe-area-inset-top); } */
body.iOS #wrapper .bodyWrapper { min-height: calc(100vh - (40px + env(safe-area-inset-top))); }
body.iOS #wrapper .bodyWrapper .bodyContents { min-height: calc(100vh - (40px + env(safe-area-inset-top)) + 10px); }

/* body.iOS #wrapper #shopViewTitleBar.topTitleBarFixed { top: calc(env(safe-area-inset-top) - 12px + 65px); } */

body.iOS .sideButtonBar { bottom: 60px; }
body.iOS footer { bottom: calc(env(safe-area-inset-bottom) - 37px); height: 105px; }
body.iOS .searchView .searchMapView .searchResultBox { bottom: 50px !important; }
body.iOS .layerPopup { top: calc(env(safe-area-inset-top) + 0px); }
body.iOS .modal-body { height: calc(100vh - 40px); }

body #alarmList_Popup { top: 40px; } 
body #search_Popup { top: 40px; }
body #searchResult_Popup { top: calc(40px + 75px); }

/* body.iOS #alarmList_Popup { top: calc(env(safe-area-inset-top) - 12px + 65px); } */
/* body.iOS #search_Popup { top: calc(env(safe-area-inset-top) - 12px + 65px); } */

/* body.iOS #alarmList_Popup { top: calc(env(safe-area-inset-top) - 12px + 65px); } */
/* body.iOS #search_Popup { top: calc(env(safe-area-inset-top) - 12px + 65px); } */
body.iOS #alarmList_Popup { top: calc(env(safe-area-inset-top) - 0px + 40px); }
body.iOS #search_Popup { top: calc(env(safe-area-inset-top) - 0px + 40px); }
body.iOS #searchResult_Popup { top: calc(env(safe-area-inset-top) + 40px + 78px ); }

/* body.iOS #alarmList_Popup .modal-body { height: calc(100vh - env(safe-area-inset-top) + 12px - 65px); } */
/* body.iOS #search_Popup .modal-body { height: calc(100vh - env(safe-area-inset-top) + 12px - 65px); } */
body.iOS #alarmList_Popup .modal-body { height: calc(100vh - env(safe-area-inset-top) + 0px - 40px); }
body.iOS #search_Popup .modal-body { height: calc(100vh - env(safe-area-inset-top) + 0px - 40px); }


/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
	body.iOS { background: #f8f8f8; /* content: IPHONE4/4s; */ }
	body.iOS footer { bottom: calc(env(safe-area-inset-bottom) - 37px); height: 105px; }
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	body.iOS { background: #f8f8f8; /* content: IPHONE4/4s; */ }
	body.iOS footer { bottom: calc(env(safe-area-inset-bottom) - 37px); height: 105px; }
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
	body.iOS { background: #f8f8f8; /* content: IPHONE4/4s; */ }
	body.iOS footer { bottom: calc(env(safe-area-inset-bottom) - 37px); height: 105px; }
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
	body.iOS { background: #f8f8f8; /* content: IPHONE5/5s/5C/5SE; */ }
	body.iOS footer { bottom: calc(env(safe-area-inset-bottom) - 37px); height: 105px; }
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	body.iOS { background: #f8f8f8; /* content: IPHONE5/5s/5C/5SE; */ }
	body.iOS footer { bottom: calc(env(safe-area-inset-bottom) - 37px); height: 105px; }
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
	body.iOS { background: #f8f8f8; /* content: IPHONE5/5s/5C/5SE; */ }
	body.iOS footer { bottom: calc(env(safe-area-inset-bottom) - 37px); height: 105px; }
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
	body.iOS { background: #f8f8f8; /* content: IPHONE6/6s/7/8; */ }
	body.iOS footer { bottom: calc(env(safe-area-inset-bottom) + 0px); height: 85px; }
}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
	body.iOS { background: #f8f8f8; /* content: IPHONE6/6s/7/8; */ }
	body.iOS footer { bottom: calc(env(safe-area-inset-bottom) + 0px); height: 85px; }
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
	body.iOS { background: #f8f8f8; /* content: IPHONE6/6s/7/8; */ }
	body.iOS footer { bottom: calc(env(safe-area-inset-bottom) + 0px); height: 85px; }
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
	body.iOS { background: #f8f8f8; /* content: IPHONE6+/7+/8+; */ }
	body.iOS footer { bottom: calc(env(safe-area-inset-bottom) - 0px); height: 85px; }
}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
	body.iOS { background: #f8f8f8; /* content: IPHONE6+/7+/8+; */ }
	body.iOS footer { bottom: calc(env(safe-area-inset-bottom) - 0px); height: 85px; }
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
	body.iOS { background: #f8f8f8; /* content: IPHONE6+/7+/8+; */ }
	body.iOS footer { bottom: calc(env(safe-area-inset-bottom) - 0px); height: 85px; }
}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
	body.iOS { background: #f8f8f8; /* content: IPHONEX; */ }
	body.iOS .searchView .searchMapView .searchResultBox { bottom: 50px !important; }
	body.iOS footer { bottom: calc(env(safe-area-inset-bottom) - 40px); height: 105px; }
}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
	body.iOS { background: #f8f8f8; /* content: IPHONEX; */ }
	body.iOS .searchView .searchMapView .searchResultBox { bottom: 50px !important; }
	body.iOS footer { bottom: calc(env(safe-area-inset-bottom) - 40px); height: 105px; }
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
	body.iOS { background: #f8f8f8; /* content: IPHONEX; */ }
	body.iOS .searchView .searchMapView .searchResultBox { bottom: 50px !important; }
	body.iOS footer { bottom: calc(env(safe-area-inset-bottom) - 40px); height: 105px; }
}


/* ----------- iPhone Pad ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1366px) 
/*   and (-webkit-min-device-pixel-ratio: 3)  */
  { 
	body.iOS { background: #f8f8f8; /* content: IPHONEX; */ }
	body.iOS .searchView .searchMapView .searchResultBox { bottom: 50px !important; }
	body.iOS footer { bottom: calc(env(safe-area-inset-bottom) - 20px); height: 105px; }
}