base.css

간단 설명

---

@charset "UTF-8";

/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;font-weight:normal}
address,em{font-style:normal;font-weight:normal}
strong{font-weight:bold}
input,button,select{font-family:sans-serif;vertical-align:middle;margin:0;padding:0}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{display:block}
hr{width:100%;height:1px;margin:0;border:0;clear:both;background-color:#e2e2e2}
html{font-size:100%;font-family:sans-serif;font-size:15px;-webkit-text-size-adjust:100%}
body{line-height:1.5;color:#666}
ol,
ul,
li{list-style:none}
table{border-collapse:collapse;border-spacing:0;font-size:15px}
button,
html input[type='button'],
input[type='reset'],
input[type='submit']{-webkit-appearance:button;cursor:pointer;outline:none}
button{margin:0;padding:0;border:0;background-color:transparent}
button:-moz-focus-inner,
input:-moz-focus-inner{border:0;padding:0}
input[type='number']:-webkit-inner-spin-button,
input[type='number']:-webkit-outer-spin-button{height:auto}
input.search,
input[type='search']{-webkit-appearance:none;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-border-radius:2px;border-radius:2px}
input[type='date']:-webkit-user-select-button,
input[type='date']{-webkit-appearance:none;-webkit-writing-mode:none;-webkit-rtl-ordering:none;-webkit-user-select:none}
input.search:-webkit-search-cancel-button,
input.search:-webkit-search-decoration,
input[type='search']:-webkit-search-cancel-button,
input[type='search']:-webkit-search-decoration{-webkit-appearance:none}
input[type='file']::-webkit-file-upload-button{cursor:pointer}
a{text-decoration:none;color:#666}
a[href^='tel']{color:inherit;font:inherit}
button,
a:focus{outline:none}
button.press,
a.press,
button:active,
a:active{opacity:.6}
button:disabled:active,
a.disabled:active,
.btn.disabled:active{opacity:1}
.radio,
.checkbox{
	display:inline-block;
	position:relative;
	width:25px;
	height:25px;
	border:1px solid #cacaca;
	background-color:#fff;
	border-radius:2px;
	vertical-align:middle;
	box-sizing:border-box;
}
.radio{
	width:22px;
	height:22px;
	border-radius:10px;
}
input[type='radio'],
input[type='checkbox']{
	position:absolute;
	left:0;right:0;top:0;bottom:0;
	z-index:10;
	opacity:0;
	width:22px;height:22px;
	letter-spacing:0;
	border:none;
	background:none;
	vertical-align:middle;
	-webkit-appearance:none;
	-ms-appearance:none;
}
input[type='radio']{
	border-radius:100%;
}
input[type='radio'] + span,
input[type='checkbox'] + span{
	opacity:0;
}
input[type='radio']:checked + span,
input[type='checkbox']:checked + span{
	opacity:1;
	position:absolute;
	left:0;top:0;
}
input[type='radio']:checked + span{
	width:10px;
	height:10px;
	margin:5px 0 0 5px;
	border-radius:100%;
	background-color:#00b6f0;
}
input[type='checkbox']:checked + span{
	width:16px;
	height:11px;
	margin:6px 0 0 4px;
	background-position:-50px 0;
	background-repeat:no-repeat;
	background-size:360px auto;
	background-image:url('/static/images/common/icon_sprite.png');
}

input[type='date'],
input[type='text'],
input[type='number'],
input.search,
input[type='search'],
input[type='password'],
input[type='tel'],
input[type='email']{
	width:100%;height:40px;
	padding:0 10px;
	font-family:sans-serif;font-size:14px;color:#333;
	border:1px solid #bfc2c6;
	background-color:#fff;
	border-radius:2px;
	outline:none;
	box-sizing:border-box;
	-webkit-appearance:none;
}
input[type="date"]{padding-right:0}

input[readonly='readonly']:not([data-role='date']){background-color:#f6f6f8;border:1px solid #e1e1e1;color:#666}

button::-webkit-inner-spin-button,
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button{ 
	-webkit-appearance:none;
	margin:0;
}
select:disabled,
input.search:disabled,
input[type='date']:disabled,
input[type='search']:disabled,
input[type='password']:disabled,
input[type='tel']:disabled,
input[type='email']:disabled,
input[type='text']:disabled{background-color:#f6f6f8;border:1px solid #e1e1e1;color:#ccc}
input::-webkit-input-placeholder{color:#ccc;line-height:1.4;padding-left:4px}
textarea::-webkit-input-placeholder{color:#ccc}
select{
	width:100%;
	height:40px;
	padding-left:10px;
	padding-right:10px;
	font-size:14px;
	color:#666;
	border:1px solid #c6c6c6;
	border-radius:2px;
	background-color:#fff;
	-webkit-appearance:none;
	-ms-appearance:none;
	appearance:none;
	box-sizing:border-box;
}
select:disabled{background-color:#f6f6f8;border:1px solid #e1e1e1;color:#ccc}
select:disabled::after{border-color:#ccc}
select::-ms-expand{display:none}
span.select{display:inline-block}
.select{position:relative}
.select:after{
	content:'';display:inline-block;
	position:absolute;right:8px;top:50%;
	border-left:4px solid transparent;
	border-right:4px solid transparent;
	border-bottom:none;
	border-top:6px solid #88929e;
	margin-top:-3px;
	pointer-events:none;
}
.select.disabled:after{border-top-color:#ccc}
select:required:invalid{color:#999}
.select[data-value]:before{content:attr(data-value);font-size:14px;line-height:38px;text-align:center;position:absolute;top:0;right:0;bottom:0;left:0;padding-right:20px;padding-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:2px;border:1px solid #c6c6c6;background-color:#fff;pointer-events:none}
.select[data-value] select{opacity:0}
textarea{width:100%;padding:10px;border:1px solid #bfc2c6;box-sizing:border-box;border-radius:2px;resize:none;font-family:sans-serif;font-size:14px;color:#666;-webkit-appearance:none;-webkit-box-shadow:none;box-shadow:none;background-image:none}
label{font-size:14px;vertical-align:middle}
:selection{background-color:#ff7900;color:#fff}
.hide,legend,caption{position:absolute !important;left:-9999px !important;right:auto !important;width:0;height:0;overflow:hidden;text-indent:-9999px;font:0/0 a}
caption{display:none}
img{width:100%;vertical-align:middle}
fieldset{min-width:0}
@-moz-document url-prefix(){
	fieldset{display:table-cell}
}

[lang='ko'],
[lang='en']{font-family:sans-serif}
[lang='zh']{font-family:'Microsoft YaHei', 'Microsoft JhengHei', sans-serif}
[lang='zh-CN']{font-family:'Microsoft YaHei', sans-serif}
[lang='zh-TW']{font-family:'Noto Sans TC', 'Microsoft JhengHei', sans-serif}
[lang='ja']{font-family:"メイリオ", Meiryo, "Osaka", Arial, sans-serif}
[lang='th']{font-family:'CSChatThaiUI', sans-serif}
[lang='kh']{font-family:'Hanuman', Arial, Helvetica, sans-serif}
[lang='tr-TR']{font-family:Arial, sans-serif}