@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Nanum+Brush+Script|Nanum+Pen+Script');
* {font-family:'Nanum Gothic', sans-serif; src:url('/include/css/NanumGothic.ttf'); font-weight:normal;}

body, html{overflow-x:hidden; color:#666;}

.bg_gray {background:#aaa;}
.bg_sgray  {background:#eee;}
.bg_white {background:#FFF;}
.bg_red{background:#ff6600;}
.bg_blue{background:#264588;}
.bg_green{background:#a0bd2d;}


.h4 {
font-weight:bold; font-size:20px;
}

.nav ul {
padding:0;
width:100%;
}

.nav li{
float:left;
padding-left:70px;
text-align:right;
cursor:pointer;
transition: all .2s;
font-size:18px;
height:50px;
font-weight:bold;
}

.nav li:hover {
font-weight:bold;
text-shadow:2px 2px 2px #CCC;
}

.npen {
font-family: 'Nanum Pen Script', cursive; color:#5e6b51;
}

p, body, ul, li, dt, dl, h1, h2, h3, h4, h5,a{margin:0;
padding:0; list-style:none; text-decoration:none; border:0;
}
a:link { color: #323232; }
a:visited { color:#323232; }
a:hover { color:#6f3737; }
a:active { color:#323232; }

body td{
margin:0;
padding:0;
font-size:12px;
font-family:나눔고딕,Dotum, 굴림, Gulim, arial, Verdana, AppleGothic, sans-serif;
color:#707070;
} 

#mlnk:hover {
text-shadow: 1px 1px #ddd;
}

#mlnk2:hover {
text-shadow: 1px 1px #666;
}

#mlnk3:hover {
text-shadow: 1px 1px #bbb;
}

.s3_ul {
clear:both;
padding-bottom:50px;
width:550px;
margin:auto;
}

.s3_ul li {
float:left;
font-size:20px;
border-bottom:solid 1px  #EEE;
line-height:50px;
}

.li_l {
width:200px;
text-align:right;
padding-right:40px;
font-weight:bold;
}

.li_r {
width:300px;

}

.pdl {
padding-left:15px;
}

#btn_img:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#footer_contain #footer{
clear:both;
padding-top:30px;
margin:auto;
}

#footer_contain #footer .f_inner{
position:relative;
width:1100px;
margin:auto;
}

.f_inner dl{
overflow:hidden}

.f_logo{
float:left;
margin-top:0px;
width:40%;
text-align:right;
}

.adcopy{
padding-left:20px;
margin-top:0px;
color:#999;
width:50%;
float:left;
text-align:left;
line-height:20px;
}

.add{margin-bottom:5px;line-height:15px;}

/* SMS */
#msg_screen	{ text-align:center; position:relative; margin:0px 0 0 0; }
#msg_window	{ border:none; width:160px; height:101px; background:transparent; font:12px/1.4em 굴림체; color:#000000; overflow:hidden; padding:0px;}
#msg_max	{ position:absolute; line-height:17px;left:30px; top:5px; width:303px; height:153px; font-size:11px; color:#000000; text-align:left; cursor:text; }
#max_byte	{ margin:0; padding:8px 0 3px 0; font-size:11px; color:#000000; }
/* SMS */

img {
border:none;
}

#sub_visual img{
width:1000px;
margin:0 auto;
display:block

}



#contents_contain2{
width:1100px;
min-height:350px;
margin:0 auto 60px auto;

}


#left_con{
width:220px;
float:left
}

#left_con h2{ 
border:solid 10px #51a8d7;
height:80px;
font-size:20px;
line-height:80px;
color:#51a8d7;
text-align:center;
font-weight:bold;
}


#left_con ul{
font-size:18px;
text-align:left
}

#left_con ul li{
padding:20px 0 20px 20px;
cursor:pointer;
transition:.2s;
border-bottom:solid 1px #FFF;
}

#left_con ul li:hover{
color:#51a8d7;
font-weight:bold;
border-bottom:solid 1px #51a8d7;
border-right:solid 1px #51a8d7;
box-shadow: 3px 3px 3px #51a8d7;
}

#left_con span img{
margin-top:80px}

#right_con{
width:830px;
float:left;
text-align:left;
margin-left:30px;
}

.right_con_inn{
height:60px;
border-bottom:1px dotted #b5b5b5;}

#contents_contain2 h3{
font-size:30px;
color:#333333;
font-weight:400;
margin-top:20px;
float:left;
line-height:30px;
}

#contents_contain2 .loacation{
float:right;
margin-top:28px;
}

	.stlt_top {
	font-size:25px;
	font-weight:bold;
	color:#264588;
	line-height:35px;
	padding-bottom:10px;
	}

