@import url( com.css);
@import url( 'block/header.css');
@import url( 'block/login.css');

body { width: 100%; height:100%; margin: 0px; padding: 0px; background: url( '/html/images/main-bg.jpg') center top repeat-x; }

#wrap { width: 100%; text-align: center; }
#container { margin: 0 auto; width: 1240px; margin-top: 0px; text-align: left; }

div.left { clear: both; float: left; width: 220px; }

div.quickmenu { clear: both; float: left; width: 220px; }
div.quickmenu ul { clear: both; float: left; width: 220px; }
div.quickmenu ul li {
	clear: both;
	display: inline-block;
	box-sizing: border-box; /* W3C */
	-o-box-sizing: border-box; /* Opera */
	-ms-box-sizing: border-box; /* Internet Explorer */
	-moz-box-sizing: border-box; /* Firefox */
	-webkit-box-sizing: border-box; /* Safari & Chrome */
	background: url( '/html/images/quickmenu-bg.png');
}
div.quickmenu ul li.banner { clear: both; margin-top: 4px; cursor: pointer; }
div.quickmenu ul li.banner a { display: inline-block; clear: both; width: 220px; *width: 218px; height: 40px; border: 1px solid #ccc; cursor: pointer; }
div.quickmenu ul li.banner a span.title { float: left; margin: 11px 10px 8px 10px; font-size: 16px; font-weight: bold; cursor: pointer; }
div.quickmenu ul li.banner a span.button { float: right; margin: 10px 10px 10px 10px; padding: 3px; background: #ff6600; color: #fff; font-size: 11px; cursor: pointer; }

div.chrome { display: inline-block; float: right; margin-right: 440px; margin-top: 70px; }
div.chrome ul { clear: both; float: left; }
div.chrome ul li {
	clear: both;
	display: inline-block;
	box-sizing: border-box; /* W3C */
	-o-box-sizing: border-box; /* Opera */
	-ms-box-sizing: border-box; /* Internet Explorer */
	-moz-box-sizing: border-box; /* Firefox */
	-webkit-box-sizing: border-box; /* Safari & Chrome */
	background: #ffff99;
}
div.chrome ul li.banner { clear: both; margin-top: 4px; cursor: pointer; }
div.chrome ul li.banner a { display: inline-block; clear: both; width: 340px; *width: 338px; height: 80px; border: 1px solid #ccc; cursor: pointer; }
div.chrome ul li.banner a span.title { float: left; width: 250px; *width: 248px; margin: 11px 10px 8px 10px; font-size: 16px; font-weight: bold; cursor: pointer; }
div.chrome ul li.banner a span.button { float: right; margin: 10px 10px 10px 10px; padding: 3px; background: #ff6600; color: #fff; font-size: 11px; cursor: pointer; }

div.mainbody { display: inline-block; clear: both; width: 1200px; margin-top: 52px; margin-left: 18px; }

div.login { display: inline-block; clear: both; float: left; margin-top: 8px; background: #ffffff; }
div.login h1 { float: left; }
div.login div.wrap {
	display: inline-block;
	clear: both; float: left;
	width: 290px; *width: 282px;
	border: 4px solid #ccc;
	box-sizing: border-box; /* W3C */
	-o-box-sizing: border-box; /* Opera */
	-ms-box-sizing: border-box; /* Internet Explorer */
	-moz-box-sizing: border-box; /* Firefox */
	-webkit-box-sizing: border-box; /* Safari & Chrome */
}
div.login div.title { display: inline-block; clear: both; float: left; font-weight: bold; color: #6600ff; text-align: center; }
div.login div.left { display: inline-block; clear: both; float: left; width: 160px; margin: 10px 0 0 10px; }
div.login div.right { display: inline-block; float: right; height: 60px; margin: 10px 10px 0 0; }
div.login div.right button { display: inline-block; float: right; width: 60px; height: 46px; }
div.login div.bottom { display: inline-block; clear: both; float: left; width: 270px; *width: 262px; text-align: center; margin: 2px 0 12px 0; }

div.notice {
	display: inline-block;
	clear: both; float: left;
	width: 290px; *width: 282px;
	margin-top: 10px;
	border: 4px solid #ccc;
	box-sizing: border-box; /* W3C */
	-o-box-sizing: border-box; /* Opera */
	-ms-box-sizing: border-box; /* Internet Explorer */
	-moz-box-sizing: border-box; /* Firefox */
	-webkit-box-sizing: border-box; /* Safari & Chrome */
}
div.notice div.wrap { clear: both; float: left; width: 260px; margin: 10px; }
div.notice h1 { float: left; }
div.notice span { float: right; margin-top: 0px; }
div.notice ul { clear: both; float: left; width: 100%; margin-top: 10px; }
div.notice ul li { clear: both; float: left; display: inline-block; width: 100%; line-height: 180%; }
div.notice ul li span { float: left; display: inline-block; width: 20px; margin-top: 0px; }
div.notice ul li a { float: left; display: inline-block; width: 100%; }

div.newbook {
	float: left; display: inline-block; width: 659px; height: 266px;
	background: url( '/html/images/newbook-bg.png');
}
div.newbook span.more { clear: both; float: left; width: 634px; display: inline-block; margin-top: 16px; text-align: right; }
div.newbook span.more a { color: #fff; font-weight: bold; }
div.newbook ul { clear: both; display: inline-block; float: left; width: 100%; margin-left: 30px; margin-top: 6px; }
div.newbook ul li { float: left; width: 600px; margin: 0 15px 4px 0px; }
div.newbook ul li.end { border-bottom: none; }
div.newbook ul li.right { margin-right: 0px; }
div.newbook ul div.item { float: left; width: 295px; background: #f5f5f5;  }
div.newbook ul div.right { float: right }
div.newbook ul div p.img { float: left; margin: 8px 8px; }
div.newbook ul div p.company { float: left; width: 180px; margin-top: 2px; color: #000000; }
div.newbook ul div p.subject { float: left; width: 180px; height: 18px; margin-top: 6px; overflow: hidden; }
div.newbook ul div p.subject a strong { color: #336699; }
div.newbook ul div p.metadata { float: left; width: 180px; color: #339966; overflow: hidden; }
div.newbook ul div p.contents { float: left; width: 180px; height: 38px; overflow-y: hidden; }

div.cmenu { float: right; width: 220px; }
div.cmenu ul { float: left; width: 220px; }
div.cmenu ul li {
	clear: both;
	display: inline-block;
	box-sizing: border-box; /* W3C */
	-o-box-sizing: border-box; /* Opera */
	-ms-box-sizing: border-box; /* Internet Explorer */
	-moz-box-sizing: border-box; /* Firefox */
	-webkit-box-sizing: border-box; /* Safari & Chrome */
}
div.cmenu ul li.customer { clear: both; width: 220px; *width: 212px; height: 136px; *height: 128px; margin-top: 0px; border: 4px solid #ccc; }
div.cmenu ul li.customer h1 { clear: both; float: left; margin: 4px 10px 2px 10px; font-family: Arial; font-size: 20px; font-weight: bold; color: #929292; }
div.cmenu ul li.customer h1 span { font-size: 20px; font-family: Arial; color: #ff6600; }
div.cmenu ul li.customer span.phone { clear: both; float: left; width: 220px; *width: 212px; margin: 4px 10px 2px 10px; font-size: 19px; font-weight: bold; color: #ff9900; }
div.cmenu ul li.customer span.fax { clear: both; float: left; width: 220px; *width: 212px; margin: 2px 10px 3px 10px; font-size: 19px; font-weight: bold; color: #ff9900; }
div.cmenu ul li.customer span.text { clear: both; float: left; width: 80%; margin: 2px 10px 0 10px; font-size: 12px; }

div.cmenu ul li.delivery { clear: both; width: 220px; *width: 212px; height: 121px; *height: 113px; margin-top: 9px; border: 4px solid #ccc; }
div.cmenu ul li.delivery h1 { clear: both; float: left; width: 200px; margin: 10px 10px 10px 10px; font-size: 20px; font-weight: bold; color: #929292; }
div.cmenu ul li.delivery h1 span { font-size: 20px; color: #ff6600; }
div.cmenu ul li.delivery div { clear: both; float: left; margin: 2px 10px 2px 10px; width: 91%; }
div.cmenu ul li.delivery span.text { float: left; font-size: 12px; }
div.cmenu ul li.delivery span.time { float: right; color: #ff6600; margin-top: -2px; font-size: 14px; font-weight: bold;  }

div.main { float: right; width: 894px; }
div.view { float: left; width: 1000px;  }
#ft-buttons-view-visual { display: none; }
div.view a.ft-prev { display: none; }
div.view a.ft-next { display: none; }

div.banner { float: left; margin-top: 18px; }
div.banner h1 { display: none; }
div.banner ul { clear: both; float: left;  margin-bottom: 8px;}
div.banner ul li { float: left; width: 140px; margin-left: 10px; }
div.banner ul li.first { margin-left: 0; }

#footer { clear: both; width:100%; height: 80px; margin-top: 30px;  }
#footer div.wrap { clear: both; margin:0 auto; width: 1240px; padding-top: 10px; border-top: 1px dotted #dedede; text-align: center; }

/* 입력폼 */
select { font-size:12px; padding: 1px; border: 1px solid #d3d3d3; vertical-align: middle; }
input { font-size:12px; padding: 2px; border: 1px solid #d3d3d3; vertical-align: middle; }
input[type=password] { font-size:12px; padding: 2px; border: 1px solid #d3d3d3; }
input[type=file] { font-size:12px; padding: 2px; border: none; }

/* 입력폼 */
button { background-color: #ccf2cc;  border: 1px solid #d3d3d3; margin: 1px; padding: 4px; color: #000000; cursor: pointer; }
button.small { background-color: #ccf2cc;  border: 1px solid #d3d3d3; margin: 1px; padding: 4px; color: #000000; cursor: pointer; }
ul, li, ol { list-style: none; }
.subullet { padding-left: 16px; background: url("/html/_image/bullet_arrow.gif") no-repeat left top; font-weight:bold; }

/* 페이징 */
div.groups { float:left; margin:1px; }
.pagelist a { font-size:12px; text-decoration:none; }
.pagelist a:hover { text-decoration:underline; }
.pagelist a.page { padding-left:6px; padding-right:6px; }
.pagelist a.select { font-size:12px; font-weight:bold; color:red; }

div.listhead { clear: both; float: left; width: 100%; }
div.listhead div.total { float: left; width: 50%; }
div.listhead div.page { float: right; width: 50%; }

.ui-dialog-buttonpane button { height: 32px; padding: 5px; }

@media only screen and ( max-width: 1280px) {
	body { height:100%; background: url( '/html/images/main-bg-min.jpg') center top repeat-x; }
	#wrap { width: 1024px; min-width: 1024px; margin: 0 auto; text-align: center; background: url( '/html/images/main-bg-min.jpg') center top repeat-x; }
	div.leftmenu { display: none; }
	#container { width: 1024px; margin: 0 auto; }
	#container div.location { float: none; margin: 0 auto; display: inline-block; width: 1000px; }
	#container div.contents { float: none; margin: 0 auto; display: inline-block; width: 1000px; margin-top: 10px; }
	#header { width: 1024px; margin:0 auto; height: 115px; }
	div.chrome { margin-right: 300px; }
	div.quickmenu { margin-left: 20px; }
	div.mainbody { display: inline-block; clear: both; width: 970px; margin-top: 52px; margin-left: 26px; }
	div.newbook {
		float: left; display: inline-block; width: 430px; height: 266px; overflow: hidden;
		background: url( '/html/images/newbook-bg.png');
	}
	div.newbook span.more { clear: both; float: left; width: 404px; display: inline-block; margin-top: 16px; text-align: right; }
	div.newbook span.more a { color: #fff; font-weight: bold; }
	div.newbook ul { clear: both; display: inline-block; float: left; width: 100%; margin-left: 22px; margin-top: 6px; }
	div.newbook ul li { float: left; width: 382px; margin: 0 15px 4px 0px; }
	div.newbook ul li.end { border-bottom: none; }
	div.newbook ul li.right { margin-right: 0px; }
	div.newbook ul div.item { float: left; width: 185px; background: #f5f5f5;  }
	div.newbook ul div.right { float: right }
	div.newbook ul div p.img { float: left; margin: 8px 8px; }
	div.newbook ul div p.company { float: left; width: 80px; margin-top: 2px; color: #000000; }
	div.newbook ul div p.subject { float: left; width: 80px; height: 18px; margin-top: 6px; overflow: hidden; }
	div.newbook ul div p.subject a strong { color: #336699; }
	div.newbook ul div p.metadata { float: left; width: 80px; color: #339966; overflow: hidden; }
	div.newbook ul div p.contents { display: none; float: left; width: 80px; height: 38px; overflow-y: hidden; }

	div.main { float: right; width: 664px; }
	#ft-buttons-view-visual { display: none; }
	div.view a.ft-prev { display: none; }
	div.view a.ft-next { display: none; }

	div.banner { float: left; width: 684px; height: 45px; margin-top: 18px; overflow-y: hidden; overflow-x: hidden; }
	div.banner h1 { display: none; }
	div.banner ul { clear: both; float: left;  margin-bottom: 8px;}
	div.banner ul li { float: left; width: 140px; margin-left: 10px; }
	div.banner ul li.first { margin-left: 0; }

	#footer { clear: both; 1024px; margin:0 auto; height: 80px; margin-top: 30px;  }
	#footer div.wrap { clear: both; margin:0 auto; width: 1000px; padding-top: 10px; border-top: 1px dotted #dedede; text-align: center; }


	*::-webkit-scrollbar {
		width:16px;
	}
	*::-webkit-scrollbar-thumb {
		background-color: #dddddd;
	}
	*::-webkit-scrollbar-thumb:hover {
		background-color: #eeeeee;
		border:1px solid #cccccc;
	}
	*::-webkit-scrollbar-thumb:active {
		background-color:#d1d1d1;
		border:1px solid #cccccc;
	}

}

/*
@media screen and ( max-width: 1280px) and (-webkit-min-device-pixel-ratio:0) {

	body { background: url( '/html/images/main-bg-min.jpg') 46.8% top repeat-x; }

}
*/