@charset "utf-8";

/* ==================================== 디자인 샘플 */
#wpDesignWrap{position:relative}

/* ==================================== 디자인 카테고리 */
#wpDesignCate{padding:20px 0 40px;margin-bottom:40px;border-bottom:1px solid #e1e1e1;line-height:1.8}
#wpDesignCate .tit{margin:50px 0 25px;font-size:38px;font-weight:700;color:#111;text-align:center;line-height:1.4;white-space:pre-line;word-break:keep-all}
#wpDesignCate .stit{margin-bottom:25px;font-size:26px;font-weight:600;color:#222;text-align:center;line-height:1.4;word-break:keep-all}
#wpDesignCate .stxt{margin-bottom:70px;font-size:18px;font-weight:500;color:#777;text-align:center;line-height:1.5;word-break:keep-all}
#wpDesignCate .cate_wrap{position:relative;max-width:1200px;margin:0 auto;padding:0 45px}
#wpDesignCate .cate_wrap a{display:flex;flex-flow:column;align-items:center;font-size:15px;font-weight:600;line-height:1.3;text-align:center;color:#111;word-break:keep-all}
#wpDesignCate .cate_wrap a .icon{display:flex;align-items:center;justify-content:center;position:relative;width:86px;height:86px;margin-bottom:14px;border-radius:50%;border:2px solid var(--pale);background:var(--pale);transition:all .25s}
#wpDesignCate .cate_wrap a .icon img{width:42px}
#wpDesignCate .cate_wrap a .icon span{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);width:max-content;height:22px;padding:0 11px;border-radius:20px;font-size:12px;font-weight:600;line-height:22px;color:#fff;background:#515f73;transition:all .25s}
#wpDesignCate .cate_wrap a h3{font-weight:600}
#wpDesignCate .cate_wrap a p{margin-top:auto}
#wpDesignCate .cate_wrap button{position:absolute;top:32px}
#wpDesignCate .cate_wrap button.prev{left:-8px}
#wpDesignCate .cate_wrap button.next{right:-8px}
#wpDesignCate.sub{border-top:1px solid #e1e1e1}
#wpDesignCate.sub .tit{margin:80px 0 30px;font-size:40px;font-weight:700;color:var(--dark);text-align:center}
#wpDesignCate.sub .stit{line-height:1.6}
@media(hover:hover){
#wpDesignCate .cate_wrap a:hover .icon{border-color:var(--primary)}
#wpDesignCate .cate_wrap a:hover .icon span{background:var(--primary)}
}
@media(max-width:1200px){
#wpDesignCate{padding:20px 15px 40px}
#wpDesignCate .cate_wrap{padding:0 25px}
}
@media(max-width:1024px){
#wpDesignCate .cate_wrap a .icon{width:75px;height:75px}
#wpDesignCate .cate_wrap a .icon img{width:38px}
#wpDesignCate .tit{margin:30px 0 20px;font-size:28px}	
#wpDesignCate .stit{font-size:22px}	
#wpDesignCate .stxt{font-size:16px}
}
@media(max-width:768px){
#wpDesignCate{padding:0 15px 25px;margin-bottom:25px}
#wpDesignCate .tit{margin:0 0 20px;font-size:22px}
#wpDesignCate .stit{margin-bottom:15px;font-size:19px}
#wpDesignCate .stxt{font-size:15px}
#wpDesignCate.sub{padding-top:20px;margin-bottom:0}
#wpDesignCate.sub .tit{margin:40px 0 20px;font-size:32px}
#wpDesignCate.sub .stit{margin-bottom:40px;font-size:14px}
}
@media(max-width:620px){
#wpDesignCate .cate_wrap a .icon{width:68px;height:68px}
#wpDesignCate .cate_wrap a .icon img{width:34px}
}
@media(max-width:480px){
#wpDesignCate .cate_wrap a{font-size:12px}
#wpDesignCate .cate_wrap a .icon{width:55px;height:55px}
#wpDesignCate .cate_wrap a .icon img{width:28px}
#wpDesignCate .cate_wrap a .icon span{height:18px;padding:0 8px;font-size:10px;line-height:18px}
#wpDesignCate .tit{margin-bottom:15px;font-size:19px}
#wpDesignCate .stit{font-size:16px}
#wpDesignCate .stxt{font-size:14px}
#wpDesignCate.sub{padding-bottom:15px}
#wpDesignCate.sub .tit{margin:20px 0;font-size:26px}
}

/* ==================================== 디자인 검색 */
#wpDesignSch{display:flex;align-items:center;max-width:var(--mainsize);margin:0 auto 25px}
#wpDesignSch button, #wpDesignSch a{font-size:22px;font-weight:700;color:#aaa;transition:all .25s}
#wpDesignSch button.on{color:#111}
#wpDesignSch button+button, #wpDesignSch a{margin-left:30px}
#wpDesignSchWrap{display:flex;align-items:center;width:275px;height:55px;padding:0 20px 0 25px;border-radius:30px;margin-left:auto;background:var(--pale)}
#wpDesignSchWrap input{width:calc(100% - 24px);height:100%;padding:0 10px 0 0;border:none;font-size:16px;font-weight:500;background:none}
#wpDesignSchWrap button{padding-top:3px;color:#111}
#wpDesignSchWrap.sub{width:400px;margin:0 auto 30px;border:3px solid #e1e1e1;background:#fff}
#wpDesignSchWrap.sub button{padding-top:1px;color:var(--dark)}
#wpDesignSchWrap.sub button svg{stroke-width:2.5px}
#wpDesignSchWrap input:focus, #wpDesignSchWrap input:active{border:none!important}
@media(hover:hover){
#wpDesignSch button:not(.on):hover, #wpDesignSch a:hover{color:#888}
}
@media(max-width:1340px){
#wpDesignSch{padding:0 15px}
}
@media(max-width:768px){
#wpDesignSch{flex-wrap:wrap;justify-content:center}
#wpDesignSch button, #wpDesignSch a{font-size:18px}
#wpDesignSch button+button, #wpDesignSch a{margin-left:25px}
#wpDesignSchWrap{width:100%;height:50px;padding-left:20px;margin:15px 0 0}
#wpDesignSchWrap input{font-size:15px}
}
@media(max-width:480px){
#wpDesignSch button, #wpDesignSch a{font-size:16px}
#wpDesignSch button+button, #wpDesignSch a{margin-left:16px}
#wpDesignSchWrap.sub{width:100%;height:45px;margin-bottom:20px;padding:0 12px 0 15px;border-width:2px}
#wpDesignSchWrap.sub button svg{width:20px;height:20px}
}

