@charset "utf-8";
/* yeosi_unny 스타일시트 */

/*공통마진*/
.pt10 {padding-top:10px;}   .pb10 {padding-bottom:10px}    .mt10{margin-top:10px;}     .mb10{margin-bottom:10px;}
.pt20 {padding-top:20px;}   .pb20 {padding-bottom:20px}    .mt20{margin-top:20px;}     .mb20{margin-bottom:20px;}
.pt30 {padding-top:30px;}   .pb30 {padding-bottom:30px}    .mt30{margin-top:30px;}     .mb30{margin-bottom:30px;}
.pt40 {padding-top:40px;}   .pb40 {padding-bottom:40px}    .mt40{margin-top:40px;}     .mb40{margin-bottom:40px;}
.pt50 {padding-top:50px;}   .pb50 {padding-bottom:50px}    .mt50{margin-top:50px;}     .mb50{margin-bottom:50px;}
.pt60 {padding-top:60px;}   .pb60 {padding-bottom:60px}    .mt60{margin-top:60px;}     .mb60{margin-bottom:60px;}
.pt70 {padding-top:70px;}   .pb70 {padding-bottom:70px}    .mt70{margin-top:70px;}     .mb70{margin-bottom:70px;}
.pt80 {padding-top:80px;}   .pb80 {padding-bottom:80px}    .mt80{margin-top:80px;}     .mb80{margin-bottom:80px;}
.pt90 {padding-top:90px;}   .pb90 {padding-bottom:90px}    .mt90{margin-top:90px;}     .mb90{margin-bottom:90px;}
.pt100 {padding-top:100px;}   .pb100 {padding-bottom:100px}    .mt100{margin-top:100px;}     .mb100{margin-bottom:100px;}
 
.center { margin:0 auto; width:1100px; }
.ta { text-align:center;}
.tr { text-align:right;}
.tl { text-align:left;}

.mt5{margin-top:5px;}
.mt15{margin-top:15px;}  .mt25{margin-top:25px;}
 /* 폰트속성 */
.f9 {font-size:9px;}
.f10 {font-size:10px;}
.f11 {font-size:11px;}
.f12 {font-size:12px;}
.f13 {font-size:13px;}
.f14 {font-size:14px;}
.f15 {font-size:15px;}
.f16 {font-size:16px;}
.f17 {font-size:17px;}
.f18 {font-size:18px;}
.f20 {font-size:20px;}
.f24 {font-size:24px;}
.f30 {font-size:30px;}

.fw600 { font-weight:600;} .fw500 { font-weight:500;}
.fw400 { font-weight:400;} .fw300 { font-weight:300;}

.roboto {font-family: 'Roboto', sans-serif;}
.f_italic { font-style:italic;}
.b_t { border-top:2px solid #fa2828;} 


/*-- 블록 설정 색상 start--*/
::-moz-selection{
          background: #fa2828;
          color: #ffffff;
}
::selection{
          background: #fa2828;
          color: #ffffff;
}
/*--블록 설정 색상 end--*/





/*퀵*/
#STATICMENU { margin: 0pt; padding: 0pt;  position: absolute; left: 51% !important; width:145px; background:#fff;
margin-left:560px; top: 0px; z-index:999;}

