﻿/* CSS Document */

@font-face {
    font-family: "nanumGB";
    font-style: normal;
    font-weight: normal;
    src: local("."), url("font/nanumGB.woff") format("woff"), url("font/nanumGB.ttf") format("truetype");
}

* {margin:0; padding:0;}

.clr 	{clear:both} .left {float:left} .right {float:right}
.pad5	{padding:5px}	.pad10	{padding:10px} 	.mar5 	{margin: 5px} 		.mar10 	{margin: 10px}

.dot 	{border: 1px dotted #fff}
.nd   	{min-height:100px;}
.bor 	{border: 1px solid red} 

body { 
	/* background:url(img/bg0_1.png) center top; */
	font-size:14px; 
	font-family: "nanumGB",RixGo L,"나눔고딕",NanumGothic,"맑은 고딕","Malgun Gothic",Dotum,sans-serif;	
	line-height: 1; 
	color: #333333; 
	background:#FFF;
}
h1 		{font-size: 40px} h2 {font-size: 32px} h3 {font-size: 24px} h4 {font-size: 18px} h5 {font-size: 14px} h6 {font-size: 10px}

a 			{color:#cc0000; text-decoration:none}
a:visited 	{color:#ccc}
a:hover 	{color:#ff0000}

input, textarea {border: 1px solid #abadb3; vertical-align: middle;}
ul 		{list-style: none; }
img 	{border:0;}

.w {width:1000px; margin:0 auto;}
.w2 {width:960px; margin:0 auto}
.w2 .nd {background:#FFF; padding:20px}
.mau_1 {} /*mau tieude*/
.mau_2 {} /*mau noidung*/

#top {
	min-height:100px;;  
}	


.row .left, .row .right {width:32%; text-align:center}
.row .left { margin-right:10px; }
.row {clear:both; padding:10px}
.row .left:first-child {margin-left:10px}
.row .left:last-child {margin-right:0px}
.row .right {margin-left: 1%}
.row img { background:#ddd; padding:5px; border:1px solid #ccc}


.filters {
  border-bottom: 0px solid #d2d2d2;
  margin-bottom: 0px;
  padding: 0px; border:0px solid red;
}
.filters {text-align:left; }
.sorting,.layout-mode {text-align:right;  border:0; margin:0; padding:0; background:none}
.sorting a { font-size:12px;}

/*
.sorting h4 {border:0px solid red; display:block; width:59%}

#gwd_product h4 {font-family:arial; padding:5px; text-align:left; text-transform:uppercase} 
*/

.k {
  background: #fff;
  border-bottom: 2px solid #d2d2d2;
  margin-bottom: 13px;
  padding: 5px; text-align:center;

 }
ul#sort {padding-bottom:0px} 
#filters li, #sort li, #grid-list li  {margin-bottom:0px}
.layout-mode {float:none}


#gwd_about {
	padding:10px; text-align:justify; color:#000; font-size:16px; line-height:30px; font-family:NanumGothic; font-weight:bold; 
	text-shadow: 0 1px 0 rgba(255, 255, 255, 1), 0 -1px 0 rgba(0, 0, 0, 0.2); letter-spacing: -2px;
	background:#999; padding: 2px 30px	
}
#gwd_about .dot {padding:2px; border-width:2px}
#gwd_about .nd { padding:10px; background:#fff }

#gwd_about ul {margin: 10px; color:#000099; font-size:10px}
#gwd_about li {margin:5px}


#gwd_gallerycafe .row2 {border-radius: 5px; background:#ccc; padding:10px; text-align:left; color:#FFFFFF}

.gwd_top {position:relative;margin: 0 auto; width:960px}
.gwd_logo {position:absolute; top:5px; left:5px}

.header_wrap {background:#43351c; width:100%; min-height:80px;}
.artmanager {background:url(img/text_artmanager.png) no-repeat 30px 10px; width:auto; height:73px; text-align:right; cursor: pointer;}
.header_wrap .text {position:absolute; right:25px; top:30px; color:#FFF}

.gnb {background:#fff; min-height:39px; background:url(img/gnb_shadow.png) repeat-x left top; display:block;}
.p7HGM05 .trigtop a {font-size:100%; color:#555; margin:0; padding:10px 37px;}
.gnb ul li {text-align:center; background:url(img/nav_sepe_line.gif) no-repeat left 13px;}
.gnb ul li:first-child {background:none;}

.footer_warp_footer {background:#312818; padding:15px 0 10px 0; display:block; min-height:30px; }
.footer_warp_footer ul li {float:left; padding:0 19.5px; text-align:center;}
.footer_warp_footer ul li a {color:#FFFFFF; font-size:15px}
.footer_warp_footer ul ul {margin-top:20px}
.footer_warp_footer ul li li {float:none; text-align:left}
.footer_warp_footer ul li li a {color:#999; font-size:13px}

#bottom {background:#e0d9d3; min-height:80px}
#bottom .diachi {font-size:11px; color:#6b5e46; line-height:24px;  padding:20px 50px; letter-spacing:0px; }
.logo_bottom {position:absolute; right:60px; top:20px}

/* FORM */
.KT_tngform, .KT_tnglist {border:0; width:100%}
.KT_tngtable td {border:0}
.KT_tngtable {border:0}
.KT_tngtable th, .KT_tngtable td.KT_th {background-color:#efefef; border: 1px solid #fff; padding:5px}
.KT_tngtable th {text-align:center; vertical-align:middle}
.KT_tngtable td {text-align:left}
input[type="radio"], input[type="checkbox"] {margin:0}
.button_big {padding:2px 10px}
.KT_bottombuttons {border:0; background:none}
.KT_tngtable input, .KT_tngtable select {height:22px; font-size:14px}

.chitiet {text-align:justify}
.chitiet h4 {text-align:left}
.chitiet h3:after, h3:before {background:none}

ul.gallery .gallery-grid {background:#fffeee; border: 1px solid #dadada; border-bottom-width: 3px; border-s}


.nav-tabs {border-bottom:0}
.w_menu {width:940px; margin:auto}

@media screen and (max-width: 980px) {
.w,.w2,.gwd_top {width:95%}
#gwd_about .nd , {padding:10px; background:#FFF; border-width:1px 10px}

#bottom .diachi {
    color: #6b5e46;
    font-size: 11px;
    letter-spacing: 0;
    line-height: 24px;
    padding: 20px 2px;
}

.logo_bottom {
	display:none
}



}

@media screen and (max-width: 945px) {
.w_menu {width:auto;}
.p7HGM05 .trigtop a {padding:10px 33px;}
}

@media screen and (max-width: 924px) {
.footer_warp_footer ul li {padding:0 15px}
.w_menu_b {width:860px;}
}

@media screen and (max-width: 913px) {
.p7HGM05 .trigtop a {padding:10px 32px;}
}



@media screen and (max-width: 886px) {
.p7HGM05 .trigtop a {padding:10px 30px;}

}

@media screen and (max-width: 860px) {
.w_menu_b {width:auto;}
.footer_warp_footer ul li {padding:0 10px}
}

@media screen and (max-width: 855px) {
.footer_warp_footer ul li a {text-align:center}
}
@media screen and (max-width: 857px) {
.p7HGM05 .trigtop a {padding:10px 27px;}
}

@media screen and (max-width: 815px) {
.p7HGM05 .trigtop a {padding:10px 25px;}
}

@media screen and (max-width: 800px) {
.p7HGM05 .trigtop a {padding:10px 24px;}
.footer_warp_footer ul li a {font-size:14px}
}

@media screen and (max-width: 773px) {
.p7HGM05 .trigtop a {padding:10px 22px;}
}

@media screen and (max-width: 745px) {
.p7HGM05 .trigtop a {padding:10px 20px;}
.footer_warp_footer ul li a {font-size:12px}
}

@media screen and (max-width: 716px) {
.p7HGM05 .trigtop a {padding:10px 18px;}
}

@media screen and (max-width: 700px) {
.w_menu_b {display:none}
.footer_warp_footer ul li {display:block; float:none;text-align:center; border:1px solid #666; margin:2px; padding:5px}
.footer_warp_footer ul li li {text-align:center}
.footer_warp_footer ul ul {margin-top:2px}
}





.opacity{
  	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 *//* Theoretically for IE 8 & 9 (more valid) * ...but not required as filter works too * should come BEFORE filter */
  	filter: alpha(opacity=20); /* IE 5-7 * This works in IE 8 & 9 too * ... but also 5, 6, 7 */
 	opacity: 0.2; /* Modern Browsers */
	overflow:hidden;
	background:#000
}
.test_opacity #container {
    position: relative;
    width: auto; height: 100px;
}
.test_opacity #block  {
    background: #CCC;
    filter:alpha(opacity=20); /* IE */
    -moz-opacity:0.2; /* Mozilla */
    opacity: 0.2; /* CSS3 */
    position: absolute;
    top: 0px; left: 0px;
    height: 100%; width:100%; z-index:1
}
.test_opacity #text {
    position: absolute;
    top: 0px; left: 0px;
    width: 100%; height: 100%; z-index:2
}

.counter {position: absolute; right: 200px; bottom: 20px;}
.item-counter{display: inline-block; border: 1px solid #bcb6b2; padding: 3px 6px;/* background: #e8e1da*/}
@media(max-width: 980px){
  .counter {right: 20px}
}

@media(max-width: 480px){
  .counter {right: 50%; transform: translateX(50%);    white-space: nowrap;}
  #bottom .diachi {padding-bottom: 70px}
}
@media(max-width: 280px){
  .counter {white-space: normal; text-align: center;}
  #bottom .diachi {padding-bottom: 100px}
  .item-counter {white-space: nowrap;}
}