@charset "utf-8";

/* ==================================== 디자인 샘플 */
#mkDesignWrap{position:relative}
#mkDesignWrap .top_area{position:relative;z-index:1;padding:110px 0;margin-bottom:40px;text-align:center;color:#777;line-height:1.65;background:#f2f2f2}
#mkDesignWrap .top_area .tit{width:100%;max-width:var(--mainsize);margin:0 auto;font-size:19px;background:#f2f2f2}
#mkDesignWrap .top_area .tit span{font-size:21px;font-weight:600;color:var(--primary)}
#mkDesignWrap .top_area .tit p{margin-top:15px;font-size:40px;font-weight:700;line-height:1.3;white-space:pre-line;color:#111}
#mkDesignWrap .top_area .tit div{margin-top:30px;white-space:pre-line}
#mkDesignWrap .top_area .tit div b{font-weight:600;color:#111}
#mkDesignWrap .type_btn{display:flex;justify-content:center;gap:20px;margin-bottom:60px}
#mkDesignWrap .type_btn a{width:140px;height:55px;border-radius:30px;font-size:18px;font-weight:600;line-height:55px;color:#aaa;text-align:center;background:#f2f2f2;transition:all .2s}
#mkDesignWrap .type_btn a.on{color:#fff;background:var(--primary)}

/* ==================================== 디자인 리스트 */
#mkDesignList{max-width:var(--mainsize);margin:0 auto}
#mkDesignList ul{display:grid;grid-template-columns:repeat(3, 1fr);column-gap:40px;row-gap:30px}
#mkDesignList ul li{overflow:hidden;position:relative;border-radius:12px;border:1px solid #e1e1e1}
#mkDesignList ul li a{font-size:15px;font-weight:500;color:#999}
#mkDesignList ul li .img{overflow:hidden;display:block;position:relative;height:320px}
#mkDesignList ul li .img .mask{opacity:0;display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background:rgba(0,0,0,.5);transition:all .25s} 
#mkDesignList ul li .img span{display:block;position:absolute;left:12px;top:12px;z-index:1;height:30px;padding:0 20px;border-radius:20px;font-size:14px;font-weight:600;color:#fff;line-height:30px;background:rgba(0,0,0,.5)}
#mkDesignList ul li .img svg{width:15px;height:15px;color:#fff;transition:all .15s}
#mkDesignList ul li .img img{position:relative;width:100%;height:100%;object-fit:cover;object-position:top;transition:object-position 4s cubic-bezier(0.5, 1, 0.89, 1)}
#mkDesignList ul li .btns{display:flex;gap:6px;align-items:center;margin:20px 0 15px;padding:0 20px}
#mkDesignList ul li .btns a, #mkDesignList ul li .btns button{display:flex;align-items:center;justify-content:center;width:calc(100% / 3);height:45px;border-radius:4px;font-size:15px;font-weight:500;letter-spacing:-.5px}
#mkDesignList ul li .btns .bd_btn{border:1px solid #e1e1e1}
#mkDesignList ul li .btns .bg_btn{color:#fff;background:#aaa}
#mkDesignList ul li .info{display:block;padding:0 20px 20px;line-height:1.6}
#mkDesignList ul li .info .code{font-size:19px;font-weight:700;color:#111}
#mkDesignList ul li .info .price{display:flex;align-items:center;margin-top:8px}
#mkDesignList ul li .info .price span{margin-left:auto;font-weight:600;color:#aaa;text-decoration:line-through}
#mkDesignList ul li .info .price p{margin-left:5px;font-size:20px;font-weight:700;color:#111}
#mkDesignList ul.grid{row-gap:unset;grid-auto-rows:10px}
#mkDesignList ul.grid li{width:auto;margin-bottom:0}
#mkDesignList ul.grid li+li{margin-left:0}
#mkDesignList ul.grid li .img{height:auto}
@media(hover:hover){
#shDesignList ul li:hover .img .mask{opacity:1}
#shDesignList ul li:hover .img svg{width:30px;height:30px}
}
@media(max-width:1400px){
#mkDesignWrap .top_area{padding:70px 15px}
#mkDesignWrap .top_area .tit{font-size:17px}
#mkDesignWrap .top_area .tit span{font-size:18px}
#mkDesignWrap .top_area .tit p{font-size:35px}
#mkDesignList ul{padding:0 15px}	
}
@media(max-width:1200px){
#mkDesignList ul li .img{height:240px}
#mkDesignList ul li .btns{flex-wrap:wrap}
#mkDesignList ul li .btns .bd_btn{width:100%}
#mkDesignList ul li .btns .bg_btn{order:-1;width:calc(50% - 3px)}
}
@media(max-width:1024px){
#mkDesignList ul{grid-template-columns:repeat(3, 1fr);column-gap:20px;row-gap:20px}	
#mkDesignList ul li .btns{margin:15px 0;padding:0 15px}
#mkDesignList ul li .btns a, #mkDesignList ul li .btns button{font-size:14px}
#mkDesignList ul li .info{padding:0 15px 15px}
#mkDesignList ul li .info .code{font-size:18px}
#mkDesignList ul li .info .price p{font-size:18px}
}
@media(max-width:768px){
#mkDesignWrap .top_area{padding:50px 15px}
#mkDesignWrap .top_area .tit{font-size:14px}
#mkDesignWrap .top_area .tit p{margin-top:5px;font-size:30px}
#mkDesignWrap .top_area .tit div{white-space:normal;word-break:keep-all}
#mkDesignList ul{grid-template-columns:repeat(2, 1fr);gap:12px}	
#mkDesignList ul li .img{height:220px}
#mkDesignList ul li .info{padding:0 12px 12px}
#mkDesignList ul li .btns{padding:0 12px}
}
@media(max-width:480px){
#mkDesignWrap .top_area .tit span{font-size:15px}
#mkDesignWrap .top_area .tit p{font-size:25px}
#mkDesignWrap .top_area .tit div{margin-top:15px}
#mkDesignWrap .type_btn{gap:10px;margin-bottom:40px;padding:0 15px}
#mkDesignWrap .type_btn a{width:110px;height:50px;font-size:16px;line-height:50px}
#mkDesignList ul li a{font-size:13px}
#mkDesignList ul li .img{height:200px}
#mkDesignList ul li .img span{top:8px;left:8px;height:24px;padding:0 10px;font-size:11px;line-height:25px}
#mkDesignList ul li .info .code{font-size:14px;word-break:keep-all}
#mkDesignList ul li .info .price{flex-wrap:wrap;justify-content:flex-end}
#mkDesignList ul li .info .price p{font-size:15px;letter-spacing:-.5px}
#mkDesignList ul li .btns{gap:4px}
#mkDesignList ul li .btns a, #mkDesignList ul li .btns button{height:35px;font-size:13px;letter-spacing:-.5px}
}
@media(max-width:420px){
#mkDesignList ul{grid-template-columns:repeat(1, 1fr)}	
#mkDesignList ul li .img{height:180px}
}