div.polaroid {
  width: 96%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  transition: font-size 0.1s ease-out;
}

div.polaroid:hover {
  font-size:16px;
}




/* 메인 슬라이드 이미지 */
@-webkit-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-o-keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@keyframes cf4FadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

#cf4a {
  position:relative;
  height:745px;
  width:2000px;
  margin:0 auto;
}
#cf4a img {
  position:absolute;
  left:0;
}

#cf4a img {
  -webkit-animation-name: cf4FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 22s;

  -moz-animation-name: cf4FadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 22s;

  -o-animation-name: cf4FadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 22s;

  animation-name: cf4FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 22s;
}

#cf4a img:nth-of-type(1) {
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  -o-animation-delay: 16s;
  animation-delay: 16s;
}
#cf4a img:nth-of-type(2) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}
#cf4a img:nth-of-type(3) {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}

#cf4a img:nth-of-type(4) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}

#cf4a img:nth-of-type(5) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}


.tbl th, .tbl2 th {
padding:5px;
color:#666;
font-weight:bold;
font-size:16px;
background:#666;
color:#FFF;
text-align:center;
line-height:40px;
}

.tbl td {
padding:5px;
line-height:25px;
font-size:14px;
text-align:center;
border:dashed 1px #aaa;
}

.tbl2 td {
padding:5px;
line-height:25px;
font-size:14px;
border:dashed 1px #aaa;
text-align:center;
}

.tbl  {
width:98%;
margin:auto;
}

.tbl2  {
width:100%;
}



.lbtn {
background:#333; padding:4px; border-radius:3px; color:#FFF; font-size:12px; font-weight:bold;
}


.box_tlt{
font-size:20px;
font-weight:bold;
padding-bottom:5px;
}

.box_cnt{
padding:20px;
word-break:keep-all;
text-align: justify;
text-justify: inter-word;
border:solid 1px #aaa;
box-shadow:4px 4px 4px #ccc;
border-radius:10px;
font-size:13px;
font-weight:bold;
}

.nav_tbl {
width:100%;
background:#FFF;
}

.nav_tbl td {
border-bottom:dashed 1px #eee;
background:#1676c5;
cursor:pointer;
color:#FFF;
text-align:center;
height:30px;
font-size:13px;
letter-spacing:1.2px;
}

.nav_tbl td:hover {
box-shadow:inset 3px 3px 3px #115995;
text-shadow:2px 2px 2px #115995;
font-weight:bold;
}

.s2_box {
text-align:center; border:solid 1px #ddd; width:60%; padding:20px; margin:auto;
border-radius:10px;
box-shadow:4px 4px 4px #ddd;
color:#3f9ccf;
font-weight:bold;
}


.mipt {
width:250px;
height:25px;
border:solid 2px #305253;
}

.mtxt {
width:380px;
height:145px;
border:solid 2px #305253;
}

.mbtn {
width:200px;
height:30px;
background:#305253;
color:#FFF;
font-weight:bold;
border-radius:5px;
border:none;
}

.s2_txt{
float:left; width:33%; text-align:center;
font-weight:bold;
font-size:18px;
color:#333;
}

.s31_box {
float:left;
text-align:center;
width:33.33%;
}

.s31_tlt {
font-weight:bold;
line-height:40px;
font-size:18px;
color:#333;
}

.s31_img {
width:90%; border-radius:10px;
box-shadow:4px 4px 4px #CCC;
}

.s31_price {
color:#ff3300;
font-weight:bold;
line-height:30px;
}

.s31_deli {
color:#0584c0;
font-weight:bold;
line-height:30px;
}

.m_mt {
float:left;
width:25%;
}

.m_mt1 {
background:#2e5252;
line-height:40px;
color:#FFF;
cursor:pointer;
transition:all .2s;
width:265px;
margin:auto;
}

.m_mt1:hover {
box-shadow:inset 3px 3px 3px #1f3838; 
font-weight:bold;
font-size:20px;
}


.m_mt2 {
background:#c4a16b;
line-height:40px;
color:#FFF;
cursor:pointer;
transition:all .2s;
width:265px;
margin:auto;
}

.m_mt2:hover {
box-shadow:inset 3px 3px 3px #836334; 
font-weight:bold;
font-size:20px;
}



.layer {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:9999;}
.layer .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}
.layer .pop-layer {display:block;}	