/* ==================================== 검색 상단 */
#listResult{display:flex;align-items:center;max-width:var(--mainsize);width:100%;margin:0 auto 10px;padding:15px 20px;border-radius:10px;font-size:15px;font-weight:600;color:#111;background:var(--pale)}
#listResult span{margin-left:5px;color:var(--primary)}
#listResult i{font-style:normal;color:#999}
#listResult .btns{display:flex;align-items:center;margin-left:auto}
#listResult .btns button{display:flex;align-items:center;justify-content:center;border:1px solid #a1a1a1;width:28px;height:28px;border-radius:4px;color:#a1a1a1}
#listResult .btns button.on{color:#fff;border-color:var(--dark);background:var(--dark)}
#listResult .btns button+button{margin-left:6px}
#listResult .btns button.flex_btn{margin-left:10px}
#listResult .btns svg{width:18px;height:18px}
@media(max-width:1340px){
#listResult{width:calc(100% - 30px)}	
}
@media(max-width:768px){
#listResult{width:100%;padding:10px 15px;margin-bottom:0;border-radius:0;font-size:13px}
#listResult .btns button{width:26px;height:26px}
#listResult .btns svg{width:16px;height:16px}
}
@media(max-width:480px){
#listResult{padding:8px 15px}
}

/* ==================================== 디자인 필터 */
#filterTab{position:sticky;top:0;z-index:5;max-width:var(--mainsize);width:100%;margin:0 auto 10px;padding:12px 0;background:#fff}
#filterTab .flex{display:flex;flex-wrap:wrap;position:relative}
#filterTab button{flex-wprink:0;border:none;background:none;font-size:15px;font-weight:600;color:#111;font-family:'Pretendard'}
#filterTab button+button{margin-left:7px}
#filterTab .order{height:38px;padding:0 15px;border-radius:20px;background:#f4f4f5}
#filterTab .order.on{color:#fff;background:#222}

/* ==================================== 필터 - 업종,타입 */
#filterTab .select_area{position:relative}
#filterTab .select_area+.select_area{margin-left:7px}
#filterTab .select_btn{height:40px;padding:0 15px 0 16px;border-radius:20px;border:1px solid #e1e1e1}
#filterTab .select_btn:after{content:"\f107";padding-left:15px;vertical-align:1px;font-family:'fontawesome'}
#filterTab .select_btn.active{border-color:#111}
#filterTab .select_btn.active:after{content:"\f106"}
#filterTab .select_box{display:none;overflow:hidden;position:absolute;left:0;top:calc(100% + 10px);z-index:1;width:400px;padding:30px 0;border-radius:12px;border:1px solid #e1e1e1;background:#fff;box-wpadow:3px 3px 10px rgba(0,0,0,.08)}
#filterTab .select_box .scr_area{overflow-y:scroll;height:450px;padding:0 30px}
#filterTab .select_box .scr_area::-webkit-scrollbar{width:4px}
#filterTab .select_box .scr_area::-webkit-scrollbar-thumb{background-color:#ddd}
#filterTab .select_box .scr_area::-webkit-scrollbar-track{background-color:#fff}
#filterTab .select_box.half .scr_area{height:310px}
#filterTab .select_box.color .scr_area{height:auto}
#filterTab .select_box.type_half{width:320px}
#filterTab .select_box.type_half .scr_area{height:auto}
#filterTab .select_box dl+dl{margin-top:32px;padding-top:28px;border-top:1px solid #eee}
#filterTab .select_box dl dt{margin-bottom:20px;font-size:18px;font-weight:700;color:#222}
#filterTab .select_box dl dd{display:flex;flex-wrap:wrap}
#filterTab .select_box dl dd input[type=checkbox]{position:absolute;width:0;height:0;visibility:hidden}
#filterTab .select_box:not(.color) dl dd label{display:block;width:50%;font-size:15px;font-weight:500;color:#555}
#filterTab .select_box:not(.color) dl dd label:nth-of-type(n+3){margin-top:15px}
#filterTab .select_box:not(.color) dl dd label:before{display:inline-block;vertical-align:middle;content:"";width:20px;height:20px;margin-right:8px;border-radius:4px;border:1px solid #e1e1e1;text-align:center;line-height:16px}
#filterTab .select_box:not(.color) dl dd input:checked + label:before{content:url(/wp_img/common/check.png);border:none;background:#111}
#filterTab .select_box.color{width:345px}
#filterTab .select_box.color .scr_area{padding:0 20px}
#filterTab .select_box.color dl dt{padding:0 10px}
#filterTab .select_box.color dl dd{padding:0 4px}
#filterTab .select_box.color dl dd label{cursor:pointer;display:inline-block;position:relative;width:20px;height:20px;margin:8px;border-radius:50%}
#filterTab .select_box.color dl dd label:before{display:block;content:"";position:absolute;top:-4px;left:-4px;width:28px;height:28px;border-radius:50%;border:1px solid #ccc}
#filterTab .select_box.color dl dd input:checked + label:before{border:2px solid #555}
#filterTab .select_box.color dl dd label:last-of-type:after{display:block;content:"";position:absolute;width:100%;height:100%;border-radius:50%;background:url(/wp_img/common/color.jpg) center no-repeat}
#filterTab .select_box .mo_select_close{position:absolute;right:22px;top:28px}
#filterTab .select_box .mo_select_close2{display:none;position:absolute;bottom:10px;left:50%;transform:translateX(-50%);height:36px;padding:0 35px;border-radius:30px;font-size:14px;color:#fff;background:#222;font-family:'Pretendard'}
@media(hover:hover){
#filterTab .select_box.color dl dd label:hover:before{border-color:#555}
#filterTab .select_box:not(.color) dl dd label:hover{cursor:pointer}
}
@media(max-width:1340px){
#filterTab{padding:15px}
}
@media(max-width:860px){
#filterTab .select_box.color{width:310px}
#filterTab .select_box.type_half{width:220px}
}
@media(max-width:768px){
#filterTab{margin-bottom:0;padding:10px 0 0}
#filterTab .flex{padding:0 15px 10px}
#filterTab .scr_wrap{overflow-x:scroll}
#filterTab .flex{flex-wrap:nowrap}
#filterTab .select_area{position:static}
#filterTab .select_area+.select_area{margin-left:5px}
#filterTab .select_btn{height:28px;padding:0 10px 0 12px;font-size:12px;white-space:nowrap}	
#filterTab .select_btn:after{padding-left:10px}
#filterTab .select_box{position:fixed;top:auto;left:0;bottom:0;z-index:6;width:100%;height:calc(45vh + 12px);padding:0;border:none;box-wpadow:0 -4px 10px rgba(0,0,0,.1)}
#filterTab .select_box .scr_area{height:100%!important;padding:20px 20px 60px 20px;border-radius:12px 12px 0 0;background:#fff}
#filterTab .select_box.color{width:100%;height:200px}
#filterTab .select_box.color .scr_area{padding:20px 10px 60px 10px}
#filterTab .select_box.type_half{width:100%;height:150px}
#filterTab .select_box dl dt{font-size:16px}
#filterTab .select_box:not(.color) dl dd label{font-size:14px}
#filterTab .select_box.color dl dd label{width:24px;height:24px;margin:8px}
#filterTab .select_box.color dl dd label:before{width:32px;height:32px}
#filterTab .select_box .mo_select_close{right:10px;top:10px}
#filterTab .select_box .mo_select_close2{display:block}
}