/* ==================================== 로딩 */
.searching{display:none;width:100%;padding:160px 0;font-weight:600;font-size:16px;line-height:1.6;text-align:center;color:#333}
.searching .loader{position:relative;margin:0px auto 20px;width:65px;height:65px}
.searching .loader:before{content:'';display:block;padding-top:100%}
.searching .circular-loader{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}
.searching .loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;stroke-linecap:round}
@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}100%{stroke-dasharray:89,200;stroke-dashoffset:-124}}
@keyframes color{0%{stroke:var(--primary)}40%{stroke:var(--primary)}66%{stroke:var(--primary)}80%, 90%{stroke:var(--primary)}}
@media(max-width:768px){
.searching{padding:50px 0;font-size:14px}
}

/* ==================================== 디자인 뷰 */
#designView{padding-top:40px;font-size:15px;font-weight:500;line-height:1.65;color:#777;font-family:'Pretendard'}
#designView .design_info{display:flex;max-width:var(--mainsize);margin:0 auto}
#designView .design_info .left{width:64%}
#designView .dsi_thum{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:500px;border-radius:12px;background:var(--pale-b)}
#designView .dsi_thum .frm_txt{width:100%;text-align:center}
#designView .dsi_thum .frame{position:relative;cursor:url(/sh_design/img/scroll.png), auto;overflow-y:scroll;width:85%;height:80%;border-radius:12px}
#designView .dsi_thum .frame::-webkit-scrollbar{width:8px}
#designView .dsi_thum .frame::-webkit-scrollbar-thumb{border-radius:5px;background-color:#aaa}
#designView .dsi_thum .frame::-webkit-scrollbar-track{border-radius:5px;background-color:var(--pale-b)}
#designView .dsi_thum .frame .inner{padding-right:10px}
#designView .dsi_thum img{width:100%}
#designView .dsi_thum .thum_area{display:none}
#designView .dsi_detail{width:36%;padding:35px 0 0 60px}
#designView .dsi_detail .code{display:flex;justify-content:space-between;margin-bottom:25px;font-size:25px;font-weight:700;color:#111}
#designView .dsi_detail .code button{font-size:13px;font-weight:700;color:#999;line-height:1}
#designView .dsi_detail .code button svg{vertical-align:-2px;width:14px;height:14px;margin-left:3px}
#designView .dsi_detail .tabs .tabs{display:flex;border-bottom:2px solid var(--dark)}
#designView .dsi_detail .tabs .tabs label{cursor:pointer;width:98px;height:45px;border:1px solid #e5e5e5;border-radius:4px 0 0 0;border-bottom:none;font-size:15px;font-weight:600;color:#111;line-height:44px;text-align:center;background:#e5e5e5}
#designView .dsi_detail .tabs .tabs label.one{border-radius:4px 4px 0 0}
#designView .dsi_detail .tabs .tabs label~label{border-left:none;border-radius:0 4px 0 0}
#designView .dsi_detail .tabs .tabs input[type=radio]{display:none}
#designView .dsi_detail .tabs .tabs input[type=radio]:checked + label{border-color:var(--dark);color:#fff;background:var(--dark)}
#designView .dsi_detail .tabs .price{padding:30px 0 25px;border-bottom:1px solid #e1e1e1}
#designView .dsi_detail .tabs .price > span{font-size:16px;font-weight:600;color:#999}
#designView .dsi_detail .tabs .price > span u{text-decoration:line-through}
#designView .dsi_detail .tabs .price div{display:flex;align-items:center;font-size:24px;font-weight:800;color:#111}
#designView .dsi_detail .tabs .price div b{font-weight:800}
#designView .dsi_detail .tabs .price div span{margin-right:8px;color:var(--primary)}
#designView .dsi_detail .tabs .price div span i{font-size:16px;font-style:normal}
#designView .dsi_detail .tabs .price div span img{width:16px;margin-left:4px}
#designView .dsi_detail .tabs .price div button{height:29px;padding:0 12px;margin-left:auto;border-radius:4px;border:1px solid var(--primary45);font-size:13px;font-weight:600;color:var(--primary);transition:all .25s}
#designView .res_no{display:none;padding:35px 0;border-bottom:1px solid #e1e1e1;font-size:14px;font-weight:500;color:#999;line-height:1.6;text-align:center;word-break:keep-all}
#designView .res_no button{border:none;background:none;font-weight:600;text-decoration:underline;color:#111;vertical-align:baseline}
#designView .res_no p{margin-bottom:5px;font-size:15px;font-weight:600;color:#111}
#designView .res_no p img{vertical-align:bottom;width:26px;margin-right:6px}
#designView .dsi_detail .option{padding:35px 0;border-bottom:1px solid #e1e1e1}
#designView .dsi_detail .option .help{display:inline-block;vertical-align:1px;width:13px;height:13px;margin-left:3px;border-radius:50%;border:1px solid var(--primary);font-size:10px;text-align:center;line-height:11px;color:var(--primary);transition:all .25s}
#designView .dsi_detail .option .hl{font-weight:600;color:#111;font-style:normal;background:#fffec6}
#designView .dsi_detail .option > dl{display:flex;align-items:baseline;font-size:14px;color:#999}
#designView .dsi_detail .option > dl a{color:#999}
#designView .dsi_detail .option > dl+dl{margin-top:10px}
#designView .dsi_detail .option > dl.st{color:#111}
#designView .dsi_detail .option > dl.st a{color:#111} 
#designView .dsi_detail .option > dl > dt{flex-shrink:0;position:relative;width:115px;font-weight:600}
#designView .dsi_detail .option > dl > dd.func{line-height:1.4}
#designView .dsi_detail .btns{display:flex;flex-wrap:wrap;padding-top:40px}
#designView .dsi_detail .btns button{width:100%;border-radius:4px;height:60px;margin-bottom:25px;font-size:16px;font-weight:600;color:#fff;background:var(--primary-h);transition:all .25s}
#designView .dsi_detail .btns button svg{vertical-align:middle;width:18px;height:18px;margin-left:6px}
#designView .dsi_detail .btns div{display:grid;grid-template-columns:repeat(2, 1fr);gap:7px;width:100%}
#designView .dsi_detail .btns a{display:flex;display:flex;align-items:center;justify-content:center;height:45px;border-radius:4px;border:1px solid var(--primary45);color:var(--primary);transition:all .25s}
#designView .dsi_detail .btns a.cm_view{grid-column:span 2}
#designView .dsi_pf{margin-top:50px}
#designView .dsi_pf .tit{margin-bottom:10px;font-size:20px;font-weight:700;color:#111;white-space:nowrap}
#designView .dsi_pf .tit span{display:flex;align-items:flex-end;font-size:13px;font-weight:500;color:#999;white-space:normal;word-break:keep-all}
#designView .dsi_pf .tit span a{margin-left:auto;color:var(--primary);white-space:nowrap}
#designView .dsi_pf .tit span a svg{vertical-align:-2px;width:14px;height:14px;margin-left:3px}
#designView .dsi_pf .pf_slide{position:relative;padding:30px 30px 25px;border-radius:12px;border:1px solid #e1e1e1}
#designView .dsi_pf ul{display:flex}
#designView .dsi_pf ul li{font-weight:600;text-align:center} 
#designView .dsi_pf ul li a{display:block}
#designView .dsi_pf ul li .img{overflow:hidden;height:156px;margin-bottom:10px;border-radius:12px;border:1px solid #e1e1e1}
#designView .dsi_pf ul li .img img{width:100%}
#designView .dsi_pf ul li.empty{width:100%;padding:30px 0;font-weight:500;color:#999;text-align:center}
#designView .dsi_pf button{position:absolute;top:43%;transform:translateY(-50%);z-index:5;width:38px;height:38px;padding-top:4px;border-radius:50%;border:none;color:#111;background:rgba(255,255,255,.9);box-shadow:3px 3px 10px rgba(0,0,0,.08)}
#designView .dsi_pf button svg{width:20px;height:20px}
#designView .dsi_pf button.prev{left:10px}
#designView .dsi_pf button.next{right:10px}
#designView .dsi_pf button.swiper-button-disabled{display:none}