.pop-layer {display:none; position: absolute; top: 50%; left: 50%; width: 460px; height:auto;  background-color:#fff; border: 3px solid #2e2e2e; z-index: 9999999;}	
.pop-layer .pop-container {padding: 20px 18px;}

.pop-layer p.ctxt30 {color: #666; line-height: 20px;font-weight:600;margin-bottom:20px; font-size:14px;}
.pop-layer p.ctxt20 {color: #666; line-height: 18px; font-size:12px;}

.pop-layer .btn-r {width: 100%; margin:10px 0 10px; padding-top: 10px;text-align:center;}

.btn-r a.cbtn {display:inline-block; height:25px; padding:3px 14px ;  background-color:#5A5A5A; font-size:13px; color:#fff; line-height:25px;}	
.btn-r a.cbtn:hover { background-color:#000; color:#fff;}

/*견적신청팝업*/
.layer .pop-layer2 {display:block;}
.pop-layer2 {display:none; position: absolute; top: 50%; left: 50%; width: 1200px; height:800px;  background-color:#fff;z-index: 10;    overflow-y: scroll;}
	
.pop-layer2 .pop-container2 {padding: 35px 60px;}
.pop-layer2  h1 {font-size: 40px;color: #0084c4;text-align: left; padding-bottom: 20px;}
.pop-layer2  h2 {font-size: 24px;padding-bottom: 15px;}
.pop-layer2 .txt_agree {padding-bottom: 20px;}
.pop-layer2 .txt_agree a { font-size: 15px;}
.pop-layer2 .txt1 {padding-bottom: 30px;}
.pop-layer2 .txt1 p {font-size: 18px;padding-bottom: 10px;color: #606060;}

.pop-layer2 input[type="radio"] { opacity: 0; position: absolute; width: 16px; cursor: pointer; height: 16px;}
.pop-layer2 input[type="radio"] + label {  cursor: pointer; font-size: 18px;color: #606060;}
.pop-layer2 input[type="radio"] + label span { width: 16px;margin-right: 10px; height: 16px; display: inline-block; background: url(images/radio.png) no-repeat right top;}
.pop-layer2 input[type="radio"]:checked + label span {width: 16px;height: 16px;display: inline-block;  background: url(images/radio.png) no-repeat left top;}
.pop-layer2 .call_con {margin-right: 20px;}
.pop-layer2 .btn-r2 {right: 15px;position: absolute;}
.btn-r2 a.cbtn {display:inline-block;}	

/* clearfix */
.clearfix {
	clear:both;
}


#container{
	position:relative;
	width:800px;
	margin:0 auto 25px;
	padding-bottom: 10px;
	
}
.grid{
	width:500px;
	padding: 15px;
	background:#fff;
	margin:8px;
	font-size:12px;
	float:left;
	box-shadow: 0 1px 3px rgba(34,25,25,0.4);
	-moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
	-webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
	
	-webkit-transition: top 1s ease, left 1s ease;
	-moz-transition: top 1s ease, left 1s ease;
	-o-transition: top 1s ease, left 1s ease;
	-ms-transition: top 1s ease, left 1s ease;
}

.strong {
	margin:5px 0;
	display:block;
	padding:5px;
	font-size:17px;
	text-align:center;
}
.grid .meta{
	text-align:right;
	color:#777;
	font-style:italic;
}
.grid .imgholder img{
	max-width:100%;
	display:block;
}

.m_b {
float:left; width:20%; text-align:center;
cursor:pointer;
}

.m_b:hover {
text-shadow:2px 2px 2px #aaa;
}

.mbd_img ul{
padding:0;
}

.mbd_img li{
float:left;
padding-bottom:25px;
}

.ml_10 {
padding-top:15px;
}

.bar {
text-align:center;
border:solid 1px #EEE;
background:#EEE;
color:#555;
line-height:50px;
font-weight:bold;
font-size:20px;
border-radius:10px;
box-shadow:2px 2px 2px #ddd;
}

#ln2 {
color:#bbd2ee;
line-height:50px;
font-weight:bold;
text-shadow:1px 1px 1px #000;
font-size:32px;
}

.s41 ul{
padding-top:30px;
}

.s41 li:nth-child(1) {
font-weight:bold;
}

.mzoom {
    padding: 0px;
    transition: transform .2s; /* Animation */
    margin: 0 auto;
}

.mzoom:hover {
    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.mitem {
  position: relative;
  overflow: hidden;
}

.cmp {
position:absolute; color:#FFF; padding-top:350px; margin-left:850px;
cursor:pointer;
transition:.2s;
}

.cmp:hover {
font-weight:bold;
color:#666;
font-size:20px;
text-shadow:1px 1px 1px #999;
}

.pic {
border:2px solid #fff;
box-shadow:4px 4px 4px #CCC;
}

/*======== CTAB =======*/

.ctab1, .ctab2, .ctab4, .ctab5 {
float:left;
width:49%;
text-align:center;
font-size:20px;
line-height:50px;
color:#FFF;
}


.ctab3{
float:left;
width:19.8%;
text-align:center;
font-size:18px;
line-height:50px;
color:#FFF;
}

.ct_gab {
float:left;
height:50px;
border-right:solid 1px #666;
}

.sub_menu_t {
background:#333; width:100%; height:50px;
}

.sub_menu {
display:block; width:1200px; margin:auto;
}


.ct_active {
background:#264588; 
font-weight:bold;
cursor:default;
}

.ct_unactive {
background:#333;
transition:all .2s;
cursor:pointer;
}

.ct_unactive:hover {
box-shadow:inset 4px 4px 4px #222;
font-weight:bold;
}


/*====================================================================
	Board Buttons
============================================================***/

.nw {
border:solid 2px green;padding:5px 10px; width:100px; text-align:center;
cursor:pointer;
color:green;
font-weight:bold;
}

.bl {
border:solid 2px #1e78ae;padding:5px 10px; width:100px; text-align:center;
cursor:pointer;
color:#1e78ae;
font-weight:bold;
}

.rpl {
border:solid 2px #1e78ae;padding:5px 10px; width:100px; text-align:center;
cursor:pointer;
color:#1e78ae;
font-weight:bold;
}

.del {
border:solid 2px #ff6600;padding:5px 10px; width:100px; text-align:center;
cursor:pointer;
color:#ff6600;
font-weight:bold;
}

.edt {
border:solid 2px #1e78ae;padding:5px 10px; width:100px; text-align:center;
cursor:pointer;
color:#1e78ae;
font-weight:bold;
}

.nw:hover, .bl:hover, .rpl:hover, .del:hover, .edt:hover{
text-shadow:2px 2px 2px #CCC;
box-shadow:inset 2px 2px 2px #CCC;
font-weight:bold;
}

.bd_arr {
background:#666;
padding:5px 10px;
font-weight:bold;
border-radius:10px;
}

.btn {
padding:5px 30px;
border-radius:5px;
color:#FFF;
font-weight:bold;
font-size:20px;
cursor:pointer;
border:none;
transition:all .2s;
}

.btn:hover {
box-shadow: 3px 3px 3px #999;
}

.brd_btm {
border-bottom:dashed 1px #CCC;
padding-bottom:10px;
}


/*                    HP_BOARD       START               */


#hp_board table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

#hp_board table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

#hp_board table th {
  background-color: #f8f8f8;
  border-top: 1px solid #333;
  border-bottom: 1px solid #ddd;
  padding: .35em;
  font-weight:bold;
  font-size:20px;
  letter-spacing: .1em;
  text-transform: uppercase;
   text-align: center;
}

#hp_board table tr:hover {
  background:#FAFAFA;
}

#hp_board table td {
  border-bottom: 1px solid #ddd;
  padding: .35em;
  font-size:16px;
}

#hp_board table th,
#hp_board table td {
  padding: .625em;
 }

.bd_td_tlt {width:40%;}

.bd_tlt_ct {text-align:center;}

.text-center{ text-align:center;}
.text-right{ text-align:right;}


.gab_10 {
clear:both;
padding-top:10px;
border-top:dashed 1px #ccc;
}


.gt_5 {
clear:both;
height:5px;
}


.gt_10 {
clear:both;
height:10px;
}

.gt_20 {
clear:both;
height:20px;
}

.gt_30 {
clear:both;
height:30px;
}

.gt_50 {
clear:both;
height:50px;
}

.gt_60 {
clear:both;
height:60px;
}

.gt_80 {
clear:both;
height:80px;
}

.gt_100 {
clear:both;
height:100px;
}

.gt_130 {
clear:both;
height:130px;
}

.gt_150 {
clear:both;
height:150px;
}

	.gall_brd {
		float:left; width:25%;
	}

	.gall_img_w{
	width:260px;margin:auto;'
	}
	.gall_img_h{
	height:200px;
	}

div.contain {
  text-align: center;
}

div.contain p {
	padding:10px;
}

.image {
  opacity: 0.8;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;
}

.contain:hover .image {
  opacity: 1;
}

.zoom {
    padding: 0px;
    transition: transform .2s; /* Animation */
	width:250px;
    height: 200px;
    margin: 0 auto;
}

 .zoom:hover {
}

.item {
  position: relative;
  overflow: hidden;
}