/* toolbar */
.toolbar {background-color: #000; color:#fff; padding:5px; }
.toolbar.orange { background-color: #ffa600; }
.toolbar.pink { background-color: #ff80aa; }
.toolbar.blue { background-color: #2981e4; }
.toolbar.yellow { background-color: #ffea00; }
.toolbar.red { background-color: #e70000; }
.toolbar.purple { background-color: #c700df; }
.toolbar.black { background-color: #000; }
.toolbar.round { border-radius:5px; }
/*
.toolbar2 {background-color: #A41D1C;}
.toolbar3 {background-color: #0F6406;}
.toolbar4 {background-color: #333f79;}
.toolbar5 {background-color: #000000;}
.toolbar6 {background-color: #00000;}
*/


/*background gradient 관련*/
.backgrad_sample { background:#ccc; background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff)); background: -moz-linear-gradient(top,  #ccc,  #fff); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#ffffff'); }


/* icon by spacemajong */
.ht { display: inline-block; line-height: 2em; font-size: 1em; font-weight: bold; text-align: center; margin: auto; color:#FFF; border-radius: .4em; text-shadow: 0 -1px 0 rgba(0,0,0,.3); width: 4.1em; background: #007D9A; -webkit-box-shadow:hsl(191, 80%, 15%) 0 .38em .08em; box-shadow:hsl(191, 80%, 15%) 0 .38em .08em; }
.ht.orange { background-color: #ffa600; }
.ht.pink { background-color: #ff80aa; }
.ht.blue { background-color: #2981e4; }
.ht.yellow { background-color: #ffea00; }
.ht.red { background-color: #e70000; }
.ht.purple { background-color: #c700df; }
.ht.black { background-color: #000; }

.ht_ns { display: inline-block; line-height: 2em; font-size: 1em; font-weight: bold; text-align: center; margin: auto; color:#FFF; border-radius: .4em; width: 4.1em; background:rgba(204,153,0,1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(204,153,0,1)', endColorstr='color-stop(0.5,rgba(153,102,0,1)'); background: -webkit-gradient(linear, left top, left bottom, color-stop(0,rgba(204,153,0,1)), color-stop(0.5,rgba(153,102,0,1)), color-stop(1,rgba(204,153,0,1))); background: -moz-linear-gradient(top,  rgba(204,153,0,1),  rgba(153,102,0,1)); /* for firefox 3.6+ */ cursor: pointer; }
.ht_ns.orange { background-color: #ffa600; }
.ht_ns.pink { background-color: #ff80aa; }
.ht_ns.blue { background-color: #2981e4; }
.ht_ns.yellow { background-color: #ffea00; }
.ht_ns.red { background-color: #e70000; }
.ht_ns.purple { background-color: #c700df; }
.ht_ns.black { background-color: #000; }

.ht_ns_focus { display: inline-block; line-height: 2em; font-size: 1em; font-weight: bold; text-align: center; margin: auto; color:#FFF; border-radius: .4em; text-shadow: 0 -1px 0 rgba(0,0,0,.3); width: 4.1em; background: #007D9A; }
.ht_normal { border:1px solid #ccc; display: inline-block; height:1.6em; line-height: 1.6em; font-size: 1em; text-align: center; margin: auto; color: #000; border-radius: .4em; width: 3.8em; cursor: pointer;	background-color:#ececec; }
.ht_normal:hover { background-color:#999999; }


/* BonBon Buttons 1.1 by simurai.com */
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:bold+Lobster);
@import url(http://fonts.googleapis.com/css?family=Lobster);
.button {
/* text */
	text-decoration:none;
	font:24px/1em '나눔고딕','맑은고딕','돋음체','Droid Sans', sans-serif;
	font-weight:bold;
	text-shadow:rgba(255,255,255,.5) 0 1px 0;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
/* layout */
	padding:.5em .6em .4em .6em;
	margin:.5em;
	display:inline-block;
	position:relative;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
/* effects */
	border-top:1px solid rgba(255,255,255,0.8);
	border-bottom:1px solid rgba(0,0,0,0.1);
	background-image:-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);
	background-image:-moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(noise.png);
	background-image:gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);
	-webkit-transition: background .2s ease-in-out;
	-moz-transition:background .2s ease-in-out;
	transition:background .2s ease-in-out;
/* color */
	color:hsl(0, 0%, 40%) !important;
	background-color:hsl(0, 0%, 75%);
	-webkit-box-shadow:inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	-moz-box-shadow:inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	box-shadow:inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}

/* -------------- button (tag) -------------- */
button.button { border-left: none; border-right: none; }
button.button:hover { cursor: pointer; }

/* -------------- icon -------------- */
.button:before { font: 1.2em/0 'Pictos', sans-serif; content: attr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */	margin-right: 0.4em; }

/* icon only */
.icon { font-weight: normal; font-style: normal; text-indent: 	-999em; }
.icon:before { margin-right:0; display:block; height:0; text-indent:0px; }

/* -------------- colours -------------- */
.button.orange {
	color: hsl(39, 100%, 30%) !important;
	background-color: 	hsl(39, 100%, 50%);
	-webkit-box-shadow:inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	-moz-box-shadow:inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	box-shadow:inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}
.button.orange:hover { background-color: hsl(39, 100%, 65%); }
.button.blue {
	color: hsl(208, 50%, 40%) !important;
	background-color:hsl(208, 100%, 75%);
	-webkit-box-shadow:inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
	-moz-box-shadow:inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
	box-shadow:inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px;/* drop shadow */
}
.button.blue:hover { background-color: hsl(208, 100%, 83%); }
.button.green {
	color: hsl(88, 70%, 30%) !important;
	background-color:hsl(88, 70%, 60%);
	-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	-moz-box-shadow:inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	box-shadow:inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}
.button.green:hover { background-color: hsl(88, 70%, 75%); }
.button.pink {
	color: hsl(340, 100%, 30%) !important;
	background-color:hsl(340, 100%, 75%);
	-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	-moz-box-shadow:inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	box-shadow:inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}
.button.pink:hover { background-color: hsl(340, 100%, 83%); }
.button.transparent { color:rgba(0,0,0,0.5) !important; }
.button.transparent, .button.transparent:hover, .button.transparent:active { background-color: transparent; background-image: none; }
.button.transparent:hover {opacity: .9; }
.button.smallsize {	padding:.3em .6em .2em .2em; margin:0; font-size: 10px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; }

/* -------------- States -------------- */
.button:hover { background-color:hsl(0, 0%, 83%); }
.button:active {
	background-image:-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
	background-image:-moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
	background-image:gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
	-webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.4) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
	-moz-box-shadow:inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.4) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
	box-shadow:inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.4) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
	-webkit-transform:translateY(.2em);
	-moz-transform:translateY(.2em);
	transform:translateY(.2em);
}
.button:focus { outline: none; color: rgba(254,255,255,0.9) !important; text-shadow: rgba(0,0,0,0.2) 0 1px 2px; }
.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover {
	opacity:.5;
	cursor:default;
	color:rgba(0,0,0,0.2) !important;
	text-shadow:none !important;
	background-color:rgba(0,0,0,0.05);
	background-image:none;
	border-top:none;
	-webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.3) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
	-moz-box-shadow:inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.3) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
	box-shadow:inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.3) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
	-webkit-transform:translateY(5px);
	-moz-transform:translateY(5px);
	transform:translateY(5px);
}

/* -------------- Sizes -------------- */
.xssss { font-size: 9px; }
.xsss { font-size: 10px; }
.xss {font-size: 12x;}
.xs { font-size: 16px; }
.xl { font-size: 32px; }

/* -------------- Materials -------------- */
.button.glossy:after, .button.glass:after {
	content:"";
	position:absolute; 
    width:90%;
    height:60%;
    top:0;
    left:5%; 
    -webkit-border-radius:.5em .5em 1em 1em / .5em .5em 2em 2em;    
    -moz-border-radius:.5em .5em 1em 1em / .5em .5em 2em 2em;
    border-radius:.5em .5em 1em 1em / .5em .5em 2em 2em;
    background-image:-webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );	
    background-image:-moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) );	
    background-image:gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ), color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );	
}
.button.glossy:active:after, .button.glass:active:after, .button.disabled:after, .button[disabled]:after { opacity: .6; }
.button.icon.glossy:after, .button.icon.glass:after { height: 75% ; }

/* -------------- Glass + Transparent -------------- */
.button.glass { text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 .18em .15em; }
.button.glass:active { text-shadow: rgba(255,255,255,.3) 0 1px 0, rgba(0,0,0,0.15) 0 .18em .15em; }

/* -------------- Shapes -------------- */
/* round */
.round, .round.glossy:after, .round.glass:after { border-top:none; -webkit-border-radius:1em; -moz-border-radius:1em; border-radius:1em; }
.sround, .sround.glossy:after, .sround.glass:after { border-top:none; -webkit-border-radius:0.5em; -moz-border-radius:0.5em; border-radius:0.5em; }
/* oval */
.oval {	border-top:none; padding-left:.8em;	padding-right:.8em;	-webkit-border-radius:5em / 2em; -moz-border-radius:5em / 2em; border-radius:5em / 2em; }
.oval.glossy:after, .oval.glass:after { top:5%; -webkit-border-radius:5em / 2em 2em 1em 1em; -moz-border-radius:5em / 2em 2em 1em 1em; border-radius:5em / 2em 2em 1em 1em; }
.oval.icon { padding-left:.8em; padding-right:.8em;	-webkit-border-radius:1.5em / 1em; -moz-border-radius:1.5em / 1em; border-radius:1.5em / 1em; }
.oval.icon.glossy:after, .oval.icon.glass:after { -webkit-border-radius:1.5em / 1em; -moz-border-radius:1.5em / 1em; border-radius:1.5em / 1em; }
/* brackets */
.brackets, .brackets.glossy:after, .brackets.glass:after { border-top:none; -webkit-border-radius:.5em / 1em; -moz-border-radius:.5em / 1em; border-radius:.5em / 1em; }
/* skew */
.skew {	border-top:none; padding-right:1.2em; padding-left:0.8em; -webkit-border-radius:5em 1em / 5em 1em; -moz-border-radius:5em 1em / 5em 1em; border-radius:5em 1em / 5em 1em; }
.skew.glossy:after, .skew.glass:after { left: 10%; -webkit-border-radius:7em 1em / 5em 1em; -moz-border-radius:7em 1em / 5em 1em; border-radius:7em 1em / 5em 1em; }
.skew.icon { padding-right:.9em; padding-left:.8em; }
/* back */
.back, .back.glossy:after, .back.glass:after { border-top-color:rgba(255,255,255,0.5); -webkit-border-radius:1.6em 1.6em 1em 1em / 4em 4em 1em 1em; -moz-border-radius:1.6em 1.6em 1em 1em / 4em 4em 1em 1em; border-radius:1.6em 1.6em 1em 1em / 4em 4em 1em 1em; }
.back.glossy:after, .back.glass:after { left:6%; width:	88%; }
/* knife */
.knife { padding-left: 1.5em; -webkit-border-radius:.2em .5em .5em 8em / .2em .5em .5em 5em; -moz-border-radius:.2em .5em .5em 8em / .2em .5em .5em 5em; border-radius:.2em .5em .5em 8em / .2em .5em .5em 5em; }
.knife.glossy:after, .knife.glass:after { left:3%; width:97%; -webkit-border-radius:.1em .5em .5em 8em / .1em .5em .5em 2em;  -moz-border-radius:.1em .5em .5em 8em / .1em .5em .5em 2em;  border-radius:.1em .5em .5em 8em / .1em .5em .5em 2em; }
.knife.glossy.icon:after, .knife.glass.icon:after { left:5%; width:95%; -webkit-border-radius:.5em .5em 1em 6em / .5em .5em 1em 4em; -moz-border-radius:.5em .5em 1em 6em / .5em .5em 1em 4em; border-radius:.5em .5em 1em 6em / .5em .5em 1em 4em; }
/* shield */
.shield, .shield.glossy:after, .shield.glass:after { -webkit-border-radius:.4em .4em 2em 2em / .4em .4em 3em 3em; -moz-border-radius:.4em .4em 2em 2em / .4em .4em 3em 3em;	border-radius:.4em .4em 2em 2em / .4em .4em 3em 3em; }
.shield { padding-left:.8em; padding-right:.8em; }
.shield.icon { padding-left:.6em; padding-right:.6em; }
/* drop */
.drop { border-top: none; -webkit-border-radius:2em 5em  2em .6em / 2em 4em 2em .6em; -moz-border-radius:2em 5em  2em .6em / 2em 4em 2em .6em; border-radius:2em 5em  2em .6em / 2em 4em 2em .6em; }
.drop.glossy:after, .drop.glass:after { left: 4%; -webkit-border-radius:2em 6em  2em 1em / 2em 4em 2em 2em; -moz-border-radius:2em 6em  2em 1em / 2em 4em 2em 2em; border-radius:2em 6em  2em 1em / 2em 4em 2em 2em; }
.drop.icon { padding-right: .6em; }
/* morph */
.morph { border-top: none; -webkit-border-radius:5em / 2em; -moz-border-radius:/ 2em; border-radius:5em / 2em; -webkit-transition:-webkit-border-radius .3s ease-in-out; -moz-transition:-moz-border-radius .3s ease-in-out; transition:-moz-border-radius .3s ease-in-out; }
.morph:hover { -webkit-border-radius:.4em .4em 2em 2em / .4em .4em 3em 3em; -moz-border-radius:.4em .4em 2em 2em / .4em .4em 3em 3em; border-radius:.4em .4em 2em 2em / .4em .4em 3em 3em; }
.morph:active { -webkit-border-radius:.3em; -moz-border-radius:.3em; border-radius:.3em; }
.morph:after { display: none; }
@-moz-document url-prefix() {
	.button { text-align: center; }
	.icon { padding: .5em 1em; }
	.icon:before { margin-left: -.42em; float: left; }
	.drop.icon { padding-right: 1.1em; }
	.shield.icon { padding-left: 1.1em; padding-right: 1.1em; }
	.skew.icon { padding-right: 1.4em; padding-left: 1.3em; }
	.oval.icon { padding-left: 1.3em; padding-right: 1.3em;	}
	.knife { padding-left: 2em; }
}
/* arrow */
.arrow-up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; }
.arrow-down { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #f00; }
.arrow-right { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid green; }
.arrow-left { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right:5px solid blue; }


/* shapesOfCSS 모양 */
/* http://css-tricks.com/examples/ShapesOfCSS/ */
/* position이 지정된 경우에는 적용되지 않을 수도 있다 */
#heart { position: relative; width: 100px; height: 90px; }
#heart:before, #heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%;  transform-origin: 0 100%; }
#heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; }
#circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
#oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }
#triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; }
#triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; }
#triangle-topleft {	width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }
#triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }
#triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid red;	border-right: 100px solid transparent; }
#triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent; }
#curvedarrow { position: relative; width: 0; height: 0; border-top: 9px solid transparent; border-right: 9px solid red; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); }
#curvedarrow:after { content: ""; position: absolute; border: 0 solid transparent; border-top: 3px solid red; border-radius: 20px 0 0 0; top: -12px; left: -9px; width: 12px; height: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
#trapezoid { border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }
#parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg);  -moz-transform: skew(20deg); -o-transform: skew(20deg); background: red; }
#star-six {	width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; }
#star-six:after { width: 0;	height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: "";	top: 30px; left: -50px; }
#star-five { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right:100px solid transparent; border-bottom: 70px  solid red; border-left:100px solid transparent; -moz-transform:rotate(35deg);
-webkit-transform: rotate(35deg); -ms-transform:rotate(35deg); -o-transform:rotate(35deg); }
#star-five:before { border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform:rotate(-35deg); -ms-transform:rotate(-35deg); -o-transform:rotate(-35deg); }
#star-five:after { position: absolute;display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent;   -webkit-transform: rotate(-70deg); -moz-transform:rotate(-70deg); -ms-transform:rotate(-70deg); -o-transform:rotate(-70deg); content: ''; }
#pentagon { position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: red transparent; }
#pentagon:before { content: ""; position: absolute; height: 0; width: 0; top: -85px; left: -18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent red; }
#hexagon { width: 100px; height: 55px; background: red; position: relative; }
#hexagon:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; }
#hexagon:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red; }
#octagon { width: 100px; height: 100px; background: red; position: relative; }
#octagon:before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; }
#octagon:after { content: ""; position: absolute; bottom: 0; left: 0; border-top: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px;	height: 0; }
#infinity { position: relative; width: 212px;height: 100px; }
#infinity:before, #infinity:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
#infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);  transform: rotate(45deg); }
#diamond { width: 0; height: 0; border: 50px solid transparent;	border-bottom-color: red; position: relative; top: -50px; }
#diamond:after { content: ''; position: absolute; left: -50px; top: 50px; width: 0; height: 0; border: 50px solid transparent; border-top-color: red; }
#diamond-shield { width: 0;	height: 0; border: 50px solid transparent;	border-bottom: 20px solid red;	position: relative;	top: -50px; }
#diamond-shield:after { content: ''; position: absolute; left: -50px; top: 20px; width: 0; height: 0; border: 50px solid transparent; border-top: 70px solid red; }
#diamond-narrow { width: 0;	height: 0; border: 50px solid transparent;	border-bottom: 70px solid red;	position: relative;	top: -50px; }
#diamond-narrow:after { content: ''; position: absolute; left: -50px; top: 70px; width: 0;	height: 0;	border: 50px solid transparent;	border-top: 70px solid red; }
#cut-diamond { border-style: solid; border-color: transparent transparent red transparent; border-width: 0 25px 25px 25px; height: 0; width: 50px; position: relative; margin: 20px 0 50px 0; }
#cut-diamond:after { content: ""; position: absolute; top: 25px; left: -25px; width: 0; height: 0; border-style: solid; border-color: red transparent transparent transparent; border-width: 70px 50px 0 50px; }
#egg { display:block; width: 126px; height: 180px; background-color: red; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius:50%  50%  50%  50%  / 60%   60%   40%  40%; }
#pacman { width: 0px; height: 0px; border-right: 60px solid transparent; border-top: 60px solid red; border-left: 60px solid red; border-bottom: 60px solid red; border-top-left-radius: 60px; border-top-right-radius: 60px; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; }
#talkbubble { width: 120px; height: 80px; background: red; position: relative; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
#talkbubble:before { content:""; position: absolute; right: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid red; border-bottom: 13px solid transparent; }
#burst-8 { background: red; width: 80px; height: 80px; position: relative; text-align: center; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20eg); }
#burst-8:before { content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: red; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); }
#yin-yang {	width: 96px; height: 48px; background: #eee; border-color: red;	border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; }
#yin-yang:before { content: "";	position: absolute;	top: 50%; left: 0; background: #eee; border: 18px solid red; border-radius: 100%; width: 12px; height: 12px; }
#yin-yang:after { content: ""; position: absolute; top: 50%; left: 50%; background: red; border: 18px solid #eee; border-radius:100%; width: 12px; height: 12px; }
#badge-ribbon { position: relative;	background: red; height: 100px;	width: 100px; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; }
#badge-ribbon:before, #badge-ribbon:after { content: ''; position: absolute; border-bottom:70px solid red; border-left:40px solid transparent; border-right:40px solid transparent; top:70px; left: 10px; -webkit-transform:rotate(-140deg); -moz-transform:rotate(-140deg); -ms-transform:rotate(-140deg); -o-transform:rotate(-140deg); }
#badge-ribbon:after { left: auto; right:-10px; -webkit-transform:rotate(140deg); -moz-transform:rotate(140deg); -ms-transform:rotate(140deg); -o-transform:rotate(140deg); }
#tv { position: relative; width: 200px;	height: 150px; margin: 20px 0; background: red;	border-radius: 50% / 10%; color: white;	text-align: center;	text-indent: .1em; }
#tv:before { content: ''; position: absolute; top: 10%;bottom: 10%; right: -5%;	left: -5%; background: inherit;	border-radius: 5% / 50%; }
#chevron { position: relative; text-align: center; padding: 12px; margin-bottom: 6px; height: 60px;	width: 200px; }
#chevron:before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 51%; background: red; -webkit-transform: skew(0deg, 6deg); -moz-transform: skew(0deg, 6deg); -ms-transform: skew(0deg, 6deg); -o-transform: skew(0deg, 6deg); transform: skew(0deg, 6deg); }
#chevron:after { content: ''; position: absolute; top: 0; right: 0; height: 100%; width: 50%; background: red; -webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg);	-ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); }
#magnifying-glass {	font-size: 10em; /* This controls the size. */ display: inline-block; width: 0.4em;	height: 0.4em; border: 0.1em solid red;	position: relative;	border-radius: 0.35em; }
#magnifying-glass::before {	content: ""; display: inline-block; position: absolute;	right: -0.25em;	bottom: -0.1em;	border-width: 0; background: red; width: 0.35em; height: 0.08em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }


/* Pure CSS Buttons */
.pcb, .pcb span { background: url('../icon/css/secondary.png') no-repeat; height: 23px; line-height: 23px; padding: 3px 0 7px 0; }
.pcb, a.pcb:link, a.pcb:visited { color: #333; font-size: 11px; padding-left: 14px;	text-decoration: none !important; }
/* ie 6 hack */
* html div#frame .pcb {	color: #333; padding-top: 0px; padding-bottom: 0px; text-decoration: none; }
/* ie 7 hack */
*:first-child+html .pcb { color: #333; padding-top: 0px; padding-bottom: 0px; text-decoration: none; }
.pcb span {	background-position: right -326px; padding-right: 14px; }
a.green-button, a.green-button:link, a.green-button:visited, .green-active-button, .green-disabled-button {	color: #fff !important; font-size: 12px; font-weight: bold; }
a.green-button:hover { background-position: left -27px; }
a.green-button:hover span {	background-position: right -353px; }
a.green-button:active, .green-active-button { background-position: left -54px; }
a.green-button:active span, .green-active-button span {	background-position: right -380px; }
body .green-disabled-button { color: #A8BE69 !important; background-position: left -81px !important; }
body .green-disabled-button span { background-position: right -407px;}
a.grey-button {	background-position: left -219px; padding-top: 3px;}
a.grey-button span { background-position: right -545px;	padding-top: 3px; }
a.grey-button:hover { background-position: left -246px; }
a.grey-button:hover span { background-position: right -572px; }
a.grey-button:active, .grey-active-button { background-position: left -273px; }
a.grey-button:active span, .grey-active-button span { background-position: right -599px; }
body .grey-disabled-button { background-position: left -300px; color: #bbb !important; }
body .grey-disabled-button span { background-position: right -626px;}
a.red-button, .red-active-button, .red-disabled-button { background-position: left -109px; color: #fff !important; padding-top: 3px; font-weight: bold; }
a.red-button span {	background-position: right -435px; padding-top: 3px; }
a.red-button:hover { background-position: left -137px; }
a.red-button:hover span { background-position: right -463px; }
a.red-button:active, .red-active-button { background-position: left -165px; }
a.red-button:active span, .red-active-button span { background-position: right -491px; }
body .red-disabled-button { background-position: left -192px; color: #DC4143 !important; }
body .red-disabled-button span { background-position: right -518px; }


/* location arrow */
.jump-link { margin: 5px 0; padding: 0; position: relative; }
.jump-link a { float: left; height: 24px; line-height: 24px; position: relative; margin: 0; padding: 0 10px 0 14px; background: #0ac92b; color: #fff; font-size: 12px; text-decoration: none; } 
.jump-link a:after { content: ""; position: absolute; top: 0; right: -12px; width: 0; height: 0; border-color: transparent transparent transparent #0ac92b; border-style: solid; border-width: 12px 0 12px 12px; }
.jump-link a:hover { background: #555; }
.jump-link a:hover:after { border-color: transparent transparent transparent #555; }
.jump-link2 { margin: 5px 0; padding: 0; position: relative; }
.jump-link2 a { float: left; height: 24px; line-height: 24px; position: relative; margin: 0; padding: 0 10px 0 14px; background: #0ac92b; color: #fff; font-size: 12px; text-decoration: none; -moz-border-radius: 6px 0 0 6px; -webkit-border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px; } 
.jump-link2 a:after { content: ""; position: absolute; top: 0; right: -12px; width: 0; height: 0; border-color: transparent transparent transparent #0ac92b; border-style: solid; border-width: 12px 0 12px 12px; }
.jump-link2 a:hover { background: #555; }
.jump-link2 a:hover:after { border-color: transparent transparent transparent #555; }
.jump-link3 { margin: 5px 0; padding: 0; position: relative; }
.jump-link3 a { float: left; height: 24px; line-height: 24px; position: relative; margin: 0; padding: 0 10px 0 14px; background: #0ac92b; color: #fff; font-size: 12px; text-decoration: none; } 
.jump-link3 a:after { content: ""; position: absolute; top: 0; right: -12px; width: 0; height: 0; border-color: transparent transparent transparent #0ac92b; border-style: solid; border-width: 12px 0 12px 12px; }
.jump-link3 a:hover { background: #555; }
.jump-link3 a:hover:after { border-color: transparent transparent transparent #555; }
.jump-link3 a:before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-color: transparent transparent transparent #fff; border-style: solid; border-width: 12px 0 12px 12px; }


/*top 으로 가기 버튼 */
/* <div id="message"> */
/*     <a href="#">Go to TOP</a> */
/* </div> */
#message a {
	/* display: block before hiding */
	display: block; display: none;
	/* link is above all other elements */
	z-index: 999; 
	/* link doesn't hide text behind it */
	opacity: .8;
	/* link stays at same place on page */
	position: fixed;
	/* link goes at the bottom of the page */
	top: 100%; margin-top: -3.3em; /* = height + preferred bottom margin */
	/* link is centered */
	left: 50%; margin-left: -4.0em; /* = half of width */
	/* round the corners (to your preference) */
	-moz-border-radius: 1.500em; -webkit-border-radius: 1.500em;
	/* make it big and easy to see (size, style to preferences) */
	width: 8em; line-height: 2.0em; height: 2.0em; padding: 0.2m; background-color: #000; font-size: 1.2em; text-align: center; color: #fff;
}


/* button2 국내 문성찬 제작 이미지 버튼 관련 */
/* Anchor Button */
a.button2, a.button2 span { position:relative; display:inline-block; text-decoration:none !important; background:url(../icon/css/buttonWhite.gif) no-repeat; cursor:pointer; white-space:nowrap; vertical-align:middle; *vertical-align:top;}
a.button2 {	padding:0; background-position:left top; overflow:visible; }
a.button2 span { left:2px; padding:6px 10px 5px 8px; color:#000; font:12px/12px Sans-serif;	background-position:right top; }
/* Large Size */
a.button2.large { background-position:left -30px;}
a.button2.large span { padding:7px 10px 6px 8px; font:16px/16px Sans-serif;	background-position:right -30px; }
/* xLarge Size */
a.button2.xLarge { background-position:left -65px; }
a.button2.xLarge span {	padding:8px 10px 7px 8px; font:20px/20px Sans-serif; background-position:right -65px; }
/* Small Size */
a.button2.small { background-position:left -107px; }
a.button2.small span { padding:4px 6px 3px 4px;	font:11px/11px Sans-serif; background-position:right -107px; }
/* Control Button + Submit Button */
span.button2, span.button2 button, span.button2 input {	position:relative; margin:0; display:inline-block; border:0; font:12px Sans-serif; white-space:nowrap; background:url(../img/buttonWhite.gif) no-repeat; vertical-align:middle; }
span.button2 { padding:0; background-position:left top; }
span.button2 button, span.button2 input { height:23px; left:2px; *top:-1px; _top:0;	padding:0 10px 0 8px; *padding:0 5px 0 3px;	line-height:24px; background-position:right top; cursor:pointer; }
/* Large Size */
span.button2.large { background-position:left -30px; *top:-1px; }
span.button2.large button, span.button2.large input { height:30px; *top:0; _top:-1px; padding:0 10px 0 8px; *padding:0 5px 0 3px; font:16px/30px Sans-serif; background-position:right -30px; }
/* xLarge Size */
span.button2.xLarge { background-position:left -65px; }
span.button2.xLarge button, span.button2.xLarge input {	height:35px; padding:0 10px 0 8px; *padding:0 5px 0 3px; font:20px/36px Sans-serif;	background-position:right -65px; }
/* Small Size */
span.button2.small { background-position:left -107px; }
span.button2.small button, span.button2.small input { height:18px; *top:0; _top:-1px; padding:0 6px 0 4px; *padding:0 3px 0 2px; font:11px/18px Sans-serif;	background-position:right -107px; }
/* Strong Button */
a.button2.strong *, span.button2.strong * {	font-weight:bold !important; }
/* Icon Add */
a.button2.icon { position:relative;	border:0; vertical-align:middle; }
span.button2 .icon { position:relative;	left:10px; margin-right:8px; vertical-align:middle; }
/* Color Preset */
a.button2.green, button.button2.green, a.button2.green span, span.button2.green, span.button2.green button, span.button2.green input { background-image:url(../icon/css/buttonGreen.gif); color:#fff; }
a.button2.black, button.button2.balck, a.button2.black span, span.button2.black, span.button2.black button, span.button2.black input { background-image:url(../icon/css/buttonBlack.gif); color:#fff; }
a.button2.red, button.button2.red, a.button2.red span, span.button2.red, span.button2.red button, span.button2.red input { background-image:url(../icon/css/buttonRed.gif);	color:#fff; }
a.button2.blue, button.button2.blue, a.button2.blue span, span.button2.blue, span.button2.blue button, span.button2.blue input { background-image:url(../icon/css/buttonBlue.gif); color:#fff; }
/* Offset Debug */
a.button2, span.button2 { margin-right:2px; }


/* button3 음영이 없는 심플 버튼 */
.button3, .button3:visited { background: #222; display: inline-block; padding: 7px 10px 5px; color: #fff; text-decoration: none; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-top:0;border-right:0;border-left:0; border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer }
.button3:hover { background-color: #111; color: #fff; }
.small.button3, .small.button3:visited { font-size: 12px }
.button3, .button3:visited,.medium.button3, .medium.button3:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }									  
.large.button3, .large.button3:visited 	{ font-size: 14px; padding: 8px 14px 9px; }												  
.super.button3, .super.button3:visited { font-size: 34px;  padding: 8px 14px 9px; }
.pink.button3, .magenta.button3:visited	{ background-color: #e22092; }
.pink.button3:hover { background-color: #c81e82; }
.green.button3, .gre en.button3:visited { background-color: #749a02 ; }
.green.button3:hover { background-color: #91bd09; }
.red.button3, .red.button3:visited { background-color: #e62727; }
.red.button3:hover { background-color: #cf2525; }
.orange.button3, .orange.button3:visited	{ background-color: #ff5c00; }
.orange.button3:hover	{ background-color: #d45500; }
.purple.button3, .purple.button3:visited	{ background-color: #9400bf; }
.purple.button3:hover	{ background-color: #a828a8; }
.blue.button3, .blue.button3:visited { background-color: #2981e4; }
.blue.button3:hover { background-color: #2575cf; }
.yellow.button3, .yellow.button3:visited { background-color: #ffb515; }
.yellow.button3:hover { background-color: #fc9200; }
.black.button3, .black.button3:visited { background-color: #000000; }
.black.button3:hover { background-color: #999999; }
.white.button3, .white.button3:visited { background-color: #ffffff; color:#000; }
.white.button3:hover { background-color: #ffffff; }
span.button3, span.button3:visited { background: #222 ; display: inline-block; padding: 7px 10px 5px; color: #fff; text-decoration: none; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-top:0;border-right:0;border-left:0; border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer }
span.button3:hover { background-color: #111; color: #fff; }
span.small.button3, span.small.button3:visited { font-size: 12px }
span.button3, span.button3:visited,span.medium.button3, span.medium.button3:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }										  
span.large.button3, span.large.button3:visited 	{ font-size: 14px; padding: 8px 14px 9px; }												  
span.super.button3, span.super.button3:visited { font-size: 34px;  padding: 8px 14px 9px; }
span.pink.button3, span.magenta.button3:visited	{ background-color: #e22092; }
span.pink.button3:hover { background-color: #c81e82; }
span.green.button3, span.gre en.button3:visited { background-color: #749a02 ; }
span.green.button3:hover { background-color: #91bd09; }
span.red.button3, span.red.button3:visited { background-color: #e62727; }
span.red.button3:hover { background-color: #cf2525; }
span.orange.button3, span.orange.button3:visited	{ background-color: #ff5c00; }
span.orange.button3:hover	{ background-color: #d45500; }
span.purple.button3, span.purple.button3:visited	{ background-color: #9400bf; }
span.purple.button3:hover	{ background-color: #a828a8; }
span.blue.button3, span.blue.button3:visited { background-color: #2981e4; }
span.blue.button3:hover { background-color: #2575cf; }
span.yellow.button3, span.yellow.button3:visited { background-color: #ffb515; }
span.yellow.button3:hover { background-color: #fc9200; }
span.black.button3, span.black.button3:visited { background-color: #000000; }
span.black.button3:hover { background-color: #999999; }
span.white.button3, span.white.button3:visited { background-color: #ffffff; color:#000; }
span.white.button3:hover { background-color: #ffffff; }
button.button3, button.button3:visited { background: #222 ; display: inline-block; padding: 7px 10px 5px; color: #fff; text-decoration: none; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-top:0;border-right:0;border-left:0; border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer }
button.button3:hover { background-color: #111; color: #fff; }
button.small.button3, button.small.button3:visited { font-size: 12px }
button.button3, button.button3:visited,button.medium.button3, button.medium.button3:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
button.large.button3, button.large.button3:visited 	{ font-size: 14px; padding: 8px 14px 9px; }												  
button.super.button3, button.super.button3:visited { font-size: 34px;  padding: 8px 14px 9px; }
button.pink.button3, button.magenta.button3:visited	{ background-color: #e22092; }
button.pink.button3:hover { background-color: #c81e82; }
button.green.button3, button.green.button3:visited { background-color: #749a02; }
button.green.button3:hover { background-color: #91bd09; }
button.red.button3, button.red.button3:visited { background-color: #e62727; }
button.red.button3:hover { background-color: #cf2525; }
button.orange.button3, button.orange.button3:visited	{ background-color: #ff5c00; }
button.orange.button3:hover	{ background-color: #d45500; }
button.purple.button3, button.purple.button3:visited	{ background-color: #9400bf; }
button.purple.button3:hover	{ background-color: #a828a8; }
button.blue.button3, button.blue.button3:visited { background-color: #2981e4; }
button.blue.button3:hover { background-color: #2575cf; }
button.yellow.button3, button.yellow.button3:visited { background-color: #ffb515; }
button.yellow.button3:hover { background-color: #fc9200; }
button.white.button3, button.white.button3:visited { background-color: #ffffff; color:#000; }
button.white.button3:hover { background-color: #ffffff; }
input.button3, input.button3:visited { background: #222; display: inline-block; padding: 7px 10px 5px; color: #fff; text-decoration: none; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); border-top:0;border-right:0;border-left:0; position: relative; cursor: pointer }
input.button3:hover	 { background-color: #111; color: #fff; }
input.small.button3, input.small.button3:visited { font-size: 12px}
input.button3, input.button3:visited,input.medium.button3, input.medium.button3:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
input.large.button3, input.large.button3:visited { font-size: 14px; padding: 8px 14px 9px; }												  
input.super.button3, input.super.button3:visited { font-size: 34px;  padding: 8px 14px 9px; }
input.pink.button3, input.magenta.button3:visited	{ background-color: #e22092; }
input.pink.button3:hover { background-color: #c81e82; }
input.green.button3, input.green.button3:visited { background-color: #749a02; }
input.green.button3:hover { background-color: #91bd09; }
input.red.button3, input.red.button3:visited { background-color: #e62727; }
input.red.button3:hover { background-color: #cf2525; }
input.orange.button3, input.orange.button3:visited	{ background-color: #ff5c00; }
input.orange.button3:hover	{ background-color: #d45500; }
input.purple.button3, input.purple.button3:visited	{ background-color: #9400bf; }
input.purple.button3:hover	{ background-color: #a828a8; }
input.blue.button3, input.blue.button3:visited { background-color: #2981e4; }
input.blue.button3:hover { background-color: #2575cf; }
input.yellow.button3, input.yellow.button3:visited { background-color: #ffb515; }
input.yellow.button3:hover { background-color: #fc9200; }
input.white.button3, input.white.button3:visited { background-color: #ffffff; color:#000; }
input.white.button3:hover { background-color: #ffffff; }


/*button 4 사이즈 작은 버튼류*/
.button4 { padding: 2px; display: inline; background: #222 url(../icon/css/button.png) repeat-x bottom;	border: none; color: #fff; cursor: pointer;	font-weight: bold; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-shadow: 1px 1px #666; }
.button4:hover { background-position: 0 center; }
.button4:active { background-position: 0 top; position: relative; padding: 6px 10px 4px; }
.button4.red { background-color: #e50000; }
.button4.pink { background-color: #e22092; }
.button4.purple { background-color: #9400bf; }
.button4.green { background-color: #58aa00; }
.button4.orange { background-color: #ff9c00; }
.button4.blue { background-color: #2c6da0; }
.button4.black { background-color: #333; }
.button4.yellow { background-color: #ffb515; }
.button4.white { background-color: #fff; color: #000; text-shadow: 1px 1px #fff; }
.button4.small { font-size: 75%; padding: 3px 7px; }
.button4.large { font-size: 125%; padding: 7px 12px; }
button.button4 { padding: 5px 10px;	display: inline; background: #777 url(../icon/css/button.png) repeat-x bottom; border: none; color: #fff; cursor: pointer; font-weight: bold; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-shadow: 1px 1px #666; }
button.button4:hover { background-position: 0 center; }
button.button4:active { background-position: 0 top; position: relative; padding: 6px 10px 4px; }
button.button4.red { background-color: #e50000; }
button.button4.pink { background-color: #e22092; }
button.button4.purple { background-color: #9400bf; }
button.button4.green { background-color: #58aa00; }
button.button4.orange { background-color: #ff9c00; }
button.button4.blue { background-color: #2c6da0; }
button.button4.black { background-color: #333; }
button.button4.yellow { background-color: #ffb515; }
button.button4.white { background-color: #fff; color: #000; text-shadow: 1px 1px #fff; }
button.button4.small { font-size: 75%; padding: 3px 7px; }
button.button4.large { font-size: 125%; padding: 7px 12px; }
input.button4 { padding: 5px 10px; display: inline; background: #777 url(../icon/css/input.png) repeat-x bottom; border: none; color: #fff; cursor: pointer; font-weight: bold; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-shadow: 1px 1px #666;
}
input.button4:hover { background-position: 0 center; }
input.button4:active { background-position: 0 top; position: relative; padding: 6px 10px 4px; }
input.button4.red { background-color: #e50000; }
input.button4.pink { background-color: #e22092; }
input.button4.purple { background-color: #9400bf; }
input.button4.green { background-color: #58aa00; }
input.button4.orange { background-color: #ff9c00; }
input.button4.blue { background-color: #2c6da0; }
input.button4.black { background-color: #333; }
input.button4.yellow { background-color: #ffb515; }
input.button4.white { background-color: #fff; color: #000; text-shadow: 1px 1px #fff; }
input.button4.small { font-size: 75%; padding: 3px 7px; }
input.button4.large { font-size: 125%; padding: 7px 12px; }


/*button5*/
.button5 { display:inline-block; font:italic 16px/24px Arial, Helvetica, sans-serif; color:#fff; padding:13px 13px 12px; border-radius:5px 5px 0 0; background: #03d0d9; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#03d1da), to(#03d0d9) ); background: -webkit-linear-gradient(#03d1da, #03d0d9); background: -moz-linear-gradient(#03d1da, #03d0d9); background: -ms-linear-gradient(#03d1da, #03d0d9); background: -o-linear-gradient(#03d1da, #03d0d9); background: linear-gradient(#03d1da, #03d0d9); -pie-background: linear-gradient(#03d1da, #03d0d9); }
.button:hover{ text-decoration:none; background:#212020;-pie-background: linear-gradient(#212020, #212020);}
.button5_1{ display:inline-block;font:italic 15px/18px Arial, Helvetica, sans-serif; color:#1d1d1d; -webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease; }
.button5_1:hover{ text-decoration:none; color:#03d1da; }


/*CBDB BUTTON */
.cbdb-menu li { display: block; float: left; line-height: 35px; list-style:none; margin: 0 5px; }
.cbdb-menu li a {
	/* This generators the gradient on top of the solid color */
	background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgba(255,255,255,.5)), color-stop(1, rgba(0,0,0,.1)) );
	background-image: -moz-linear-gradient( center top, rgba(255,255,255,.5) 0%, rgba(0,0,0,.1) 100% );
	color: #f4f4f4; /* IE */
	color: rgba(255, 255, 255, 0.8);
	display: block;	
	font: bold 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif;		
	outline:none;
	padding: 5px 15px;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; 
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);	
}
.cbdb-menu li a:active {
		background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0,rgba(255,255,255,.5)), color-stop(.1,rgba(255,255,255,.2)), color-stop(.85, rgba(0,0,0,.2)), color-stop(100, rgba(0,0,0,.4)) );
		background-image: -moz-linear-gradient( center bottom, rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 10%, rgba(0,0,0,.2) 85%, rgba(0,0,0,.4) 100% );
}

/* Dark Text */
.cbdb-menu li a.dark { color: #333; /* IE */ color: rgba(0, 0, 0, 0.8); text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4); }

/* COLORS */
.cbdb-menu .red { background: #B80202; border: #B80202 1px solid }
.cbdb-menu .red:hover, .cbdb-menu .red:focus{ background-color:#e30606 }
.cbdb-menu .green { background: #46c431; border: #46c431 1px solid }
.cbdb-menu .green:hover,.cbdb-menu .green:focus { background-color:#44e329 }
.cbdb-menu .yellow { background: #D9CE1C; border: #D9CE1C 1px solid }
.cbdb-menu .yellow:hover,.cbdb-menu .yellow:focus { background-color:#eee117 }
.cbdb-menu .cyan { background: #23c6de; border: #23c6de 1px solid }
.cbdb-menu .cyan:hover,.cbdb-menu .cyan:focus { background-color:#18d8f4 }
.cbdb-menu .blue { background: #3271d9; border: #3271d9 1px solid }
.cbdb-menu .blue:hover,.cbdb-menu .blue:focus { background-color:#377ef2 }


/* Toggle Switches 토글 스위치 버튼 */
/* Hide by default */
.switch .slide-button, .toggle p span { display: none; }


/* Toggle Switches */
@media only screen {
	
	/* Checkbox */
	.toggle { position: relative; padding: 0; margin-left: 100px; }
	.toggle label { position: relative; z-index: 3; display: block; width: 100%; }
	
	/* Don't hide the input from screen-readers and keyboard access	 */
	.toggle input { position: absolute;opacity:0; z-index: 5; }
	.toggle p { position: absolute; left: -100px; width: 100%; margin: 0; padding-right: 100px; text-align: left; }
	.toggle p span { position: absolute; top: 0; left: 0; z-index: 5; display: block; width: 50%; margin-left: 100px; text-align: center; }
	.toggle p span:last-child { left: 50%; }
	.toggle .slide-button { position: absolute; right: 0; top: 0; z-index: 4; display: block; width: 50%; height: 100%; padding: 0; }

	/* Radio Switch */
	.switch { position: relative; padding: 0; }
	.switch input { position: absolute; opacity: 0; }
	.switch label { position: relative; z-index: 2; float: left; width: 50%; height: 100%; margin: 0; text-align: center; }
	.switch .slide-button { position:absolute; top:0; left:0; padding:0; z-index: 1; width: 50%; height: 100%; }
	.switch input:last-of-type:checked ~ .slide-button { left: 50%; }
	
	/* Switch with 3 items */
	.switch.switch-three label, .switch.switch-three .slide-button { width: 33.3%; }
	.switch.switch-three input:checked:nth-of-type(2) ~ .slide-button {	left: 33.3%; }
	.switch.switch-three input:checked:last-of-type ~ .slide-button { left: 66.6%; }
	
	/* Switch with 4 items */ 
	.switch.switch-four label, .switch.switch-four .slide-button { width: 25%; }
	.switch.switch-four input:checked:nth-of-type(2) ~ .slide-button { left: 25%; }
	.switch.switch-four input:checked:nth-of-type(3) ~ .slide-button { left: 50%; }
	.switch.switch-four input:checked:last-of-type ~ .slide-button { left: 75%; }
	
	/* Switch with 5 items */
	.switch.switch-five label, .switch.switch-five .slide-button { width: 20%; }
	.switch.switch-five input:checked:nth-of-type(2) ~ .slide-button { left: 20%; }
	.switch.switch-five input:checked:nth-of-type(3) ~ .slide-button { left: 40%; }
	.switch.switch-five input:checked:nth-of-type(4) ~ .slide-button { left: 60%; }
	.switch.switch-five input:checked:last-of-type ~ .slide-button { left: 80%; }
	
	/* Shared */
	.toggle, .switch { display: block; height: 30px; }
	.switch *, .toggle * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
	.switch .slide-button, .toggle .slide-button { display: block; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
	.toggle label, .toggle p, .switch label { line-height: 30px; vertical-align: middle; }
	.toggle input:checked ~ .slide-button { right: 50%; }
	
	/* Outline the toggles when the inputs are focused */
	.toggle input:focus ~ .slide-button, .switch input:focus + label { outline: 1px dotted #888; }
	
	/* Bugfix for older Webkit, including mobile Webkit. Adapted from:
	 * http://css-tricks.com/webkit-sibling-bug/
	 */
	.switch, .toggle { -webkit-animation: bugfix infinite 1s; }
	@-webkit-keyframes bugfix { from { position: relative; } to { position: relative; } }
	
	/* Standalone Themes */
	/* Candy Theme
	 * Based on the "Sort Switches / Toggles (PSD)" by Ormal Clarck
	 * http://www.premiumpixels.com/freebies/sort-switches-toggles-psd/
	 */
	.candy { background-color: #2d3035; color: #fff; font-weight: bold; text-align: center; text-shadow: 1px 1px 1px #191b1e; border-radius: 3px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2); }
	.candy input:checked + label { color: #333; text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
	.candy .slide-button { border: 1px solid #333; background-color: #70c66b; background-image:-webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)); background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)); background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)); background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)); background-image:linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.45); border-radius: 3px; }
	.candy p { color: #333; text-shadow: none; }
	.candy span { color: #fff; }
	.candy.blue .slide-button { background-color: #38a3d4; }
	.candy.yellow .slide-button { background-color: #f5e560; }
	
	/* Android Theme  Based on Holo */
	.android { background-color: #b6b6b6; color: #fff; }
	.android.toggle { border: 2px solid #b6b6b6; }
	.android.switch { overflow: hidden; }
	.android.switch .slide-button { background-color: #279fca; -webkit-transform: skew(20deg) translateX(10px); -moz-transform: skew(20deg) translateX(10px); -ms-transform: skew(20deg) translateX(10px); -o-transform: skew(20deg) translateX(10px); transform: skew(20deg);
	}
	.android.toggle .slide-button { border-radius: 2px; background-color: #848484; }
	
	/* Selected ON toggle */
	.android.toggle input:first-of-type:checked ~ .slide-button { background-color: #279fca; }
	.android.switch input:first-of-type:checked ~ .slide-button { -webkit-transform: skew(20deg) translateX(-10px); -moz-transform: skew(20deg) translateX(-10px); -ms-transform: skew(20deg) translateX(-10px); -o-transform: skew(20deg) translateX(-10px); transform: skew(20deg) translateX(-10px); }
	.android p { color: #333; }
	.android span { color: #fff; }
	.android.switch, .android span { text-transform: uppercase; }
	
	/* iOS Theme  Similar to iOS but more accessible*/ 
	.ios { background: -webkit-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe); background: -moz-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe); background: -o-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe); background: -ms-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe); background: linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe); -webkit-box-shadow: inset 0 2px 2px #b6b6b6, inset 3px 0 3px #b6b6b6; box-shadow: inset 0 2px 2px #b6b6b6, inset 3px 0 3px #b6b6b6; border: 1px solid #efefef; border-radius: 3px; color: #7f7f7f; font: bold 14px sans-serif; text-align: center; text-shadow: none; }
	.ios.toggle .slide-button {	border: 1px solid #919191; background: -webkit-linear-gradient(top, #cdcdcd, #fbfbfb); background: -moz-linear-gradient(top, #cdcdcd, #fbfbfb); background: -o-linear-gradient(top, #cdcdcd, #fbfbfb); background: -ms-linear-gradient(top, #cdcdcd, #fbfbfb); background: linear-gradient(top, #cdcdcd, #fbfbfb); border-radius: 3px; -webkit-box-shadow: inset 0 1px 0 #f0f0f0; box-shadow: inset 0 1px 0 #f0f0f0; }
	
	/* Selected ON toggle */
	.ios.toggle input:first-of-type:checked ~ p span:first-child, .ios.switch input:checked + label { color: #fff; text-shadow: 0 -1px 0 #1b3b6f; }
	.ios.toggle input:first-of-type:checked ~ .slide-button,
	.ios.switch .slide-button { background: -webkit-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc); background: -moz-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc); background: -o-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc); background: -ms-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc); background: linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc); border-radius: 3px; border: 1px solid #1654b5; text-align: center; color: #fff; font: bold 14px sans-serif; text-shadow: 0 -1px 0 #1b3b6f; }
	.ios.toggle p span { color: #7f7f7f;}
	
}


/* 스타 모양 가격 할인 이벤트 모양 */
.price-container, .price-container:before, .price-container:after, .price-container .price, .price-container .price:before, .price-container .price:after { height: 8.5em; width: 8.5em;background: #760B1F url(price-bg.png) top left no-repeat; background-size: 8.5em; }
.price-container:before, .price-container:after, .price-container .price:before, .price-container .price:after { content: ""; position: absolute; }
.price-container { margin: 100px auto; /* Centering for demo */ position: relative; /* Context */ top: 2.5em; left: 2.5em; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.price-container:before { top: 0; left: 0; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); }
.price-container:after { top: 0; left: 0; -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); transform: rotate(-15deg); }
.price-container .price { padding: .5em 0em; height: 7.5em; /* height minus padding */ position: absolute; bottom: 0; right: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); z-index: 1; /* important so the text shows up */ }
.price-container .price:before { top: 0; left: 0; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); }
.price-container .price:after { top: 0; left: 0; -webkit-transform: rotate(75deg); -moz-transform: rotate(75deg); -ms-transform: rotate(75deg); -o-transform: rotate(75deg); transform: rotate(75deg); }
.price-container .price span { position: relative; z-index: 100; display: block; text-align: center; color: #FE3D5C; font: 1.8em/1.4em Sans-Serif; text-transform: uppercase; }
.price-container .price span.number { font-weight: bold; font-size: 2.5em; line-height: .9em; color: #fff; }


/* 탭키 레이아웃 메뉴 */
.tabmenu .tabs { position: relative; min-height: 220px; /* This part sucks */ clear: both; }
.tabmenu .tab { float: left; }
.tabmenu .tab label {  padding: 10px; border: 1px dotted; border-bottom: 0; margin-left: -1px; position: relative; left: 1px; cursor:pointer; }
.tabmenu .tab [type=radio] { display: none;}
.oldie .tabmenu .tab label { padding: 0; border:0; border-bottom: 0; float:left; }
.oldie .tabmenu .tab [type=radio] { display: block; float:left; margin:2px 2px 0 4px; }
.tabmenu .content { position: absolute; top: 28px; left: 0; right: 0; bottom: 0; padding: 10px; border: 1px dotted; }
.tabmenu .content > * { opacity: 0; -webkit-transform: translate3d(0, 0, 0); -webkit-transform: translateX(-100%); -moz-transform:translateX(-100%); -ms-transform:translateX(-100%); -o-transform:translateX(-100%); -webkit-transition: all 0.6s ease; -moz-transition:all 0.6s ease; -ms-transition:all 0.6s ease; -o-transition:all 0.6s ease; }
.oldie .tabmenu .content > * { filter:alpha(opacity=0);  }
.tabmenu [type=radio]:checked ~ label { z-index: 2; }
.tabmenu [type=radio]:checked ~ label strong { color:#0A9696; }
.tabmenu [type=radio]:checked ~ label ~ .content { z-index: 1; }
.tabmenu [type=radio]:checked ~ label ~ .content > * { opacity: 1; -webkit-transform: translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); }
.oldie .tabmenu input[type=radio]:checked ~ label ~ .content > * { filter:alpha(opacity=100); }    
.tabmenu .content .more { position:absolute; top:-22px; right:0; }

/* 메뉴 바 디자인 */
/* simple roll over */
#upline ul#blue { margin:0; padding:0; list-style-type:none; }
#upline ul#blue > li { position:relative; float:left; border-top:4px solid #efefef; margin-right: 15px; padding-right: 20px; padding-top: 5px;}
#upline ul#blue .current { border-top:4px solid #3d496a;}
#upline ul#blue > li:hover { border-top:4px solid #3d496a;}
#upline ul#blue > li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;}
#upline ul#blue > li a:hover { color:#8895b8; border:none; }
#upline ul#blue > li span{ display:none; position:absolute; top:20px; left:2px; width:160px; font:normal 9px Verdana, Georgia, "Times New Roman", Times, serif; line-height: 15px; }
#upline ul#blue > li a:hover span {margin-top: 7px; display:block; color: #8895b8;}
#upline ul#green { margin:0; padding:0; list-style-type:none; }
#upline ul#green li { position:relative; float:left; border-top:4px solid #d7ebd5; margin-right: 15px; padding-right: 20px; padding-top: 5px;}
#upline ul#green .current { border-top:4px solid #3c633c;}
#upline ul#green li:hover { border-top:4px solid #3c633c;}
#upline ul#green li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#3d6c3d;}
#upline ul#green li a:hover { color:#89be89; border:none; }
#upline ul#green li span{ display:none; position:absolute; top:20px; left:2px; width:160px; font:normal 9px Verdana, Georgia, "Times New Roman", Times, serif;  line-height: 15px;}
#upline ul#green li a:hover span {margin-top: 7px; display:block; color: #89be89;}
#upline ul#red { margin:0; padding:0; list-style-type:none; }
#upline ul#red li { position:relative; float:left; border-top:4px solid #edcbcb; margin-right: 15px; padding-right: 20px; padding-top: 5px;}
#upline ul#red .current { border-top:4px solid #953434;}
#upline ul#red li:hover { border-top:4px solid #953434;}
#upline ul#red li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#953434;}
#upline ul#red li a:hover { color:#b17878; border:none; }
#upline ul#red li span{ display:none; position:absolute; top:20px; left:2px; width:160px; font:normal 9px Verdana, Georgia, "Times New Roman", Times, serif;  line-height: 15px;}
#upline ul#red li a:hover span {margin-top: 7px; display:block; color: #b17878;}


/*손톱(아주작은)글 css, 배경 color는 인라인으로 지정*/
.cssofnew { display: inline-block; text-align: center; font: 9px Times New Roman; padding: 0px 2px 1px 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #ffffff; vertical-align:middle; margin-bottom:3px;}
.cssofnew.orange { background-color: #ffa600; }
.cssofnew.pink { background-color: #ff80aa; }
.cssofnew.blue { background-color: #2981e4; }
.cssofnew.yellow { background-color: #ffea00; }
.cssofnew.red { background-color: #e70000; }
.cssofnew.purple { background-color: #c700df; }
.cssofnew.black { background-color: #000; }

.cssofyes { display: inline-block; text-align: center; font: 9px AppleGothic, sans-serif; padding: 2px 4px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #ffffff; vertical-align:middle; margin-bottom:3px;}
.cssofyes.orange { background-color: #ffa600; }
.cssofyes.pink { background-color: #ff80aa; }
.cssofyes.blue { background-color: #2981e4; }
.cssofyes.yellow { background-color: #ffea00; }
.cssofyes.red { background-color: #e70000; }
.cssofyes.purple { background-color: #c700df; }
.cssofyes.black { background-color: #000; }