/* ==================================== 디자인 정보 */
#designView *{word-break:keep-all}
#designView .dsi_desc{overflow:hidden;margin-top:100px}
#designView .dsi_desc .s_tit{font-size:28px;font-weight:700;color:#111}
#designView .dsi_desc .inner{width:100%;max-width:var(--mainsize);margin:0 auto;padding:100px 0}
#designView .desc_bnr{display:flex;align-items:center;height:340px;background:url(/sh_design/img/view_bnr.jpg) center right no-repeat; background-size:cover}
#designView .desc_bnr .pl{margin-top:25px;font-size:20px;white-space:pre-line}
#designView .type{margin-top:100px}
#designView .b_tit{font-size:40px;font-weight:700;color:#111;text-align:center}
#designView .mean{margin-bottom:60px;font-size:20px;text-align:center}
#designView .mean div{margin-top:10px;white-space:pre-line}
#designView .bg_box{background:#f2f2f2}
#designView .main_info ul{width:60%;margin:0 auto;text-align:center}
#designView .main_info img{width:100%}
#designView .main_info .bsc{overflow:hidden;border-radius:20px}
#designView .main_info .scroll{overflow:hidden;height:392px;border-radius:20px}
#designView .main_info .scroll img{width:100%;height:100%;object-fit:cover;object-position:top;transition:object-position 5s cubic-bezier(0.2, 1, 0.2, 1)}
#designView .main_info dl{margin-top:50px}
#designView .main_info dt{font-size:22px;font-weight:700;color:var(--primary)}
#designView .main_info dd{margin:20px 0 30px;white-space:pre-line}
#designView .main_info dd b{color:#111}
#designView .main_info a{display:flex;align-items:center;justify-content:space-between;width:205px;height:60px;margin:0 auto;padding:0 25px;border:2px solid var(--primary);border-radius:50px;font-size:16px;font-weight:700;color:var(--primary);transition:all .3s}
#designView .sub_info ul{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;font-size:18px;font-weight:700;color:#111;text-align:center}
#designView .sub_view div{display:flex;align-items:center;margin-bottom:20px;padding:30px;border:1px solid #e1e1e1;border-radius:13px;background:#fff}
#designView .sub_view img{position:relative;width:100%}