/* ==================================== 선택한 옵션 */
#selectedOption{position:relative;display:none;width:100%;margin-top:15px;padding:10px 120px 10px 10px;border-radius:10px;background:var(--pale)}
#selectedOption .reset{position:absolute;top:16px;right:20px;font-size:14px;font-weight:600;color:#111}
#selectedOption .reset i{margin-right:6px}
#selectedOption .option_area{display:flex;flex-wrap:wrap}
#selectedOption .option_area span{margin:6px 10px;font-size:14px;font-weight:600;color:#666}
#selectedOption .option_area span:after{display:inline-block;vertical-align:-1px;content:"";width:12px;height:12px;margin-left:2px;background:url(/wp_img/common/option_close.png) no-repeat}
#selectedOption .option_area .color span{display:inline-block;position:relative;width:20px;height:20px;margin-right:18px;border-radius:2px}
#selectedOption .option_area .color span:after{position:absolute;right:-13px}
@media(hover:hover){
#selectedOption .reset:hover{cursor:pointer}
#selectedOption .option_area span:hover{cursor:pointer}
}
@media(max-width:768px){
#selectedOption{margin-top:12px;border-radius:0}	
#selectedOption .option_area span{font-size:12px}	
#selectedOption .option_area span:after{width:10px;height:10px;background-size:10px}
#selectedOption .reset{font-size:12px}
#selectedOption{margin-top:0;padding:5px 90px 5px 5px;border-radius:0}
#selectedOption .reset{right:15px;top:10px;font-size:12px}
#selectedOption .reset i{margin-right:2px}
#selectedOption .option_scr{overflow-x:scroll}
#selectedOption .option_area{flex-wrap:nowrap}
#selectedOption .option_area span{flex-wprink:0;font-size:12px}
#selectedOption .option_area span:after{width:10px;height:10px;background-size:10px}
}

