/* 메인화면 */
#wrap {min-width:1200px;}

/*header*/
header {width:100%;height:122px;background-color:#fff;border-top:6px solid #000;border-bottom:1px solid #ccc;}

.headerT {height:45px;width:1200px; margin:0 auto;}
.headerT a{color:#000;}
.headerT a:hover{color:#fc6114;}
.headerT ul {padding-top: 15px;}
.headerT ul li {display: inline; border-left: 1px solid #ccc; font-weight: 800;padding: 0 10px;}
.headerT ul li:first-child {border-left: none;}
.headerT ul li:last-child {padding-right:0;}

.headerLine {wide:100%;height:1px;background-color:#ccc;}
.headerB {height:76px;width:1200px; margin:0 auto;}
.headerB a{color:#000;}
.headerB a:hover{color:#fc6114;}

.gnbL {float:left;}
.gnbR {float:right;}

#gnb {margin-top:30px; }
#gnb > li { float:left; width:auto; margin-left:70px; font-weight:400; font-size:18px;font-family: 'Noto Sans KR', sans-serif; color:#666; font-weight:700;}
#gnb > li:first-child { margin-left:0; }

/*layout*/
#wrap > article { width:1200px; margin:0 auto; overflow:hidden; }
#wrap > article.wide { width:100%;}
#wrap > article.service { width:100%; margin-top:110px;}


/*menu popup*/
.menupopup {width: 100%;}
.menupopupInner {width:1000px;margin:auto;display:none; z-index:100;}
.pop-menu-table {position: absolute;z-index: 1000; display: inline-block; background-color: rgba(255, 255, 255, 1.0); border: 1px solid #ffffff;width:1000px;}
.pop-menu-table td {vertical-align:baseline;border: 1px solid #d4d4d4;}
/*dt {height: 25px;border-bottom: 1px solid rgba(0, 0, 0, 0.1);padding-top: 10px;padding-left: 40px;font-size: 15px;color: #000000;font-family: 'Noto Sans KR', sans-serif;       font-weight: 600;background-color:#e5e5e5;border: 1px solid #d4d4d4;}*/
dt {height: 25px;border-bottom: 1px solid rgba(0, 0, 0, 0.1);padding-top: 10px;font-size: 15px;color: #000000;font-family: 'Noto Sans KR', sans-serif; font-weight: 600;background-color:#e5e5e5;border: #d4d4d4;vertical-align:middle;text-align:center;}
dd:last-child { margin-bottom: 5px;}
.menu-dd {width: 30px;padding-top: 10px;margin-left: 50px;border-top: 1px solid #000000;display:none;}
.select-area {padding-top: 3px;padding-bottom: 6px;     padding-left: 10px;     margin-left: 10px;      margin-right: 10px;     font-size: 13px;color: #000000; font-weight:600;}
.select-area:hover {color: #ffffff;     background-color:#666666;}

/* mainVisual slide */
/*#mainVisual { width:100%; height:450px;transition:all .3s; position:relative;}
.visual { width:100%; }
.visual li { height:450px; overflow:hidden; position:relative;  }
.visual li > div { width:100%; height:100%; text-indent:-9999px;}
.visual li.vs1 > div { background:url(../img/mainVisual_01.jpg) no-repeat center center;  animation:vsImg 3s ease-in-out; }
.visual li.vs2 > div { background:url(../img/mainVisual_02.jpg) no-repeat center center;  animation:vsImg 3s ease-in-out; }
.visual li.vs3 > div { background:url(../img/mainVisual_03.jpg) no-repeat center center;  animation:vsImg 3s ease-in-out; }
.visual li.vs4 > div { background:url(../img/mainVisual_04.jpg) no-repeat center center;  animation:vsImg 3s ease-in-out; }

#mainVisual .bx-controls-direction {position:absolute;z-index:99;top:200px;width: 1400px;left: 50%;margin-left: -700px; }
#mainVisual .bx-controls-direction a { position:absolute; width:67px; height:67px; display:block; cursor:pointer; text-indent:-9999px; box-sizing:border-box;border-radius:50%; }
#mainVisual .bx-prev { left:0; margin-left:0; background: url(../img/btn_prev.png) no-repeat center center; }
#mainVisual .bx-next { right:0; margin-right:0;  background: url(../img/btn_next.png) no-repeat center center; }
*/
/* BEST PRODUCT */
.best {width:1200px; margin:0 auto; position:relative; overflow:hidden;margin-top:70px; }
.gallery img {width: 100%;height: auto;}
.gallery a { display:block; width:100%; height:100%; overflow:hidden; position:relative; box-sizing:border-box; text-align:center;}
.galleryTxt {text-align: center;font-size: 15px;color: #656565;font-weight:bold;margin-top: 15px;}

.hover { opacity:0; position:absolute; width:100%; height:100%; top:0; left:0; background: rgba(0,0,0,.4) url(../img/icon_hover.png) no-repeat center center;  transition:all .3s; transform:scale(.8, .8); }

.gallery:hover .hover { opacity:1; transform:scale(1, 1); } 
.gallery:hover .galleryTxt {color:#fc6114;}

.bestTit {float:left;background-color:#ececec;width:195px;height:175px;font-size:13px;color:#676766;padding: 25px 0 0 15px;font-weight: bold;margin-right:5px;}
.bestTit p{font-weight:400;font-size: 24px;font-family: 'Noto Sans KR', sans-serif;color:#000;line-height: 1.1;letter-spacing: -1.5px;margin-bottom: 5px;}
.bestTit p span {font-weight:700;}
.bestTit img {margin:50px 0 0 70px;}
.bestCont {padding: 0 5px;float: left; width: 320px; height:290px;}

.pr0 {padding-right:0;}


/* RECOMMEND PRODUCT */
.recommend {width:1200px; margin:0 auto; position:relative; overflow:hidden;padding-top:70px; border-top:1px solid #ccc;}


/* 후가공 */
.afterM {width:1200px; margin:0 auto; position:relative; overflow:hidden;padding-top:45px; border-top:1px solid #ccc;}
.afterTit {font-weight:700;font-size: 20px;color:#000;}
.afterTit span {color:#676766;font-size:13px;padding-left:20px;font-weight:400px;}

.afterCont {float: left; width: 198px; height:185px;border-top:1px solid #cbcbcb;border-left:1px solid #cbcbcb;border-bottom:1px solid #cbcbcb;margin:10px 0;}
.afterContLast {float: left; width: 198px; height:185px;border:1px solid #cbcbcb;margin:10px 0;}
.aftergallery img {width: 100%;height: auto;}
.aftergallery span { display:block; width:100%; height:100%; overflow:hidden; position:relative; box-sizing:border-box; }

.afterhover { opacity:0; position:absolute; width:100%; height:100%; top:0; left:0; background: rgba(255,255,255,.4) url("../img/pd_hover_w.png") repeat;  transition:all .3s; transform:scale(.8, .8); }
.aftergallery:hover .afterhover { opacity:1; transform:scale(1, 1); } 


/* SERVICE */
.service {width:100%; position:relative; background:#eee; overflow:hidden;margin-top:65px; padding-top:55px;}
.serviceTit {font-weight:700;font-size: 24px;color:#676766;text-align:center;}
.serviceTit span {color:#000;padding-left:10px;}

.serviceList {width:1200px;height: 180px;margin: auto;margin-top: 50px;}
.serviceList li {width: 199px;height:122px;overflow:hidden;position:relative;border-right:1px solid #ccc;text-align:center;}
.serviceList li span { position: absolute;top: 0;left: 50px;height: 100px;width: 100px;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;  animation-iteration-count: infinite;  -webkit-animation-iteration-count: infinite;}
.serviceList li span:hover {-webkit-animation: swing 1s ease;animation: swing 1s ease;-webkit-animation-iteration-count: 1; animation-iteration-count: 1;}
.serviceList li:last-child {border-right:0;}
.serviceTxt {display: block; font-size: 15px; font-weight: bold; color: #666;margin-top:90px;}
.serviceTxt:hover {color:#fc6114;}

/*CUSTOMER*/
.cs {width:1200px; margin:0 auto; position:relative; overflow:hidden;margin-top:55px; }
.csTit {font-family: 'Noto Sans KR', sans-serif;font-size:24px; color:#666;font-weight:500; border-bottom:1px solid #efefef;padding-bottom:15px;}
.csTitN {font-family: 'Noto Sans KR', sans-serif;font-size:22px; color:#666;font-weight:700; border-bottom:1px solid #efefef;padding-bottom:15px;}
.csTitN span{float:right;}
.csContsCall {font-family: 'Noto Sans KR', sans-serif;font-size:38px; color:rgb(229,142,75); font-weight:700;padding:25px 0;}
.csContsTxt {font-size:14px; color:#666;margin-bottom:25px;}
.csNList {margin-top:15px;width:365px;}
.csNList li {padding:4px 0;color:#666;}
.gnbM {margin-left:120px;float:left;}
.csTitM {font-family: 'Noto Sans KR', sans-serif;font-size:20px; color:#666;font-weight:400; border-bottom:1px solid #efefef;padding-bottom:15px;}

/* SELF DESIGN LIST 2020-12-30 */
.selfList {width:1088px; margin:0 auto; position:relative; overflow:hidden;margin-top:40px; }
.selcat {display:inline-block;width:100%;height:36px;border-bottom: 2px solid #ff4e00;}
.selcat li {display:inline-block;width:125px;text-align: center;padding: 9px 0;background-color: #f9f9f9;}
.selcat li.active {background-color:#ff4e00;}
.selcat li span {font-size:13px;font-weight: bold;letter-spacing: -0.5px;}
.selcat li span.active {color:#fff;}

/*업종 수정 2021-01-06 Start*/
.seltype {display: inline-block;margin-top: 30px;}
.seltypeL {float: left;width: 125px;text-align: center;padding-right: 30px;}
.seltypeL span{font-size: 16px;margin-bottom: 10px;display: block;}
.seltypeR {float: left;padding-left: 30px;width:900px;border-left: 1px solid #ccc;}
.seltypeR li {display:inline-block;width:175px;margin-bottom:13px;}
.seltypeR ul.sb {margin-top: 10px;display: inline-block;}
.seltypeR label {color: #666;font-size: 13px;vertical-align: top;}


.searchbox {margin-top:30px;border-top: 1px solid #878787;border-bottom: 1px solid #878787;height:48px;}
.searchCat {float:left;border-left: 1px solid #878787;}
.searchCat select {width: 180px;height:48px;padding: 1em;font-family: inherit;background: url('../img/arrow.jpg') no-repeat 95% 50%;border-radius: 0px;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
.searchCat select::-ms-expand {display: none;}
.searchTxt {float:left;}
.searchTxt input {border:0;width:500px;height:40px;padding-left:20px;}
.searchBtn {float:right;}


/*사이즈 수정 2021-01-06 Start*/
.sizebox {display: inline-block;margin-top: 30px;}
.sizeL {float: left;width: 125px;text-align: center;font-size: 16px;margin-bottom: 10px;margin-top:15px;font-weight:bold;}
.sizeR {float: left;padding-left: 30px;width:930px;border-left: 1px solid #ccc;height: 150px;overflow: auto;}
.sizeR .btn {font-family: 'Noto Sans KR', sans-serif;display:block;width:150px;height: 25px;line-height: 25px;border: 0;margin: 10px auto;border-radius: 25px;background-color: #f4f4f4;text-align:center;cursor: pointer;color: #101010;transition:all 0.9s, color 0.3s;font-size: 14px;}
.sizeR .btn:hover{background-color:#19b0c7;color:#fff;}
.sizeR .btn:focus {border: none; outline:none;}
.sizeR .active {background-color:#19b0c7;color:#fff;}
.sizeR li {display:inline-block;width:230px;}


.slistCont {margin-top:35px;width:100%;display:block;justify-content:center;}
.slistCont_inner {width:1088px;}
.slistCont_inner > ul {width:100%;margin:0 auto; overflow:hidden;}
.slistCont_inner > ul > li {list-style:none;float:left;width: 254px;height:375px;margin-left: 9px;margin-right: 9px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.slistCont_inner dt {width: 253px;margin-bottom:10px;height: 273px;background-color: #f4f4f4;padding: 0;border: 1px solid #ececec;}
.slistCont_inner dt:hover {border-color:#ff6600;}

.slistCont_inner .snip1384 {position: relative;height:273px;width:254px;}
.slistCont_inner .snip1384 img {position:absolute;max-width:226px;max-height:246px;width:auto;height:auto;margin:auto;top:0; bottom:0; left:0; right:0; box-shadow: 3px 3px 9px 0 rgba(0,0,0,0.2),0 1px 1px 0 rgba(0,0,0,0.19) !important;}

.slistCont_inner dd {line-height:25px;color: #424242;letter-spacing:-1px;font-size:16px;text-align:center;}
.slistCont_inner dd span{color:#0057ff;}
.slistCont_inner .cont_bottom {margin-top:7px;}
.slistCont_inner .cont_bottom_txt {float:left;font-size:13px;padding-right:10px;}
.slistCont_inner .cont_bottom_btn {float:left;padding:0 2px;}


/*POPUP 2021-01-03*/
/*4_확대보기*/
#wrapPop {width:100%;}
.PopupTop {margin:10px; height:41px;}
.PopupTop .TL {float:left; width:9px;}
.PopupTop .TT {float:left;width: 752px;height: 31px;background: url('../img/popupTopbg.jpg') repeat;font-size: 16px;color: #fff;padding-top: 10px;padding-left: 10px;}
.PopupTop .TX {float:left; width:21px;background: url('../img/popupTopbg.jpg') repeat;height:31px;padding-top:10px;}
.PopupTop .TR {float:left; width:9px;}

.PopupConts {width:800px;height:520px; margin-left:10px; }
.PopupConts .PopupConts_inner {position: relative;width:800px;height:520px;}
.PopupConts .PopupConts_inner img {position:absolute;max-width:800px;max-height: 520px;width:auto;height:auto;margin:auto;top:0;bottom:0;left:0;right:0;}

.PopupBtn {width:800px;margin-left: 10px;margin-top: 10px;}
.PopupBtn .PopupBtn_inner {margin:0 auto;width: 88px;height: 20px;}
.PopupBtn .PopupBtn_inner .P_bottom_btn {float:left;padding:0 2px;margin: 0 auto;}


/*5_선택화면*/
.PopupTop .TT5 {float:left;width: 621px;height: 31px;background: url('../img/popupTopbg.jpg') repeat;font-size: 16px;color: #fff;padding-top: 10px;padding-left: 10px;}
.PopupConts_p5 {width:500px;height:100px; margin-left:50px; padding:30px;}
.p5_txt {width:140px; font-size:14px;padding-top:20px;}
.p5_txt span {padding-left:10px;}
.selectCat {float:left;border: 1px solid #d3d3d3;margin-top:10px;}
.selectCat select {width: 337px;height:40px;font-family: inherit;background: url('../img/arrow.jpg') no-repeat 95% 50%;border-radius: 0px;-webkit-appearance: none;-moz-appearance: none;appearance: none; color:#666;}
.selectCat select::-ms-expand {display: none;}

.PopupBtn_p5 {width: 150px;margin-left: 280px;margin-top: 20px;}

/*8_주문명*/
.PopupTop .TT8 {float:left;width: 580px;height: 31px;background: url('../img/popupTopbg.jpg') repeat;font-size: 16px;color: #fff;padding-top: 10px;padding-left: 10px;}
.PopupConts_p8 {width:500px;height:70px; margin-left:50px; padding:30px;}
.PopupConts_p8 input {border:1px solid #d3d3d3;width:330px;height:35px;padding-left:20px;}
.p8_txt {width:120px; font-size:15px;padding-top:13px;}
.p8_txt span {padding-left:10px;}
.PopupBtn_p8 {width: 150px;margin-left: 250px;}
.PopupBtn_p8 img {padding-left:5px;}

/*file upload*/
.PopupTop .TT_fu {float:left;width: 600px;height: 31px;background: url('../img/popupTopbg.jpg') repeat;font-size: 16px;color: #fff;padding-top: 10px;padding-left: 10px;}
.PopupConts_fileupload {width:647px;height:340px; margin-left:10px; }
.fuTit {font-size:15px;padding:5px 0;font-weight:bold;}
.fuBox {width:647px;height:230px;border-top:2px solid #949494;border-left:1px solid #d3d3d3;border-right:1px solid #d3d3d3;border-bottom:1px solid #d3d3d3;}
.fuBox_in {width:240px; height:50px; margin:80px 220px}
.fuBox_in img {vertical-align:middle;}
.fuBox_in span {margin-left:10px;}
.fuInput {width:650px;height:50px;margin-top:5px;}
.fuInput_txt {width:120px; font-size:15px;padding-top:13px;}
.fuInput_txt span {padding-left:10px;}
.fuInput input {border:1px solid #d3d3d3;width:503px;height:35px;padding-left:20px;}


/* footer */
footer {width:100%;overflow:hidden; margin-top:50px; }
footer > article {width:1200px;margin:auto;height:170px;}
.f_bar {width:100%; border-top:1px solid #ccc; border-bottom:1px solid #ccc; height:60px;}
.f_bar_inner {width:1200px;margin:auto;}
.f_menu {float:left;}
.f_menu ul {padding-top: 20px;}
.f_menu ul li {display: inline; border-left: 1px solid #ccc; font-weight: 600;padding: 0 20px; }
.f_menu ul li:first-child {border-left: none;}
.f_menu ul li:last-child {padding-right:0;}
.f_icon {float:left;margin-left:600px;padding-top: 15px;}
.f_icon img {padding:3px;}
.f_famaily {float:left;border-left: 1px solid #ccc;border-right: 1px solid #ccc; margin-left:25px;}

.dropbtn {background-color: #fff;color: #666;padding: 16px;font-size: 14px;border: none;cursor: pointer;width: 180px;height: 60px;}
.dropdown {position: relative;display: inline-block;}
.dropdown-content {display: none;position: absolute;background-color: #fff;min-width: 180px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;}
.dropdown-content a {padding: 12px 16px;text-decoration: none;display: block;}
.dropdown-content a:hover {background-color: #fff}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #efefef;}

.footerCompany {padding-top:25px;padding-bottom: 15px;}
.footerCompanyTxt {font-size: 13px;font-weight: 600;color: #666;}
.footerinfo {color: #666;}
.footerinfo span {margin-right: 20px;}


/*animation*/
/*--mainVisual*/
@keyframes vsImg {
	0% { transform:scale(1.15,1.15); }
	100% {transform:scale(1,1); }
}

/*--service-icon*/
@-webkit-keyframes swing {
    15% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }
    30% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    50% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
    65% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
    80% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes swing {
    15% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }
    30% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    50% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
    65% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
    80% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}