#designView .fuc_info img{width:100%}
#designView .fuc_info ul{display:grid;grid-template-columns:repeat(2,1fr);gap:50px}
#designView .fuc_info li div{display:flex;justify-content:center;align-items:center;height:350px;padding:30px;border:1px solid #e1e1e1;border-radius:13px;text-align:center}
#designView .fuc_info li.mb_view div{align-items:flex-end;padding:30px 30px 0 30px}
#designView .fuc_info li.search div{padding:30px 0 30px 30px}
#designView .fuc_info dl{margin:20px 0 0 30px}
#designView .fuc_info dt{margin-bottom:10px;font-size:20px;font-weight:700;color:#111}
#designView .fuc_info dd{position:relative;font-size:14px}
#designView .fuc_info dd:before{display:inline-block;content:'';width:3px;height:3px;margin-right:10px;border-radius:50px;background:#777;vertical-align:3px}

#designView .mk_way .tabs{margin:60px 0 40px;text-align:center}
#designView .mk_way .tabs span{display:inline-flex;align-items:center;justify-content:center;width:135px;height:50px;border-radius:50px;border:1px solid var(--dark);font-size:18px;font-weight:700;opacity:1;color:var(--dark);background:none;transition:all .3s}
#designView .mk_way .tabs span+span{margin-left:15px}
#designView .mk_way .tabs span.on{color:#fff;background:var(--dark)}
#designView .mk_way img{width:100%}
#designView .mk_way .mver{display:none}