/* ==================================== 디자인 리스트 */
#wpDesignList{max-width:var(--mainsize);margin:0 auto 100px}
#wpDesignList ul{display:grid;grid-template-columns:repeat(3, 1fr);column-gap:40px;row-gap:30px}
#wpDesignList.sub ul{grid-template-columns:repeat(4, 1fr);margin-bottom:40px}
#wpDesignList.sub ul li a{font-size:14px}
#wpDesignList.sub ul li .btns a, #wpDesignList.sub ul li .btns button{height:32px;font-size:13px}
#wpDesignList.sub ul li .info .code{font-size:15px}
#wpDesignList.sub ul li .info .price p{font-size:16px}
#wpDesignList ul li{overflow:hidden;position:relative;border-radius:12px;border:1px solid #e1e1e1}
#wpDesignList ul:has(.none){display:block}
#wpDesignList ul:has(.none) .custom{display:none}
#wpDesignList ul li.none{grid-column:span 4;padding:50px 0;font-size:16px;line-height:1.6;color:#aaa;border:none;text-align:center;word-break:keep-all}
#wpDesignList ul li.none img{width:45px;margin-bottom:20px}
#wpDesignList ul li.none .links{display:flex;justify-content:center;margin-top:30px}
#wpDesignList ul li.none .links a{display:flex;align-items:center;justify-content:center;width:140px;height:45px;border-radius:4px;border:1px solid var(--primary45);font-size:15px;font-weight:500;color:var(--primary);transition:all .25s}
#wpDesignList ul li.none .links a+a{margin-left:7px;color:#fff;background:var(--primary-h)}
@media(hover:hover){
#wpDesignList ul li.none .links a:hover{border-color:var(--primary)}
#wpDesignList ul li.none .links a+a:hover{border-color:var(--primary);background:var(--primary)}
}
#wpDesignList ul li a{font-size:15px;font-weight:500;color:#999}
#wpDesignList ul li .img{overflow:hidden;display:block;position:relative;height:260px}
#wpDesignList 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} 
#wpDesignList ul li .img svg{width:15px;height:15px;color:#fff;transition:all .15s}
#wpDesignList 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)}
#wpDesignList ul li .img span{display:block;position:absolute;left:12px;top:12px;z-index:1;height:26px;padding:0 14px;border-radius:20px;font-size:13px;font-weight:600;color:#fff;line-height:27px;background:var(--primary)}
#wpDesignList ul li .btns{display:flex;align-items:center;margin:15px 0;padding:0 15px}
#wpDesignList ul li .btns a, #wpDesignList ul li .btns button{display:flex;align-items:center;justify-content:center;width:calc(100% / 3);height:40px;border-radius:4px;font-size:15px;font-weight:500;letter-spacing:-.5px}
#wpDesignList ul li .btns .bd_btn{border:1px solid #e1e1e1}
#wpDesignList ul li .btns .bg_btn{margin-left:4px;color:#fff;background:#aaa}
#wpDesignList ul li .info{display:block;padding:0 15px 15px;line-height:1.6}
#wpDesignList ul li .info .code{font-size:19px;font-weight:700;color:#111}
#wpDesignList ul li .info .desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#wpDesignList ul li .info .price{display:flex;align-items:center;margin-top:8px}
#wpDesignList ul li .info .price span{margin-left:auto;font-weight:600;color:#aaa;text-decoration:line-through}
#wpDesignList ul li .info .price p{margin-left:5px;font-size:20px;font-weight:700;color:#111}
#wpDesignList ul li.custom{border:none;color:rgba(255,255,255,.6);background:var(--dark);transition:all .3s}
#wpDesignList ul li.custom p{margin-bottom:10px;font-size:17px;font-weight:600;color:#fff}
#wpDesignList ul li.custom a{display:block;padding:35px;font-size:14px;line-height:1.65;word-break:keep-all}
#wpDesignList .more{display:block;width:190px;height:58px;margin:50px auto 0;border:1px solid #e1e1e1;border-radius:30px;font-size:15px;font-weight:600;line-height:56px;;text-align:center;color:#111;transition:all .25s}
#wpDesignList .more i{margin-left:15px}
#wpDesignList ul.grid{row-gap:unset;grid-auto-rows:10px}
#wpDesignList ul.grid li{width:auto;margin-bottom:0}
#wpDesignList ul.grid li+li{margin-left:0}
#wpDesignList ul.grid li .img{height:auto}
@media(hover:hover){
#wpDesignList ul:not(.grid) li:hover .img img{object-position:bottom} 
#wpDesignList ul li:hover .img .mask{opacity:1}
#wpDesignList ul li:hover .img svg{width:30px;height:30px}
#wpDesignList ul li.custom:hover{transform:translate(-3px,-3px);box-wpadow:5px 5px 12px rgba(0,0,0,.35)}
#wpDesignList .more:hover{border-color:#111}
}
@media(max-width:1340px){
#wpDesignList ul{padding:0 15px}	
}
@media(max-width:1200px){
#wpDesignList ul li .img{height:240px}
}
@media(max-width:1024px){
#wpDesignList ul{grid-template-columns:repeat(3, 1fr);column-gap:30px;row-gap:20px}
#wpDesignList.sub ul{grid-template-columns:repeat(3, 1fr);column-gap:30px;row-gap:20px}
#wpDesignList ul li a{font-size:14px}
#wpDesignList ul li .btns a, #wpDesignList ul li .btns button{height:32px;font-size:13px}
#wpDesignList ul li .info .code{font-size:15px}
#wpDesignList ul li .info .price p{font-size:16px}
}
@media(max-width:768px){
#wpDesignList{margin-bottom:60px;padding-top:15px}
#wpDesignList ul{grid-template-columns:repeat(2, 1fr);gap:12px}	
#wpDesignList.sub ul{grid-template-columns:repeat(2, 1fr);gap:12px}	
#wpDesignList ul li .img{height:220px}
#wpDesignList ul li .info{padding:0 12px 12px}
#wpDesignList ul li .btns{padding:0 12px}
#wpDesignList ul li .btns a, #wpDesignList ul li .btns button{font-size:12px;letter-spacing:-.5px}
#wpDesignList ul li.none{font-size:14px}
#wpDesignList ul li.none .links a{width:130px;height:45px;font-size:15px}
#wpDesignList .more{width:180px;height:50px;margin-top:40px;line-height:48px}
}
@media(max-width:480px){
#wpDesignList ul li a{font-size:13px}
#wpDesignList ul li .img{height:200px}
#wpDesignList ul li .img span{top:8px;left:8px;height:24px;padding:0 10px;font-size:11px;line-height:25px}
#wpDesignList ul li .btns{flex-wrap:wrap}
#wpDesignList ul li .btns .bd_btn{width:100%;margin-bottom:4px}
#wpDesignList ul li .btns .bg_btn{width:calc(50% - 2px);margin:0}
#wpDesignList ul li .btns .bg_btn+.bg_btn{margin:0 0 0 4px}
#wpDesignList ul li .info .code{font-size:14px}
#wpDesignList ul li .info .price{flex-wrap:wrap;justify-content:flex-end}
#wpDesignList ul li .info .price p{font-size:16px;letter-spacing:-.5px}
}
@media(max-width:380px){
#wpDesignList ul{grid-template-columns:repeat(1, 1fr)}	
#wpDesignList.sub ul{grid-template-columns:repeat(1, 1fr)}	
#wpDesignList 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-dawparray:150,200;stroke-dawpoffset:-10;-webkit-animation:dawp 1.5s ease-in-out infinite, color 6s ease-in-out infinite;animation:dawp 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 dawp{0%{stroke-dawparray:1,200;stroke-dawpoffset:0}50%{stroke-dawparray:89,200;stroke-dawpoffset:-35}100%{stroke-dawparray:89,200;stroke-dawpoffset:-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;flex-direction:column;height:500px;border-radius:12px;background:var(--pale-b)}
#designView .dsi_thum h1{margin-bottom:10px;font-size:20px;font-weight:700;color:#111;line-height:1.4;word-break:break-all;text-align:center}
#designView .dsi_thum .frm_txt{width:100%;text-align:center}
#designView .dsi_thum .frame{position:relative;cursor:url(/wp_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_n{font-size:16px;font-weight:600;color:#aaa}
#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-wprink: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-wpadow: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 .dsi_desc{position:relative;padding:130px 0 0;font-size:18px}
#designView .dsi_desc .tit_area{padding:120px 0;text-align:center;background:var(--pale-b)}
#designView .dsi_desc .tit_area p{margin-bottom:30px;font-size:38px;font-weight:700;color:var(--dark);line-height:1.4;white-space:pre-line}
#designView .dsi_desc .tit_area span{display:block;font-size:20px;color:#999;white-space:pre-line}
#designView .dsi_desc .desc_tabs{position:sticky;top:0;z-index:101;display:flex;align-items:center;justify-content:center;margin-top:80px;padding:10px 0;backdrop-filter:blur(15px);background:rgba(255,255,255,.4)}
#designView .dsi_desc .desc_tabs li+li{margin-left:10px}
#designView .dsi_desc .desc_tabs li a{display:block;height:50px;padding:0 25px;border-radius:30px;font-size:19px;line-height:50px;color:#aaa;transition:all .25s}
#designView .dsi_desc .desc_tabs li.on a{color:#fff;background:var(--primary)}
/* 무료기술지원 */
#designView .dsi_desc .cont01{padding:80px 0 100px}
#designView .dsi_desc .cont01 ul{display:grid;grid-template-columns:repeat(5, 1fr);column-gap:16px;max-width:1200px;margin:0 auto;padding:0 15px}
#designView .dsi_desc .cont01 ul li{overflow:hidden;border-radius:20px;text-align:center;transition:all .25s}
#designView .dsi_desc .cont01 ul li a{position:relative;display:flex;justify-content:center;align-items:flex-end;height:225px;padding-bottom:40px}
#designView .dsi_desc .cont01 ul li img{position:absolute;left:50%;top:38%;z-index:-1;transform:translate(-50%,-50%);width:100%}
#designView .dsi_desc .cont01 ul li:nth-child(1) img{width:90%}
#designView .dsi_desc .cont01 ul li:nth-child(4) img{width:85%}
#designView .dsi_desc .cont01 ul li p{font-weight:600;color:#111}
/* 제작비용 */
#designView .dsi_desc .cont02{max-width:var(--mainsize);margin:0 auto;padding:60px;border:1px solid #e1e1e1;border-radius:16px}
/* 셋팅범위 */
#designView .dsi_desc .cont03{margin-top:120px;padding:120px 0;background:var(--pale-b)}
#designView .dsi_desc .cont03 .range_free{max-width:var(--mainsize);margin:0 auto}
#designView .dsi_desc .cont03 ul li{opacity:0!important;display:flex;background:var(--pale-b);padding:20px 0;transition:0s}
#designView .dsi_desc .cont03 ul li .img{position:relative;width:56%;margin-left:auto;text-align:center}
#designView .dsi_desc .cont03 ul li .img img{border-radius:12px;box-wpadow:6px 6px 18px rgba(0,0,0,.09)}
#designView .dsi_desc .cont03 ul li .img .rlt{transition-duration:.7s}
#designView .dsi_desc .cont03 ul li .img .abs{position:absolute;opacity:0;margin-left:50px;left:50%;transform:translateX(-50%)}
#designView .dsi_desc .cont03 ul li .img .abs.free-1{top:100px}
#designView .dsi_desc .cont03 ul li .img .abs.free-2{top:150px}
#designView .dsi_desc .cont03 ul li .img .abs.free-3{top:160px}
#designView .dsi_desc .cont03 ul li .img .abs.free-4{top:200px}
#designView .dsi_desc .cont03 ul li .img .abs.free-5{top:170px}
#designView .dsi_desc .cont03 ul li .img .abs.free-6{top:250px}
#designView .dsi_desc .cont03 ul li .txt{padding:80px 0}
#designView .dsi_desc .cont03 ul li .txt span{font-size:20px;font-weight:600;color:var(--primary)}
#designView .dsi_desc .cont03 ul li .txt p{opacity:0;transform:translateY(50px);margin:25px 0 40px;font-size:38px;font-weight:700;line-height:1.3;white-space:pre-line;color:var(--dark)}
#designView .dsi_desc .cont03 ul li .txt div{white-space:pre-line}
#designView .dsi_desc .cont03 ul li dl dd{margin-left:28px;text-indent:-28px;white-space:pre-line}
#designView .dsi_desc .cont03 ul li dl dd+dd{margin-top:10px}
#designView .dsi_desc .cont03 ul li dl dd > svg{vertical-align:middle;width:20px;height:20px;margin-right:8px;color:#aaa}
#designView .dsi_desc .cont03 ul li dl dd a{color:#777;text-decoration:underline;transition:all .25s}
#designView .dsi_desc .cont03 ul li dl dd a svg{vertical-align:1px;width:16px;height:16px;margin-left:2px;stroke-width:2.5px}
#designView .dsi_desc .cont03 ul li.on{opacity:1!important}
#designView .dsi_desc .cont03 ul li.on a{pointer-events:auto}
#designView .dsi_desc .cont03 ul li.on .txt p{opacity:1;transform:translateY(0)}
#designView .dsi_desc .cont03 ul li.on .rlt{opacity:.5;transition:all .7s .7s}
#designView .dsi_desc .cont03 ul li.on .abs{opacity:1;margin-left:0;transition:all .7s .6s}
#designView .dsi_desc .cont03 .pager{position:absolute;bottom:130px;left:0;z-index:101}
#designView .dsi_desc .cont03 .pager span{opacity:.12;width:12px;height:12px;margin:0}
#designView .dsi_desc .cont03 .pager span.on{opacity:1;background:var(--primary)}
#designView .dsi_desc .cont03 .pager span+span{margin-left:22px}
/* 관리자모드 */
#designView .dsi_desc .cont04{padding:140px 0}
#designView .dsi_desc .cont04 .adm_area{max-width:var(--mainsize);margin:0 auto}
#designView .dsi_desc .cont04 ul li{opacity:0!important;display:flex;transition:0s}
#designView .dsi_desc .cont04 ul li .img{overflow:hidden;opacity:0;position:relative;transform:translateX(50px);margin-left:auto;border-radius:16px;border:6px solid var(--dark)}
#designView .dsi_desc .cont04 ul li .txt{padding:60px 0}
#designView .dsi_desc .cont04 ul li .txt span{font-size:20px;font-weight:600;color:var(--primary)}
#designView .dsi_desc .cont04 ul li .txt p{opacity:0;transform:translateY(50px);margin:25px 0 40px;font-size:38px;font-weight:700;line-height:1.3;white-space:pre-line;color:var(--dark)}
#designView .dsi_desc .cont04 ul li .txt div{white-space:pre-line}
#designView .dsi_desc .cont04 ul li.on{opacity:1!important}
#designView .dsi_desc .cont04 ul li.on a{pointer-events:auto}
#designView .dsi_desc .cont04 ul li.on .txt p{opacity:1;transform:translateX(0)}
#designView .dsi_desc .cont04 ul li.on .img{opacity:1;transform:translateY(0);transition:all .7s .2s}
#designView .dsi_desc .cont04 .pager{position:absolute;bottom:110px;left:0;z-index:101}
#designView .dsi_desc .cont04 .pager span{opacity:.12;width:12px;height:12px;margin:0}
#designView .dsi_desc .cont04 .pager span.on{opacity:1;background:var(--primary)}
#designView .dsi_desc .cont04 .pager span+span{margin-left:22px}
#designView .dsi_desc .cont04 .num07 .ps{font-size:13px}

/* 제작절차 */
#designView .dsi_desc .cont05{padding:140px 0;background:var(--pale-b)}
#designView .dsi_desc .cont05 .tit{margin-bottom:160px;text-align:center}
#designView .dsi_desc .cont05 .tit span{font-size:20px;font-weight:600;color:var(--primary)}
#designView .dsi_desc .cont05 .tit p{margin:25px 0 40px;font-size:38px;font-weight:700;line-height:1.3;white-space:pre-line;color:var(--dark)}
@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 .dsi_desc .desc_tabs li:not(.on) a:hover{color:var(--primary)}
#designView .dsi_desc .cont01 ul li:hover{box-wpadow:6px 6px 18px rgba(0,0,0,.08)}
#designView .dsi_desc .cont03 ul li.on a:hover{color:#111}
}
@media(max-width:1340px){
#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 .dsi_desc .cont02{padding:0 15px;border:none}
#designView .dsi_desc .cont03{padding:120px 0 120px 15px}
#designView .dsi_desc .cont03 ul li .img{width:50%;margin-right:20px}
#designView .dsi_desc .cont03 ul li .img img{max-width:100%}
#designView .dsi_desc .cont03 ul li .img .rlt{max-width:80%}
#designView .dsi_desc .cont04{padding:120px 15px}
#designView .dsi_desc .cont04 ul li .txt{padding-top:60px}
#designView .dsi_desc .cont04 ul li .img{flex-wprink:0;width:60%}
#designView .dsi_desc .cont04 .pager{bottom:30px}
}
@media(max-width:1024px){
#designView{border-top:1px solid #e1e1e1}
#designView .design_info .left{width:52%}
#designView .dsi_thum h1{font-size:18px}
#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{padding-top:60px;font-size:15px}
#designView .dsi_desc .tit_area{padding:60px 15px}
#designView .dsi_desc .tit_area p{font-size:34px}
#designView .dsi_desc .tit_area span{font-size:18px}
#designView .dsi_desc .desc_tabs{margin-top:30px}
#designView .dsi_desc .desc_tabs li a{height:40px;padding:0 18px;font-size:17px;line-height:40px}
#designView .dsi_desc .cont01{padding:40px 0}
#designView .dsi_desc .cont01 ul li a{height:180px}
#designView .dsi_desc .cont01 ul li p{font-size:16px}
#designView .dsi_desc .cont03{margin-top:60px;padding:60px 15px}
#designView .dsi_desc .cont03 ul li .txt{padding:80px 0 0;font-size:16px}
#designView .dsi_desc .cont03 ul li .txt span{font-size:18px}
#designView .dsi_desc .cont03 ul li .txt p{font-size:32px}
#designView .dsi_desc .cont03 ul li dl dd{word-break:keep-all}
#designView .dsi_desc .cont03 .pager{bottom:auto;top:40px}
#designView .dsi_desc .cont03 .pager span{width:10px;height:10px}
#designView .dsi_desc .cont03 .pager span+span{margin-left:15px}
#designView .dsi_desc .cont04{padding:60px 15px}
#designView .dsi_desc .cont04 ul li .txt{padding:80px 0 0;font-size:16px}
#designView .dsi_desc .cont04 ul li .txt span{font-size:18px}
#designView .dsi_desc .cont04 ul li .txt p{font-size:32px}
#designView .dsi_desc .cont04 .pager{bottom:auto;top:40px}
#designView .dsi_desc .cont04 .pager span{width:10px;height:10px}
#designView .dsi_desc .cont04 .pager span+span{margin-left:15px}
#designView .dsi_desc .cont04 ul li .txt div{white-space:normal;word-break:keep-all}
#designView .dsi_desc .cont05{padding:60px 0}
#wpProcess .top_area{padding:60px 0}
#designView .dsi_desc .cont05 .tit{margin-bottom:60px}
#designView .dsi_desc .cont05 .tit p{font-size:34px}
}
@media(max-width:768px){
#designView .design_info{display:block}	
#designView .design_info .left{width:100%}
#designView .dsi_thum h1{margin-bottom:20px}
#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-wprink: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{padding-top:40px;font-size:14px}
#designView .dsi_desc .tit_area{padding:40px 15px}
#designView .dsi_desc .tit_area p{margin-bottom:15px;font-size:24px}
#designView .dsi_desc .tit_area span{font-size:16px;white-space:normal;word-break:keep-all}
#designView .dsi_desc .desc_tabs{margin-top:20px;padding:5px 0}
#designView .dsi_desc .desc_tabs li+li{margin:0}
#designView .dsi_desc .desc_tabs li a{height:35px;padding:0 15px;font-size:14px;line-height:35px}
#designView .dsi_desc .cont01{padding:20px 0 60px}
#designView .dsi_desc .cont01 ul{column-gap:0}
#designView .dsi_desc .cont01 ul li a{height:110px;padding-bottom:0}
#designView .dsi_desc .cont01 ul li p{font-size:14px;word-break:keep-all;line-height:1.4}
#designView .dsi_desc .cont03{margin-top:40px;padding:30px 15px 40px}
#designView .dsi_desc .cont03 ul li{flex-flow:column}	
#designView .dsi_desc .cont03 ul li .txt{padding:30px 0;font-size:14px;text-align:center}
#designView .dsi_desc .cont03 ul li .txt span{font-size:16px}
#designView .dsi_desc .cont03 ul li .txt p{margin:15px 0;font-size:24px}
#designView .dsi_desc .cont03 ul li .img{order:-1;width:90%;margin:0 auto}
#designView .dsi_desc .cont03 ul li .img .abs.free-2{top:10%}
#designView .dsi_desc .cont03 ul li .img .abs.free-3{top:10%}
#designView .dsi_desc .cont03 ul li .img .abs.free-5{top:10%}
#designView .dsi_desc .cont03 ul li .img .abs.free-6{top:10%}
#designView .dsi_desc .cont03 ul li dl dd+dd{margin-top:8px}
#designView .dsi_desc .cont03 .pager{top:auto;bottom:0;text-align:center}
#designView .dsi_desc .cont04{padding:40px 15px}
#designView .dsi_desc .cont04 ul li{flex-flow:column}	
#designView .dsi_desc .cont04 ul li .txt{padding:30px 0 40px;font-size:14px;text-align:center}
#designView .dsi_desc .cont04 ul li .txt span{font-size:16px}
#designView .dsi_desc .cont04 ul li .txt p{margin:15px 0;font-size:24px}
#designView .dsi_desc .cont04 ul li .txt div{padding:0 10%}
#designView .dsi_desc .cont04 ul li .img{order:-1;width:90%;margin:0 auto;border-width:3px}
#designView .dsi_desc .cont04 .pager{top:auto;bottom:0;text-align:center}
#designView .dsi_desc .cont05{padding:40px 0 60px}
#designView .dsi_desc .cont05 .tit{margin-bottom:30px}
#designView .dsi_desc .cont05 .tit span{font-size:16px}
#designView .dsi_desc .cont05 .tit p{margin:15px 0 0;font-size:24px}
}
@media(max-width:480px){
#designView{font-size:14px}	
#designView .dsi_thum h1{font-size:17px}
#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 .dsi_desc .tit_area p{white-space:normal;word-break:keep-all}
#designView .dsi_desc .cont01 ul{grid-template-columns:repeat(3, 1fr);gap:8px}
#designView .dsi_desc .cont01 ul li{overflow:hidden;border:1px solid #e1e1e1;border-radius:12px}
#designView .dsi_desc .cont01 ul li a{ transform:none!important;overflow:hidden;padding:0 5px 15px 5px}
#designView .dsi_desc .cont01 ul li p{font-size:13px}
#designView .dsi_desc .cont03 ul li .img{width:95%}
#designView .dsi_desc .cont03 ul li .img img{box-wpadow:3px 3px 10px rgba(0,0,0,.09)}
#designView .dsi_desc .cont04 ul li .img{width:95%}
#designView .dsi_desc .cont04 ul li .txt div{padding:0}
}
@media(max-width:420px){
#designView .dsi_desc .desc_tabs{background:rgba(255,255,255,.95)}	
#designView .dsi_desc .desc_tabs li+li{margin-left:12px}
#designView .dsi_desc .desc_tabs li a{position:relative;padding:0;font-weight:600}
#designView .dsi_desc .desc_tabs li.on a{color:var(--primary);background:none}
#designView .dsi_desc .desc_tabs li.on a:after{display:block;content:"";position:absolute;left:0;bottom:-5px;width:100%;height:2px;background:var(--primary)}
}
@media(max-width:380px){
#designView .dsi_desc .cont03 ul li .txt{text-align:left}
#designView .dsi_desc .cont03 ul li .txt span{display:block;text-align:center}
#designView .dsi_desc .cont03 ul li .txt p{text-align:center}	
}

