Mobile : 배달의 민족 모바일 페이지 CSS Sample

#wbbase.css Sample

* {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
HTML {
LINE-HEIGHT: 1.3em; FONT-FAMILY: Segoe, "맑은 고딕", Malgun Gothic, Tahoma, "굴림", Gulim, AppleGothic, Sans-serif; COLOR: #8a8a8a; FONT-SIZE: 12px
}
INPUT {
LINE-HEIGHT: 1.3em; FONT-FAMILY: Segoe, "맑은 고딕", Malgun Gothic, Tahoma, "굴림", Gulim, AppleGothic, Sans-serif; COLOR: #464646; FONT-SIZE: 12px
}
BUTTON {
LINE-HEIGHT: 1.3em; FONT-FAMILY: Segoe, "맑은 고딕", Malgun Gothic, Tahoma, "굴림", Gulim, AppleGothic, Sans-serif; COLOR: #464646; FONT-SIZE: 12px
}
TABLE {
LINE-HEIGHT: 1.3em; FONT-FAMILY: Segoe, "맑은 고딕", Malgun Gothic, Tahoma, "굴림", Gulim, AppleGothic, Sans-serif; COLOR: #464646; FONT-SIZE: 12px
}
TD {
LINE-HEIGHT: 1.3em; FONT-FAMILY: Segoe, "맑은 고딕", Malgun Gothic, Tahoma, "굴림", Gulim, AppleGothic, Sans-serif; COLOR: #464646; FONT-SIZE: 12px
}
TEXTAREA {
LINE-HEIGHT: 1.3em; FONT-FAMILY: Segoe, "맑은 고딕", Malgun Gothic, Tahoma, "굴림", Gulim, AppleGothic, Sans-serif; COLOR: #464646; FONT-SIZE: 12px
}
SELECT {
LINE-HEIGHT: 1.3em; FONT-FAMILY: Segoe, "맑은 고딕", Malgun Gothic, Tahoma, "굴림", Gulim, AppleGothic, Sans-serif; COLOR: #464646; FONT-SIZE: 12px
}
PRE {
LINE-HEIGHT: 1.2em; FONT-FAMILY: "돋움체"; COLOR: #464646; FONT-SIZE: 11px
}
BUTTON * {
POSITION: relative; FONT-FAMILY: Segoe, "맑은 고딕", Malgun Gothic, Tahoma, "굴림", Gulim, AppleGothic, Sans-serif
}
TEXTAREA {
BORDER-BOTTOM: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; WIDTH: 97%; PADDING-RIGHT: 3px; BORDER-TOP: #cccccc 1px solid; BORDER-RIGHT: #cccccc 1px solid; PADDING-TOP: 3px
}
HTML:first-child SELECT {
PADDING-RIGHT: 6px; HEIGHT: 20px
}
HR {
WIDTH: 0px; DISPLAY: none
}
LEGEND {
WIDTH: 0px; DISPLAY: none
}
CAPTION {
WIDTH: 0px; DISPLAY: none
}
H1 {
TEXT-ALIGN: left
}
H2 {
TEXT-ALIGN: left
}
H3 {
TEXT-ALIGN: left
}
H4 {
TEXT-ALIGN: left
}
H5 {
TEXT-ALIGN: left
}
H6 {
TEXT-ALIGN: left
}
FIELDSET {
BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
}
IFRAME {
BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
}
IMG {
BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
}
EM {
FONT-STYLE: normal
}
ADDRESS {
FONT-STYLE: normal
}
LI {
LIST-STYLE-TYPE: none; LIST-STYLE-IMAGE: none
}
OPTION {
PADDING-RIGHT: 6px
}
FORM {
MARGIN: 0px
}
A {
COLOR: #333333; TEXT-DECORATION: none
}
A:hover {
COLOR: #1c5e9a; TEXT-DECORATION: underline
}
LABEL {
CURSOR: pointer
}

#wbwebview.info.css Sample

BODY {
BACKGROUND: #fff; -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
BODY IMG {
VERTICAL-ALIGN: top
}
.helper_call {
POSITION: relative
}
.helper_call UL {
POSITION: absolute; WIDTH: 100%; BOTTOM: 0px; OVERFLOW: hidden; LEFT: 0px
}
.helper_call UL LI {
TEXT-ALIGN: center; TEXT-INDENT: -5000px; WIDTH: 50%; FLOAT: left
}
.helper_call UL LI A.call {
BACKGROUND-IMAGE: url(../m/helper_call_bt.png); MARGIN: 0px 0px 5% 5%; WIDTH: 100%; DISPLAY: block; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: center top; HEIGHT: 35px; background-size: 110px 70px; -webkit-background-size: 110px 70px
}
.helper_call UL LI.r A.call {
MARGIN: 0px 0px 5% -5%
}
.helper_call UL LI A.call:active {
BACKGROUND-POSITION: center bottom
}
.helper_call UL LI A.touchA.call {
BACKGROUND-POSITION: center bottom
}
.mPopup {
Z-INDEX: 1000; POSITION: absolute; DISPLAY: none; TOP: 0px; RIGHT: 0px; LEFT: 0px
}
.mPopup .layerPopup {
Z-INDEX: 5000; POSITION: absolute; RIGHT: 20px; LEFT: 20px
}
.popClose {
BACKGROUND-IMAGE: url(../m/order/btn_popClose.png); Z-INDEX: 5000; POSITION: absolute; TEXT-INDENT: -5000px; WIDTH: 31px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 31px; TOP: -14px; RIGHT: -14px; background-size: 31px 31px; -webkit-background-size: 31px 31px
}
.boxMo {
BORDER-RIGHT-WIDTH: 8px; FONT-FAMILY: Helvetica, Droid serif, sans-serif !important; BORDER-TOP-WIDTH: 8px; BORDER-BOTTOM-WIDTH: 8px; BORDER-LEFT-WIDTH: 8px; -o-border-image: url(../m/order/bg_pop0.png) 8 8 stretch; -webkit-border-image: url(../m/order/bg_pop0.png) 8 8 stretch; -moz-border-image: url(../m/order/bg_pop0.png) 8 8 stretch; border-image: url(../m/order/bg_pop0.png) 8 8 stretch
}
.boxMo H1 {
PADDING-BOTTOM: 0px; LINE-HEIGHT: 120%; BACKGROUND-COLOR: #f8f0e3; PADDING-LEFT: 10px; PADDING-RIGHT: 0px; COLOR: #000; FONT-SIZE: 160%; FONT-WEIGHT: bold !important; PADDING-TOP: 10px
}
.boxMo .cont {
PADDING-BOTTOM: 0px; LINE-HEIGHT: 130%; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BACKGROUND: #f8f0e3; COLOR: #77746e; FONT-SIZE: 120%; PADDING-TOP: 5px
}
.boxMo .btn {
PADDING-BOTTOM: 13px; PADDING-LEFT: 4px; PADDING-RIGHT: 4px; BACKGROUND: #f8f0e3; PADDING-TOP: 13px
}
.boxMo .btn A.popClose {
BACKGROUND-IMAGE: url(../m/order/btn_close_bg.png); POSITION: relative; TEXT-ALIGN: center; TEXT-INDENT: -5000px; WIDTH: 100%; DISPLAY: inline-block; BACKGROUND-REPEAT: no-repeat; HEIGHT: 48px; TOP: 0px; RIGHT: 0px; background-size: 100% 200%; -webkit-background-size: 100% 200%
}
.boxMo .btn A.touchA.popClose {
BACKGROUND-POSITION: 0px 100%
}
.boxMo .btn A.popClose SPAN {
BACKGROUND-IMAGE: url(../m/order/btn_close_tl.png); POSITION: absolute; MARGIN: -12px 0px 0px -20px; WIDTH: 37px; DISPLAY: block; BACKGROUND-POSITION: center top; HEIGHT: 22px; TOP: 50%; LEFT: 50%; background-size: 37px 22px; -webkit-background-size: 37px 22px
}
.time_so {
WIDTH: 100%; BACKGROUND: url(../m/btn_call02.png) no-repeat 0px 0px; HEIGHT: 98px; background-size: 100% 100%; -webkit-background-size: 100% 100%
}
.timeover_so {
WIDTH: 100%; BACKGROUND: url(../../../m/btn_call_timeover02.png) no-repeat 0px 0px; HEIGHT: 98px; background-size: 100% 100%; -webkit-background-size: 100% 100%
}
.time_so A {
TEXT-DECORATION: none
}
.time_so SPAN {
PADDING-BOTTOM: 0px; PADDING-LEFT: 37%; WIDTH: 60%; PADDING-RIGHT: 0px; DISPLAY: block; FONT-FAMILY: Helvetica, Droid serif, sans-serif; COLOR: #575653; FONT-SIZE: 11px; PADDING-TOP: 58px
}
.timeover_so SPAN {
PADDING-BOTTOM: 0px; PADDING-LEFT: 37%; WIDTH: 60%; PADDING-RIGHT: 0px; DISPLAY: block; FONT-FAMILY: Helvetica, Droid serif, sans-serif; COLOR: #5c584f; FONT-SIZE: 11px; PADDING-TOP: 58px
}
.cashslide {
MARGIN: 0px auto; WIDTH: 100%; BACKGROUND: url(../m/bg_cashslide.jpg) 0px 0px
}
.cashslide IMG {
WIDTH: 100%
}
.cashslide #imagegallery {
Z-INDEX: 10; MARGIN: 30px auto 0px; WIDTH: 90%
}
.cashslide #nav {
Z-INDEX: 100; TEXT-ALIGN: center; MARGIN: 10px auto; WIDTH: 19%; HEIGHT: 15px
}
.cashslide #nav A {
TEXT-INDENT: -5000px; MARGIN: 0px 4px; WIDTH: 7px; BACKGROUND: url(../m/nav_off@1.png) no-repeat 0px center; FLOAT: left; HEIGHT: 7px; background-size: 7px 7px; -webkit-backgorund-size: 7px 7px
}
.cashslide #nav A.activeSlide {
WIDTH: 7px; BACKGROUND: url(../m/nav_on@1.png) no-repeat 0px center; HEIGHT: 7px; background-size: 7px 7px; -webkit-backgorund-size: 7px 7px
}