#designView .pf{position:relative}
#designView .pf .more{display:flex;align-items:center;justify-content:space-between;width:160px;height:60px;margin:40px auto 0;padding:0 25px;border:2px solid var(--primary);border-radius:50px;font-size:16px;font-weight:700;color:var(--primary);transition:all .3s}
#designView .pf .s_tit{margin-bottom:60px}
#designView .pf .pf_silder{margin:0 80px}
#designView .pf .arrow{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;width:55px;height:55px;border-radius:50px;color:#111;cursor:pointer;transform:translateY(-50%);background:#f2f2f2}
#designView .pf .next{right:0}
#designView .pf .prev{left:0}
#designView .pf_silder ul li{overflow:hidden;position:relative;border-radius:12px;border:1px solid #e1e1e1;background:#fff;transition:all .25s}
#designView .pf_silder ul li .cate{display:block;position:absolute;left:12px;top:12px;z-index:2;height:26px;padding:0 14px;border-radius:20px;font-size:13px;font-weight:600;color:#fff;line-height:27px;background:rgba(0,0,0,.65)}
#designView .pf_silder ul li .img{position:relative;height:260px}
#designView .pf_silder ul li .img img{position:relative;width:100%;height:100%;object-fit:cover;object-position:top;transition:object-position 3s cubic-bezier(0.5, 1, 0.89, 1)}
#designView .pf_silder ul li .info{padding:20px;text-align:center} 
#designView .pf_silder ul li .info p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:22px;font-weight:700;color:#222}
#designView .pf_silder ul li .info div{display:flex;margin-top:10px;gap:8px}
#designView .pf_silder ul li .info div a{width:calc(100% / 3);height:40px;border-radius:4px;font-size:14px;font-weight:600;color:#fff;line-height:40px;background:#aaa;transition:all .25s} 