/* ==================================== 견적서 */
#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}
}

/* ==================================== 포트폴리오 */
#wpPortfolio{line-height:1.8}
#wpPortfolio.main{padding:100px 0;background:#eff1f4}
#wpPortfolio.main .tit{margin-bottom:60px;text-align:center;font-weight:700}
#wpPortfolio.main .tit span{font-size:20px;color:var(--primary)}
#wpPortfolio.main .tit p{font-size:32px;line-height:1.4;color:#111;white-space:pre-line;word-break:keep-all}
#wpPortfolio .stit{display:flex;align-items:center;max-width:var(--mainsize);margin:0 auto 15px;font-size:28px;font-weight:700;color:#111}
#wpPortfolio .sch_area{padding:20px 0 35px;border-top:1px solid #e1e1e1}
#wpPortfolio .sch_area .tit{margin:40px 0 30px;font-size:40px;font-weight:700;color:var(--dark);text-align:center}
#wpPortfolio .sch_area .kwd{display:flex;justify-content:center;flex-wrap:wrap;max-width:var(--mainsize);margin:0 auto}
#wpPortfolio .sch_area .kwd a{height:40px;margin:4px;padding:.0 18px;border:1px solid #f5f5f5;font-size:15px;font-weight:500;color:#111;letter-spacing:-.2px;line-height:40px;border-radius:30px;background:#f5f5f5;transition:all .2s}
#wpPortfolio .sch_area .kwd a.on{border-color:var(--primary);color:#fff;background:var(--primary)}
#wpPortfolio ul{display:grid;grid-template-columns:repeat(3, 1fr);column-gap:20px;row-gap:30px;max-width:var(--mainsize);margin:0 auto}
#wpPortfolio.sub ul{grid-template-columns:repeat(4, 1fr);column-gap:30px}
#wpPortfolio ul li{overflow:hidden;position:relative;border-radius:12px;border:1px solid #e1e1e1;background:#fff;transition:all .25s}
#wpPortfolio ul li .cate{display:block;position:absolute;left:12px;top:12px;z-index:1;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)}
#wpPortfolio ul li img{position:relative;width:100%;transition:all .25s}
#wpPortfolio ul li .mask{opacity:0;display:flex;flex-flow:column;justify-content:center;align-items:center;position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;font-weight:600;color:#fff;background:rgba(0,0,0,.7);transition:all .25s} 
#wpPortfolio ul li .mask span{font-size:14px}
#wpPortfolio ul li .mask p{overflow:hidden;text-overflow:ellipsis;width:100%;font-size:18px;line-height:2.2;text-align:center;white-space:nowrap}
#wpPortfolio ul li .mask div{display:flex;margin-top:15px}
#wpPortfolio ul li .mask div a{width:120px;height:42px;border-radius:4px;border:1px solid #fff;font-size:15px;text-align:center;line-height:40px;color:#fff;transition:all .25s} 
#wpPortfolio ul li .mask div a+a{margin-left:6px}
#wpPortfolio ul.grid{row-gap:unset;grid-auto-rows:10px}
#wpPortfolio ul.grid li{width:auto;margin-bottom:0}
#wpPortfolio ul.grid li+li{margin-left:0}
#wpPortfolio .more{display:block;width:195px;height:58px;margin:50px auto 0;border:1px solid #e1e1e1;border-radius:30px;font-size:15px;font-weight:600;line-height:56px;;text-align:center;color:#111;transition:all .25s}
#wpPortfolio .more i{margin-left:15px}
#wpPortfolio .pg_wrap{margin-top:50px}
@media(hover:hover){
#wpPortfolio .sch_area .kwd a:not(.on):hover{border-color:var(--primary);color:var(--primary);background:#fff}
#wpPortfolio ul li:hover .mask{opacity:1}
#wpPortfolio ul li .mask div a:hover{color:var(--primary);background:#fff}
#wpPortfolio .more:hover{border-color:#111}
}
@media(max-width:1340px){
#wpPortfolio .stit{padding:0 15px}	
#wpPortfolio ul{padding:0 15px}
}
@media(max-width:1200px){
#wpPortfolio .sch_area{padding:20px 15px 40px}
}
@media(max-width:1024px){
#wpPortfolio .sch_area .kwd a{height:35px;font-size:14px;line-height:35px}
#wpPortfolio.sub ul{grid-template-columns:repeat(3, 1fr)}
}
@media(max-width:768px){
#wpPortfolio{margin-bottom:60px}	
#wpPortfolio.main{padding:60px 0;margin:0}
#wpPortfolio.main .tit{margin-bottom:30px;padding-right:15px}
#wpPortfolio.main .tit span{font-size:16px}
#wpPortfolio.main .tit p{font-size:24px;letter-spacing:-.5px}
#wpPortfolio .stit{font-size:24px}
#wpPortfolio .sch_area .tit{margin:40px 0 20px;font-size:32px;line-height:1.4}
#wpPortfolio .sch_area .kwd{overflow-x:scroll;overflow-y:hidden;display:grid;justify-content:start;grid-template-columns:repeat(6, 1fr);gap:4px}
#wpPortfolio .sch_area .kwd a{height:35px;padding:0 15px;margin:0;font-size:13px;white-space:nowrap;line-height:33px}
#wpPortfolio ul{grid-template-columns:repeat(2, 1fr);gap:12px}
#wpPortfolio.sub ul{grid-template-columns:repeat(2, 1fr);column-gap:12px}
#wpPortfolio ul li .fake-area{display:flex;flex-flow:column}
#wpPortfolio ul li .mask{opacity:1;position:relative;top:auto;left:auto;height:auto;padding:12px;border-top:1px solid #e1e1e1;color:#111;background:#fff}
#wpPortfolio ul li .mask p{font-weight:700;line-height:1.8}
#wpPortfolio ul li .mask div{width:100%;margin-top:10px}
#wpPortfolio ul li .mask div a{width:50%;height:40px;border-color:#e1e1e1;font-size:14px;line-height:38px;color:#999}
#wpPortfolio ul li .mask div a+a{margin-left:4px}
#wpPortfolio ul li:nth-child(9){display:none}
#wpPortfolio ul li img{order:-1}
#wpPortfolio .more{width:180px;height:50px;margin-top:40px;line-height:48px}
}
@media(max-width:480px){
#wpPortfolio.main .tit p{font-size:19px;white-space:normal}
#wpPortfolio .sch_area{padding-bottom:25px}
#wpPortfolio .sch_area .tit{margin:20px 0;font-size:26px}
#wpPortfolio .sch_area .kwd a{height:26px;padding:0 12px;margin:0;font-size:11px;line-height:24px}
#wpPortfolio ul li .cate{top:8px;left:8px;height:24px;padding:0 10px;font-size:11px;line-height:25px}	
#wpPortfolio ul li .mask span{font-size:13px}
#wpPortfolio ul li .mask p{font-size:16px}
#wpPortfolio ul li .mask div a{height:30px;font-size:12px;line-height:28px}
}
@media(max-width:380px){
#wpPortfolio ul{grid-template-columns:repeat(1, 1fr)}
#wpPortfolio.sub ul{grid-template-columns:repeat(1, 1fr)}
}