.qb_title { background:#333; font-size:15px; text-align:center; color:#fff; padding:7px 0;}
.qb_menu { border-bottom:3px solid #333;}
.qb_menu ul li { text-align:center; border-bottom:2px dotted #ddd; font-size:15px; letter-spacing:-0.5px;}
.qb_menu ul li:last-child { border-bottom:0;}
.qb_menu ul li a { display:block; width:100%; padding:7px 0;}

.qb_link { background:url(/img/qb_webhard_bg.jpg); padding:17px 0; text-align:center;}
.qb_link img { margin-bottom:7px;}

.qb_txt { text-align:left; width:114px; margin:0 auto; overflow:hidden; font-size:15px;}
.qb_t1 { float:left; width:30%; font-weight:600 }
.qb_t2 { float:left; width:70%;}

.qb_top { background:#333; font-size:15px; text-align:center; }
.qb_top img { margin-left:5px;}
.qb_top a { color:#fff !important; padding:5px 0; width:100%; display:block;}



/*상단*/
#hd_nv_area { width:100%; border-bottom:1px solid #ddd; padding:7px 0; overflow:hidden; font-size:12px;}

.hd_fv { float:left;}
.hd_fv a { background:url(/img/hd_ico_1.jpg) no-repeat left 2px; padding-left:20px;}
.hd_nv { float:right;}
.hd_nv ul li { float:left; border-left:1px solid #666; padding:0 5px;}
.hd_nv ul li:first-child { border-left:0;}
.hd_nv ul li:last-child { padding-right:0;}

.hd_logo { float:left;  padding: 10px 0;}
.hd_tel { float:right; margin-top: 15px;}

#hd_area { width:100%; border-bottom:1px solid #ddd; padding:7px 0; overflow:hidden;}
 
#hd_mn { width:100%; border-bottom:1px solid #ddd; overflow:hidden;}
#hd_mn ul li { float:left; width:150px; text-align:center;border-left:1px solid #ddd;}
#hd_mn ul li:first-child { width:194px; border-left:0;}
#hd_mn ul li:nth-child(2) { border-left:none;}
#hd_mn ul li:last-child { border-right:1px solid #ddd;} 

#hd_mn ul li:first-child a { width:100%; display:block; background:#fa2828;}
 
/*비주얼*/
.visaul01 {background:url(/img/visual01.jpg) no-repeat center; width:100%; height:371px;}
.visaul02 {background:url(/img/visual02.jpg) no-repeat center; width:100%; height:371px;}
.visaul03 {background:url(/img/visual03.jpg) no-repeat center; width:100%; height:371px;}
.visaul04 {background:url(/img/visual04.jpg) no-repeat center; width:100%; height:371px;}
.visaul05 {background:url(/img/visual05.jpg) no-repeat center; width:100%; height:371px;}
.visaul06 {background:url(/img/visual06.jpg) no-repeat center; width:100%; height:371px;}
.visaul07 {background:url(/img/visual07.jpg) no-repeat center; width:100%; height:371px;}

#gallery_wrap ul li a { width:100%; display:block; height:auto;}


.main_cate { position:absolute; background:rgba(0, 0, 0, 0.5); z-index: 99;height:371px; width:194px;}
.main_cate ul li { }
.main_cate ul li a { padding:16px 20px;color:#fff; display:block; background:url(/img/main_cate_ar.png) no-repeat 170px 19px;} 
.main_cate ul li a:hover { background:url(/img/main_cate_ar.png) no-repeat 170px 19px; background-color:#fa2828;}

.main_cate ul li:hover .main_cate_cont { display: block; }

.main_cate_cont { position:absolute; width:261px;  margin-left: 194px; top:0;
height: 343px;  z-index: 99;  padding:28px 20px 0; background:#fff; display:none;}

.mc_t1 {     font-size: 20px;
    letter-spacing: -1px;
    margin-bottom: 15px;
    color: #222;}
    
.mc_img { margin-bottom:15px;}
.mc_t2 { font-size:14px; margin-bottom:15px;}

.mc_btn { overflow:hidden;}
.mc_btn1 { float:left; width:49%; background:#fa2828;}
.mc_btn2 { float:right; width:49%; background:#666;}
.mc_btn1 a, .mc_btn2 a { display:block; width:100%; text-align:center !important; padding:10px 0 !important; color:#fff;}



/*배너1*/
.main_bn1 { margin:15px 0 30px;overflow:hidden; }
.main_bn1 ul li { float:left; width:33%; margin-left:0.5%;}
.main_bn1 ul li a { display:block; width:100%; color:rgba(255, 255, 255, 0.7); padding: 33px; overflow:hidden;}
.main_bn1 ul li a:hover { color:#fff;}

.main_bn1 ul li:nth-child(1) { margin-left:0; background:url(/img/main_bn1.jpg) no-repeat right top;}
.main_bn1 ul li:nth-child(2) { background:url(/img/main_bn2.jpg) no-repeat right top;}
.main_bn1 ul li:nth-child(3) { background:url(/img/main_bn3.jpg) no-repeat right top;}

.mb_txt1 { float:left; font-weight:500;letter-spacing:-0.5px; font-size:25px;}
.mb_txt2 { font-size:14px; float: left;
    padding-left: 15px;}

/*최신글*/
.main_bbs_list { background:#effeff; margin-top:15px; padding:30px 0;  overflow:hidden; width:100%;}

.main_list1, .main_list2, .main_list3 { float:left; width:33%; }
.main_list2, .main_list3 {margin-left: 0.4%; border-left: 1px solid #ddd;}

.ml_title { margin-bottom: 10px; margin-left: 33px;font-size:20px; background:url(/img/la_ico.png) no-repeat left; padding-left:17px; letter-spacing:-0.5px;}
.lt li { background:url(/img/la_dot.png) no-repeat left; padding-left:15px;}


.m_pr_list {display: block; letter-spacing:-1px; font-size:27px;
      background:url(/img/la_t_bg.jpg) repeat-x 10px;      margin: 50px 0 30px 0;   }


/*최근시공사례*/
.gall_la { margin:25px 0; width:100%; background:#fff; padding:40px 0;}

#oneshot { position:relative; background:#fff; padding:10px 0;overflow:hidden;}
.lt_area { padding:0 20px; background:#fff; display: inline; }
#oneshot .la_title
{display: block; letter-spacing:-1px; font-size:27px; background:url(/img/la_t_bg.jpg) repeat-x 10px;     margin: 0 40px;}

#oneshot .img_set{width:<?php echo $imgwidth ?>px; height:<?php echo $imgheight ?>px; background:#fff;padding:0;}
#oneshot .subject_set{width:<?php echo $imgwidth - 13 ?>px; height:38px; padding:5px 10px 10px 3px; z-index:1; bottom:0; left:0;}
#oneshot .subject_set .sub_title{display:block;font-size:1.167em;padding:15px 10px 8px;font-weight:bold;text-overflow: ellipsis;  overflow: hidden;  white-space: nowrap;}
#oneshot .subject_set .sub_content{color:#8c8a8a;height:30px;overflow:hidden;padding:3px 0 0;font-family:NanumGothic,dotum;}

#oneshot ul {list-style:none;clear:both;margin-top:10px;padding:0;}
#oneshot li{float:left;list-style:none;text-decoration:none;}

.bx_la { margin:30px 40px 0;}
.bx_la .bx-pager { display:none;}
.bx_la .bx-wrapper { margin:0 auto;}
.bx_la .bx-wrapper .bx-prev { left:-45px;}
.bx_la .bx-wrapper .bx-next { right:-45px;}


/*주문가이드*/
.main_guide { margin:40px 0;}
.mg_t1 { color:#666;letter-spacing:-0.5px; font-size:19px;}
.mg_t2 { font-size:30px; letter-spacing:-1px; margin-top:3px;}
.mg_box { overflow:hidden;}
.mg_box ul li { float:left; width:24.09%; margin-left:1.2%; height:230px;}

.mg_box ul li:nth-child(1) { background:url(/img/mg_ico1.png) no-repeat 35px 80px; background-color:#f6ffdc; margin-left:0;}
.mg_box ul li:nth-child(2) {background:url(/img/mg_ico3.png) no-repeat 28px 82px; background-color:#fff4d7;}
.mg_box ul li:nth-child(3) {background:url(/img/mg_ico2.png) no-repeat 28px 80px; background-color:#e9f7ff;}
.mg_box ul li:nth-child(4) {background:url(/img/mg_ico4.png) no-repeat 25px 80px; background-color:#faedff;}



.mg_step { margin:40px 0 20px; text-align:center;} 
.mg_txt { margin:0 35px 0 102px;}

.mg_title { margin-bottom:40px;}

.mg_box ul li:nth-child(1) .mg_txt1 { color:#415605;}
.mg_box ul li:nth-child(2) .mg_txt1 { color:#664a00;}
.mg_box ul li:nth-child(3) .mg_txt1 { color:#073f5f;}
.mg_box ul li:nth-child(4) .mg_txt1 { color:#5b2d6d;}

.mg_txt1 { font-weight:500; margin-bottom:5px; font-size: 19px; letter-spacing: -0.5px;margin-bottom:10px;}
.mg_txt2 { font-size:15px;}



/*샘플이미지보러가기*/
.main_sam { width:100%; background:url(/img/sample_bg.jpg) no-repeat center; 
            background-color:#e1e1e1;margin:0 0 40px; padding-bottom:30px; transition: all 0.5s ease;
     -webkit-transition: all 0.3s ease;}
.main_sam:hover { background-size:105%;  }

.sam_txt { font-size:35px; letter-spacing:-1.5px;}
.sam_txt img { padding:40px 0 3px;}

.sam_btn { width:185px; background:#b3b3b3; margin:20px 0 0;}
.sam_btn a { color:#fff; display:block; width:80%; margin:0 auto; padding:10px 0; letter-spacing:-0.5px;
          background:url(/img/sample_ar.png) no-repeat right;}
.sam_btn:hover {background:#127e90;}


/*고객센터박스*/
.cs_box { overflow:hidden; border:1px solid #ddd; margin:0 0 40px 0;}
.cs_box ul li { float:left; width:33.2%;}
.cs_box ul li:first-child { border:0;}
.cs_box ul li:first-child .cb_area { border-left:0;}
.cb_area { margin:30px 0; padding:0 30px; border-left:1px solid #ddd; height:162px;}

.sns_box { overflow:hidden; }
.sns_box ul li { width:49.5%; background:#f5f5f5; border:none; height:53px; margin-bottom:0.5%;}
.sns_box ul li:first-child { margin-right:0.5%;}
.sns_box ul li a { padding:15px 0 15px 15px;  display:block;}
.sns_box ul li img { margin-right:15px;}

.sns_box2 { overflow:hidden; background:#f5f5f5; height:53px; text-align:center;}
.sns_box2 a { width:100%; padding-top:10px; display:block;}
.sns_box2 img { margin-right:11px;}

.cb_title {font-size:20px; font-weight:600; letter-spacing:-0.5px; margin-bottom:15px;}
.cb_txt { /*padding:5px 0; border-bottom:2px dotted #ddd;*/  font-size: 17px;}
.cb_txt img { margin-right:15px;}
.cb_txt2 { margin-top:10px; font-size:15px;}

.cs_tel { background:#077187; color:#fff;    padding: 5px 0; margin:7px 0;
    text-align: center;
    font-size: 17.5px;}
.cs_info { font-size:15px;}


/*하단*/
#tail { width:100%; padding:70px 0; background:#f5f5f5; overflow:hidden;} 

.tail_logo { float:left;}
.tail_c_area { float:left; font-size:14px;  line-height:165%; margin-left:50px;}

.tail_nv { overflow:hidden;}
.tail_nv ul li {float:left; }
.tail_nv ul li a {border-left:1px solid #666; display:block; padding: 0 10px;}
.tail_nv ul li:first-child a { border-left:0; padding-left:0;}

.tail_copy { margin-top:15px;}
.tail_link { float:right;}
.tail_dotted { border-top:1px dotted #ddd;width:100%;height:5px; }

.tail_copy ul li { border-bottom:1px dotted #ddd; width:100%; padding-bottom:5px; margin-bottom:5px;}
.tail_copy ul li:last-child { border-bottom:0; padding-bottom:0; margin-bottom:0;}

/*서브 마우스오버 카테고리*/
#hd_mn ul li:first-child:hover .sub_cate { display:block;}
.sub_cate {  position: absolute; display:none; z-index: 99; }
.sub_cate ul li { width:194px !important; float:none !important;
            border-left:0 !important; border-right:0 !important; border-bottom:1px solid #888;}
.sub_cate ul li a { width:100% ; display:block;  color:#fff;
                    background:rgba(103, 103, 103, 0.93) !important; padding:15px 0;}
.sub_cate ul li a:hover { color:#ffe72e  !important;}




@media screen and (max-width: 1200px) {

#STATICMENU {display:none;}

}