@media(hover:hover){
#designView .dsi_detail .tabs .price div button:hover{border-color:var(--primary)}	
#designView .dsi_detail .option > dl > dt a:hover .help{color:#fff;background:var(--primary)}
#designView .dsi_detail .btns button:hover{background:var(--primary)}
#designView .dsi_detail .btns a:hover{border-color:var(--primary)}
#designView .main_info a:hover{color:#fff;background:var(--primary)}
#designView .main_info .scroll:hover img{object-position:bottom}
#designView .cm_btn:hover{background:var(--primary)}
#designView .pf .more:hover{color:#fff;background:var(--primary)}
#designView .pf_silder ul li:hover .img img{object-position:bottom} 
#designView .pf_silder ul li .info div a:hover{background:var(--dark)}
}
@media(max-width:1400px){
#designView .design_info{padding:0 15px}	
#designView .design_info .left{width:60%}
#designView .dsi_thum .frame{width:85%}
#designView .dsi_detail{width:40%;padding-left:30px}
#designView .desc_bnr{background-position:65% center}
#designView .dsi_desc .inner{padding:100px 15px}
#designView .desc_bnr .pl{font-size:18px}
}
@media(max-width:1024px){
#designView{border-top:1px solid #e1e1e1}
#designView .design_info .left{width:52%}
#designView .dsi_thum{height:auto;padding:0;background:none}
#designView .dsi_thum .frame{width:auto;height:auto;border:none;border-radius:0}
#designView .dsi_thum .frame::-webkit-scrollbar{display:none}
#designView .dsi_thum img{border-radius:12px;border:1px solid #e1e1e1}
#designView .dsi_pf .pf_slide{padding:20px 30px 20px 20px}
#designView .dsi_pf ul li .img{height:auto}
#designView .dsi_detail{width:48%;padding-top:15px}
#designView .dsi_detail .code{font-size:22px}
#designView .dsi_desc .inner{padding:70px 15px}
#designView .desc_bnr{height:280px}
#designView .b_tit{font-size:30px}
#designView .dsi_desc .s_tit{font-size:25px}
#designView .mean{font-size:16px}
#designView .sub_info ul{grid-template-columns:repeat(2,1fr)}
#designView .sub_view div{height:250px;margin-bottom:10px;padding:20px}
#designView .fuc_info ul{gap:30px}
#designView .fuc_info li div{height:250px;padding:20px}
#designView .fuc_info dt{font-size:18px}
#designView .mk_way .tabs{margin:30px 0 20px}
#designView .mk_way .tabs span{height:45px;font-size:16px}
#designView .pf .arrow{width:50px;height:50px}
#designView .pf .arrow svg{width:18px}
#designView .pf_silder ul li .img{height:200px}
#designView .pf_silder ul li .info{padding:12px}
#designView .pf_silder ul li .info p{font-size:18px}
#designView .pf_silder ul li .info div{gap:4px;margin-top:5px}
#designView .pf_silder ul li .info div a{height:30px;font-size:12px;line-height:30px;letter-spacing:-.5px}
}
@media(max-width:768px){
#designView .design_info{display:block}	
#designView .design_info .left{width:100%}
#designView .dsi_thum .frame{display:none}
#designView .dsi_thum .thum_area{display:flex;align-items:flex-start}
#designView .dsi_thum .thum_area .pc_link{display:none}
#designView .dsi_thum .thum_area .pc_link.on{display:block}
#designView .dsi_thum .thum_area .mo_link{display:none}
#designView .dsi_thum .thum_area .mo_link img{border:none}
#designView .dsi_thum .thum_area .mo_link.on{flex-shrink:0;display:block;width:40%;margin-left:12px}
#designView .dsi_detail{width:100%;padding:0;margin-top:40px}
#designView .dsi_detail .code{margin-bottom:15px}
#designView .dsi_desc .inner{padding:60px 15px}
#designView .dsi_desc .inner.pf{padding:60px 0}
#designView .desc_bnr{height:240px;text-align:center;background-position:left}
#designView .dsi_desc .s_tit{font-size:22px;text-align:center}
#designView .desc_bnr .pl{margin-top:15px;font-size:16px;white-space:normal}
#designView .b_tit{font-size:25px}
#designView .mean{margin-bottom:35px}
#designView .main_info ul{display:block;width:100%}
#designView .main_info ul li+li{margin-top:60px}
#designView .main_info dl{margin-top:35px}
#designView .main_info dt{font-size:20px}
#designView .main_info dd{margin:10px 0 15px;white-space:normal}
#designView .main_info a{height:50px;font-size:14px}
#designView .main_info .scroll{overflow:auto;height:300px;border-radius:20px 0 0 20px}
#designView .main_info .scroll::-webkit-scrollbar{width:10px}
#designView .main_info .scroll::-webkit-scrollbar-track{background-color:var(--primary10)}
#designView .main_info .scroll::-webkit-scrollbar-thumb{background-color:var(--primary)}
#designView .main_info .scroll img{width:100%;height:auto}
#designView .main_info .scroll:hover img{object-position:top}
#designView .sub_view div{height:200px;padding:15px}
#designView .sub_info ul{font-size:16px}
#designView .fuc_info li div{height:200px}
#designView .fuc_info dl{margin:20px 0 0 0;text-align:center}
#designView .fuc_info dt{margin-bottom:5px;font-size:16px}
#designView .mk_way .pcver{display:none}
#designView .mk_way .mver{display:block}
#designView .pf .s_tit{margin-bottom:35px}
#designView .pf .arrow{display:none}
#designView .pf .more{width:140px;height:50px;font-size:14px}
#designView .pf .pf_silder{margin:0}
}
@media(max-width:600px){
#designView .fuc_info li div{height:150px}
}
@media(max-width:480px){
#designView{font-size:14px}	
#designView .dsi_pf .tit{display:block;font-size:18px}	
#designView .dsi_pf .tit span{display:block}
#designView .dsi_pf .tit span a{display:block}
#designView .dsi_pf .pf_slide{padding:15px 30px 15px 15px}
#designView .dsi_detail .code{margin-bottom:15px;font-size:20px}
#designView .dsi_detail .tabs .tabs label{height:40px;line-height:40px}
#designView .dsi_detail .tabs .price{padding:20px 0 15px}
#designView .dsi_detail .tabs .price > span{font-size:14px}
#designView .dsi_detail .tabs .price div{font-size:18px}
#designView .dsi_detail .tabs .price div span img{width:14px}
#designView .dsi_detail .option{padding:20px 0}
#designView .dsi_detail .option > dl{font-size:13px}
#designView .dsi_detail .option > dl+dl{margin-top:5px}
#designView .dsi_detail .option > dl > dt{width:90px}
#designView .dsi_detail .btns{padding-top:20px}
#designView .dsi_detail .btns button{height:55px;margin-bottom:15px;font-size:15px}

#designView .desc_bnr{height:200px;background-position:4% center}
#designView .dsi_desc .s_tit{font-size:18px}
#designView .desc_bnr .pl{font-size:14px}
#designView .b_tit{font-size:20px}
#designView .dsi_desc .s_tit{font-size:16px}
#designView .mean{font-size:14px}
#designView .mean div{margin-top:0}
#designView .main_info dt{font-size:16px}
#designView .main_info a{width:190px}
#designView .main_info .scroll{height:260px}
#designView .main_info ul li+li{margin-top:35px}
#designView .sub_info ul{display:block;font-size:14px}
#designView .sub_info ul li+li{margin-top:10px}
#designView .sub_view div{height:auto}
#designView .fuc_info ul{display:block}
#designView .fuc_info li+li{margin-top:20px}
#designView .fuc_info li div{height:auto}
#designView .fuc_info dl{margin:10px 0 0}
#designView .fuc_info dt{font-size:14px}
#designView .pf .s_tit{margin-bottom:20px}
#designView .pf_silder ul li .img{height:160px}
#designView .pf_silder ul li .info div{flex-wrap:wrap}
#designView .pf_silder ul li .info div a{width:calc(50% - 2px)}
#designView .pf_silder ul li .info div a:last-of-type{width:100%;background:var(--primary)}
#designView .mk_way .tabs{margin:20px 0}
#designView .mk_way .tabs span{width:100px;height:40px;font-size:14px}
#designView .mk_way .tabs span+span{margin-left:5px}
}

/* ==================================== 견적서 */
#designEstimate{width:768px;padding:20px;font-size:14px;color:#777;line-height:1.6;font-family:'Pretendard'}
#designEstimate .fw_bold{font-weight:700}
#designEstimate .tit_area{display:flex;align-items:center;line-height:1}
#designEstimate .tit_area img{width:150px;margin-right:10px}
#designEstimate .tit_area h2{margin-left:auto;font-size:22px;line-height:1;color:#222;letter-spacing:-.5px;font-family:'Pretendard'}
#designEstimate .info{overflow:hidden;position:relative;padding:10px 15px;margin:8px 0 10px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;color:#222}
#designEstimate .info dl{float:left;width:33%;line-height:1.9}
#designEstimate .info dl dt{float:left;width:30%;font-weight:700}
#designEstimate .info dl dd{float:left;position:relative;width:70%}
#designEstimate .info dl dd.sign span{padding-left:20px}
#designEstimate .info dl dd.sign img{position:absolute;top:-35px;left:80px}
#designEstimate .info dl.f_r{width:50%}
#designEstimate .info dl.f_r dt{width:25%}
#designEstimate .info ul{position:absolute;top:10px;right:10px}
#designEstimate .info .txt{padding-top:10px;font-weight:700;clear:both}
#designEstimate .type_total{width:100%;position:relative;height:47px;padding:0 15px;line-height:47px;color:#222;background-color:#f2f2f2}
#designEstimate .type_total .st{color:#ff0003}
#designEstimate .type_total .txt{float:right;padding-right:150px}
#designEstimate .type_total .total{position:absolute;right:15px;top:-1px;font-size:22px;font-weight:700;line-height:47px}
#designEstimate table{width:100%;margin:10px 0;border-top:2px solid #222;border-bottom:2px solid #222}
#designEstimate table th{height:47px;color:#222;border-left:1px solid #ccc;background-color:#f2f2f2}
#designEstimate table th:first-child{border-left:none}
#designEstimate table td{padding:10px 15px;border-top:1px solid #ccc;border-left:1px solid #ccc;text-align:center}
#designEstimate table td:first-child{border-left:none;text-align:left}
#designEstimate table td b,#designEstimate table td:nth-child(2){color:#222}
#designEstimate table td .ps{padding-top:15px;font-size:12px;line-height:1.6;color:#ff8400}
#designEstimate .cont{position:relative;padding:15px;border:1px solid #ccc;background-color:#f7f7f7}
#designEstimate .cont .tit{padding-bottom:5px;color:#222}
#designEstimate .cont .ps{padding-top:15px;font-size:13px;line-height:1.6}
#designEstimate .cont dl{overflow:hidden;position:absolute;top:15px;right:15px;width:220px;font-weight:600;color:#222}
#designEstimate .cont dl dt{float:left;width:40%}
#designEstimate .cont dl dd{float:left;width:60%;text-align:right}
#designEstimate .print_btn{width:127px;height:40px;margin:15px auto 0;border-radius:3px;font-weight:600;line-height:40px;color:#fff;text-align:center;background-color:#5a5963;-webkit-transition:all .2s;transition:all .2s;cursor:pointer}
@media(hover:hover){
#designEstimate .print_btn:hover{background-color:#424149}
}

/* ==================================== 포트폴리오 */
#shPortfolio{padding-bottom:100px;line-height:1.8}
#shPortfolio .top_area{position:relative;z-index:1;padding:110px 0;text-align:center;background:#f2f2f2}
#shPortfolio .top_area .tit{width:100%;max-width:var(--mainsize);margin:0 auto;font-size:19px;background:#f2f2f2}
#shPortfolio .top_area .tit span{font-size:21px;font-weight:600;color:var(--primary)}
#shPortfolio .top_area .tit p{margin-top:15px;font-size:40px;font-weight:700;line-height:1.3;white-space:pre-line;color:#111}
#shPortfolio .top_area .tit div{margin-top:30px}
#shPortfolio ul{display:grid;grid-template-columns:repeat(3, 1fr);column-gap:20px;gap:30px;max-width:var(--mainsize);margin:0 auto;padding-top:100px}
#shPortfolio ul li{overflow:hidden;position:relative;border-radius:12px;border:1px solid #e1e1e1;background:#fff;transition:all .25s}
#shPortfolio ul li .cate{display:block;position:absolute;left:12px;top:12px;z-index:2;height:26px;padding:0 14px;border-radius:20px;font-size:13px;font-weight:600;color:#fff;line-height:27px;background:rgba(0,0,0,.65)}
#shPortfolio ul li .img{position:relative;height:320px}
#shPortfolio ul li .img img{position:relative;width:100%;height:100%;object-fit:cover;object-position:top;transition:object-position 3s cubic-bezier(0.5, 1, 0.89, 1)}
#shPortfolio ul li .info{padding:20px;text-align:center} 
#shPortfolio ul li .info p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:22px;font-weight:700;color:#222}
#shPortfolio ul li .info div{display:flex;margin-top:10px;gap:8px}
#shPortfolio ul li .info div a{width:calc(100% / 3);height:40px;border-radius:4px;font-size:14px;font-weight:600;color:#fff;line-height:40px;background:#aaa;transition:all .25s} 
#shPortfolio .pg_wrap{margin-top:50px}
@media(hover:hover){
#shPortfolio ul li:hover .img img{object-position:bottom} 
#shPortfolio ul li .info div a:hover{background:var(--dark)}
}
@media(max-width:1400px){
#shPortfolio .top_area{padding:70px 15px}
#shPortfolio .top_area .tit{font-size:17px}
#shPortfolio .top_area .tit span{font-size:18px}
#shPortfolio .top_area .tit p{font-size:35px}
}
@media(max-width:1430px){
#shPortfolio ul{padding:100px 15px 0}
}
@media(max-width:1200px){
#shPortfolio ul{grid-template-columns:repeat(3, 1fr)}
#shPortfolio ul li .img{height:220px}
}
@media(max-width:1024px){
#shPortfolio{padding-bottom:60px}	
#shPortfolio .top_area{padding:60px 0}
#shPortfolio ul{gap:12px;padding:60px 15px 0}
#shPortfolio ul li .info{padding:12px}
#shPortfolio ul li .info p{font-size:18px}
#shPortfolio ul li .info div{gap:4px;margin-top:5px}
#shPortfolio ul li .info div a{height:30px;font-size:12px;line-height:30px;letter-spacing:-.5px}
}
@media(max-width:768px){
#shPortfolio{margin-bottom:0}	
#shPortfolio .top_area{padding:50px 15px}
#shPortfolio .top_area .tit{font-size:14px}
#shPortfolio .top_area .tit p{margin-top:5px;font-size:30px}
#shPortfolio .sch_area .kwd{overflow-x:scroll;overflow-y:hidden;display:grid;justify-content:start;grid-template-columns:repeat(6, 1fr);gap:4px}
#shPortfolio .sch_area .kwd a{height:35px;padding:0 15px;margin:0;font-size:13px;white-space:nowrap;line-height:33px}
#shPortfolio ul{grid-template-columns:repeat(2, 1fr);padding:40px 15px 0}
}
@media(max-width:480px){
#shPortfolio .top_area .tit span{font-size:15px}
#shPortfolio .top_area .tit p{font-size:25px}
#shPortfolio .top_area .tit div{margin-top:15px}	
#shPortfolio ul li .cate{top:8px;left:8px;height:24px;padding:0 10px;font-size:11px;line-height:25px}	
#shPortfolio ul li .img{height:180px}
#shPortfolio ul li .info div{flex-wrap:wrap}
#shPortfolio ul li .info div a{width:calc(50% - 2px)}
#shPortfolio ul li .info div a:last-of-type{width:100%;background:var(--primary)}
}
@media(max-width:380px){
#shPortfolio ul{grid-template-columns:repeat(1, 1fr)}
}