@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');/* regular-400, medium-500, semibold-600, bold-700  */ 

*{-webkit-text-size-adjust:none}
body{font-size:0.81em;font-family:'Pretendard'!important}
h1, h2, h3, h4, h5, h6, input, button, textarea, select{font-family:'Pretendard'!important} 
figure{margin:0}

/* ===================== 공통*/
#wp_wrapper{position:relative}
:root{--primary:#0067f4;--primary-h:#1779ff;--primary10:rgba(0,103,244,.10);--primary45:rgba(0,103,244,.45);--primary50:rgba(0,103,244,.5);--primary90:rgba(0,103,244,.9);--dark:#1f242b;--light:#2481ff;--pale:#f5f6f8;--pale-b:#f8f8fb;--pink:#ed145b;--mainsize:1320px}
.dft_btn{border:none;border-radius:4px;background:none;font-family:'Pretendard'}
input.dft_input, .dft_txt{height:42px;padding:0 10px;border:1px solid #e1e1e1;border-radius:4px;font-size:14px;font-weight:500;transition:all .2s;font-family:'Pretendard'}
input.dft_input:focus, .dft_txt:focus, input.dft_input:active, .dft_txt:active{box-wpadow:none;outline:none;box-wpadow:none;border-color:#aaa!important}
.dft_txt{padding:10px}
@media(max-width:768px){
input.dft_input, .dft_txt{height:38px}	
}

/* 하단 고정 문의 */
#btmInq{position:fixed;bottom:0;z-index:21;width:100%;height:70px;border-top:1px solid #ddd;color:#222;background:#f2f2f2;white-space:nowrap}
#btmInq .inner{display:flex;align-items:center;gap:30px;max-width:1440px;height:100%;margin:0 auto}
#btmInq .flex{display:flex;align-items:center;gap:15px}
#btmInq .ftit{font-size:22px;font-weight:700}
#btmInq form{flex:1}  
#btmInq ul{display:flex;gap:20px}
#btmInq ul li label{font-size:16px;font-weight:600}
#btmInq ul li input[type=text]{max-width:160px;height:40px;margin-left:8px;padding:0 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;transition:all .2s}
#btmInq ul li input[type=text]:focus{border-color:#aaa!important;outline:none;box-wpadow:none}
#btmInq .sbm_area{display:flex;align-items:center;gap:15px;flex:1}
#btmInq .sbm_area .pvc_ck{font-size:13px;font-weight:500;line-height:1.4}
#btmInq .sbm_area .wp_ck{width:16px;height:16px;border:none;border-radius:4px;background:#ccc;cursor:pointer;-webkit-appearance:none;-ms-appearance:none}
#btmInq .sbm_area .wp_ck:checked{background:url('/wp_img/common/ck.png') center no-repeat #111;background-size:8px}
#btmInq .sbm_area label span{color:var(--primary)}
#btmInq .sbm_area label{cursor:pointer;white-space:pre-line}
#btmInq .sbm_area a{text-decoration:underline}
#btmInq .sbm_area button{max-width:180px;width:100%;height:42px;padding:0 10px;border:none;border-radius:6px;font-size:16px;font-weight:600;color:#fff;background:#333;transition:all .2s}
#btmInq dl{display:flex;align-items:center;gap:10px;margin-left:auto}
#btmInq dl dt{display:flex;align-items:center;gap:10px}
#btmInq dl dt span{display:flex;width:42px;height:42px;border-radius:6px;background:var(--primary)}
#btmInq dl dt svg{width:22px;height:22px;margin:auto;fill:#fff;stroke:none}
#btmInq dl dd{font-size:22px;font-weight:800;color:var(--primary)}
@media(hover:hover){
#btmInq .sbm_area button:hover{background:#222}
}
@media(max-width:1480px){
#btmInq .inner{gap:15px;padding:0 15px}
}
@media(max-width:1380px){
#btmInq .flex{gap:10px}
#btmInq .ftit{font-size:18px}    
#btmInq ul{gap:10px}
#btmInq ul li label{font-size:15px}
#btmInq ul li input[type=text]{width:10vw;margin-left:3px}
#btmInq .sbm_area button{width:12vw}
#btmInq dl dd{font-size:20px}
}
@media(max-width:1024px){
#btmInq .inner{gap:10px}    
#btmInq .ftit{font-size:16px}     
#btmInq ul li label{font-size:14px}
#btmInq .sbm_area .pvc_ck{font-size:12px}
#btmInq .sbm_area button{font-size:15px}
#btmInq dl dd{font-size:18px}
}
@media(max-width:768px){
#btmInq{height:auto;padding:8px 0}    
#btmInq .inner{display:block}
#btmInq .flex{width:100%}  
#btmInq ul li label{font-size:13px}
#btmInq ul li input[type=text]{width:25vw;height:34px}
#btmInq .sbm_area{flex-direction:column;flex:1;gap:3px}
#btmInq .sbm_area .wp_ck{width:14px;height:14px}
#btmInq .sbm_area .pvc_ck{position:absolute;top:12px;right:15px}
#btmInq .sbm_area label{white-space:unset;}
#btmInq .sbm_area button{max-width:none;width:100%;height:34px;font-size:14px}
#btmInq dl{display:none}    
}    
@media(max-width:380px){
#btmInq .inner{padding:0 10px}  
#btmInq .flex{gap:5px}  
#btmInq ul{gap:5px}
#btmInq ul li input[type=text]{margin:0}
#btmInq .sbm_area button{font-size:13px}
}

/* ===================== 상담 팝업(일반/디자인/포폴) */
#modal{position:fixed;top:0;left:0;z-index:1000;width:100%;height:100%;padding:0 20px;font-size:16px;font-weight:400;line-height:1.65;color:#777;background:rgba(0,0,0,.65);font-family:'Pretendard'}
#modal .cont{position:relative;top:50%;transform:translateY(-50%);max-width:max-content;width:100%;max-height:80vh;margin:0 auto;padding:35px 40px 40px;border-radius:16px;background:#fff}
#modal .close{position:absolute;right:25px;top:25px}
#modal .tit{margin-bottom:20px;font-size:24px;font-weight:700;color:#111}
#modal .flex{display:flex;align-items:center}
#modal .right{width:380px}
#modal ul li{display:flex;align-items:baseline}
#modal ul li+li{margin-top:10px}
#modal ul li label{width:75px;flex-wprink:0;font-size:15px;font-weight:600;color:#111}
#modal ul li .dft_input{width:100%}
#modal ul li .dft_txt{width:100%;height:60px}
#modal .pvc_ck{display:flex;align-items:center;justify-content:center;margin:20px 0;font-size:15px;font-weight:500}
#modal .pvc_ck .wp_ck{width:16px;height:16px;border:none;border-radius:4px;background:#e5e5e5;cursor:pointer;-webkit-appearance:none;-ms-appearance:none}
#modal .pvc_ck .wp_ck:checked{background:url('/wp_img/common/ck.png') center no-repeat #111;background-size:8px}
#modal .pvc_ck label{margin:0 5px;cursor:pointer;font-size:15px;font-weight:500;color:#111}
#modal .pvc_ck label span{color:var(--primary)}
#modal .pvc_ck a{vertical-align:middle;color:#111;text-decoration:underline}
#modal .btn_area{display:flex;width:80%;margin:0 auto}
#modal .btn_area button{height:50px;font-size:15px;font-weight:600}
#modal .btn_area button.cancel{width:30%;color:#333;background:#e9e9e9}
#modal .btn_area button.comp{width:70%;margin-left:8px;color:#fff;background:var(--primary-h);transition:all .25s}
/* 디자인상담 */
#modal .cont.design{max-width:820px}
#modal .thum{overflow:hidden;width:50%;margin-right:30px;border-radius:12px;border:1px solid #e1e1e1}
#modal .thum img{width:100%}
#modal .design .right{width:300px}
#modal .design .code{display:flex;margin-bottom:12px}
#modal .design .code span{width:90px;flex-wprink:0;font-size:15px;font-weight:600;color:#111}
#modal .design .code b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:20px;line-height:1;color:var(--primary)}
#modal .design ul li label{width:90px}
#modal .design  .pvc_ck{margin:15px 0}
#modal .design .btn_area{width:100%}
#modal .design .btn_area button.cancel{width:82px}
@media(hover:hover){
#modal .btn_area button.comp:hover{background:var(--primary)}
}
@media(max-width:768px){
#modal .cont{overflow-y:scroll;padding:20px}
#modal .close{top:20px;right:20px}
#modal .tit{margin-bottom:10px;font-size:18px}
#modal ul li{display:block}
#modal ul li label{font-size:13px}
#modal .pvc_ck{margin:10px 0 15px;font-size:13px}
#modal .pvc_ck label{font-size:13px}
#modal .btn_area{width:100%}
#modal .btn_area button{height:45px;font-size:14px}
#modal .thum{width:60%;margin-right:20px}
#modal .design{align-items:flex-start}
#modal .design .code{align-items:center}
#modal .design .code span{width:72px;font-size:14px}
#modal .design .code b{font-size:16px}
}
@media(max-width:480px){
#modal .design{display:block}
#modal .thum{width:100%;margin-bottom:15px}
#modal .design .right{width:100%}
#modal .design .btn_area button.cancel{width:30%}
}

#eventQuick{position:fixed;top:50%;left:0;z-index:120;transform:translateY(-50%);color:#fff}
#eventQuick ul{width:140px;padding:8px;border-radius:0 8px 8px 0;background:#fff;box-wpadow:4px 4px 20px rgba(0,0,0,.2)}
#eventQuick ul li+li{margin-top:8px}
#eventQuick ul li img{width:100%;border-radius:8px}
#eventQuick ul li a{cursor:pointer}
@media(max-width:1720px){#eventQuick ul{width:130px}}
@media(max-width:1200px){#eventQuick{display:none}}
@media(max-height:780px){#eventQuick{display:none}}


/* ===================== 팝업레이어 */
#wp_pop{position:absolute;left:0;top:0;z-index:1001;width:100%;height:100%;padding:0 12px;background:rgba(0,0,0,.65);font-family:'Pretendard'}
#wp_pop .inner{overflow:hidden;position:relative;top:10vh;max-width:530px;width:100%;margin:0 auto}
#wp_pop .wp_pop_slider li a{display:block;cursor:pointer}
#wp_pop .wp_pop_slider li .cont{position:absolute;left:0;top:0;z-index:-1}
#wp_pop .wp_pop_slider li img{width:100%}
#wp_pop .wp_pop_pager{display:flex;justify-content:space-between;background:#fff}
#wp_pop .wp_pop_pager span{flex-grow:1;display:flex;justify-content:center;align-items:center;opacity:1;width:auto;height:50px;margin:0;border-radius:0;font-size:15px;font-weight:600;color:#999;background:none;font-family:'Pretendard'}
#wp_pop .wp_pop_pager span+span{border-left:1px solid #e1e1e1}
#wp_pop .wp_pop_pager span.active{color:#fff;background:#111}
#wp_pop .wp_pop_ft{overflow:hidden;display:flex}
#wp_pop .wp_pop_ft button{padding:12px 0;border:none;font-size:15px;font-weight:600;color:#fff;background:none;font-family:'Pretendard' }
#wp_pop .wp_pop_ft .wp_pop_close{position:relative;z-index:101;margin-left:auto;padding:12px 20px;border-top:1px solid #ddd;color:#222;background:#fff}
@media(max-width:1024px){
#wp_pop .wp_pop_pager span{font-size:14px}	
}
@media(max-width:768px){
#wp_pop .wp_pop_pager{position:absolute;bottom:15px;z-index:101;justify-content:center;border:none;background:none}
#wp_pop .wp_pop_pager span{flex-grow:unset;width:6px;height:6px;border-radius:50%;font-size:0;background:#ddd}
#wp_pop .wp_pop_pager span+span{margin-left:5px;border:none}
#wp_pop .wp_pop_ft button{position:relative;z-index:999;padding:10px 0;font-size:12px}
#wp_pop .wp_pop_ft .wp_pop_close{padding:10px 15px;font-size:13px}
}

/* ===================== 페이징 */
.pg_wrap{margin:20px 0}
.pg_wrap .pg{display:flex;justify-content:center;font-size:12px;font-weight:600;text-align:center;font-family:'Pretendard'}
.pg_page, .pg_current{min-width:28px;height:28px;padding:0 5px;margin:0 2px;border-radius:3px;font-weight:600;color:#999;line-height:28px;background:#f2f2f2;border:none;font-family:'Pretendard'}
.pg_current{color:#fff;background:var(--dark)}
.pg_start{text-indent:-999px;overflow:hidden;background:url('/img/btn_first.gif') no-repeat center #fff;border:1px solid #e1e1e1}
.pg_prev{text-indent:-999px;overflow:hidden;background:url('/img/btn_prev.gif') no-repeat center #fff;border:1px solid #e1e1e1}
.pg_end{text-indent:-999px;overflow:hidden;background:url('/img/btn_end.gif') no-repeat center #fff;border:1px solid #e1e1e1}
.pg_next{text-indent:-999px;overflow:hidden;background:url('/img/btn_next.gif') no-repeat center #fff;border:1px solid #e1e1e1}
@media(max-width:768px){
.pg_page, .pg_current{min-width:24px;height:24px;line-height:24px}
}

/* ===================== 사이드배너 */
#sideBnr{position:fixed;top:40%;left:0;z-index:101;transform:translateY(-50%)}
#sideBnr ul{width:200px;padding:4px 4px 4px 0px;border-radius:0 8px 8px 0;background:#fff;box-wpadow:4px 4px 16px rgba(0,0,0,.2)}
#sideBnr ul li+li{margin-top:8px}
#sideBnr ul li img{width:100%;border-radius:0 8px 8px 0;}
@media(max-width:1720px){
#sideBnr ul{width:170px}
}
@media(max-width:1660px){
#sideBnr ul{width:140px}
}
@media(max-width:1200px){
#sideBnr{display:none}	
}

/* ===================== 상단 회원 카운트 */
#hdPop{display:flex;justify-content:center;align-items:center;position:relative;height:58px;font-size:15px;font-weight:500;color:#fff;background:var(--primary);font-family:'Pretendard'}
#hdPop dl{display:flex;align-items:center}
#hdPop dl+dl{margin-left:40px}
#hdPop dl dt{height:32px;margin-right:15px;padding:0 18px;border-radius:20px;font-weight:700;color:var(--primary);line-height:32px;background:#fff}
#hdPop dl dd{color:rgba(255,255,255,.75)}
#hdPop dl dd+dd:before{display:inline-block;vertical-align:3px;content:"";width:4px;height:4px;border-radius:50%;margin:0 15px;background:#fff}
#hdPop dl dd span{color:#fff}
#hdPop dl dd span:before{display:inline-block;vertical-align:0;content:"";width:1px;height:10px;margin:0 12px;background:rgba(255,255,255,.3)}
#hdPop a{height:32px;margin-left:30px;padding:0 18px;border-radius:20px;font-size:14px;font-weight:600;color:#fff;line-height:32px;background:rgba(0,0,0,.15);transition:all .2s}
#hdPop a:hover{background:rgba(0,0,0,.25)}
#hdPop a i{padding-left:12px}
#hdPop .close{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:#fff}
#hdPop .close svg{width:26px;height:26px;transition:all .2s}
@media(hover:hover){#hdPop .close:hover svg{transform:rotate(90deg)}}
@media (max-width:1170px){
#hdPop{display:none!important}
}

/* ===================== HEADER  */
#wp_hd{position:sticky;top:0;z-index:25;width:100%} 
#wp_hd.design{position:relative}

/* ===================== CONTAINER */
#wp_container{position:relative;z-index:15}

/* ===================== MAIN */
#wpSection{position:relative;z-index:16;font-size:15px;font-weight:500;color:#888;font-family:'Pretendard'}

/* ===================== FOOTER */
#fixBtns{position:fixed;right:20px;bottom:80px;z-index:24;transition:all .2s}
#fixBtns a, #fixBtns button{display:block;width:53px;height:53px;border-radius:50%;text-align:center;color:var(--dark);background:#fff;cursor:pointer;box-wpadow:2px 2px 6px rgba(0,0,0,.1);transition:all .1s}
#fixBtns .kakao{margin-top:8px;line-height:53px;background:#ffdf2c}
#fixBtns .kakao img{width:28px}
#fixBtns .tel{font-size:25px;color:#fff;line-height:53px;background:#333}
#fixBtns button{margin-top:8px}
#fixBtns button svg{margin-top:2px}
#fixBtns button.inq_btn{color:#fff;background:var(--primary)}
#fixBtns button.inq_btn svg{width:21px;height:21px}
#wp_ft{position:relative;z-index:20;padding-bottom:70px;border-top:1px solid #e1e1e1;font-size:14px;font-weight:500;line-height:1.8;color:#aaa}
#wp_ft .link_wrap{display:flex;align-items:center;position:relative;max-width:var(--mainsize);height:65px;margin:0 auto}
#wp_ft .link_wrap .fam_btn{display:flex;align-items:center;width:162px;height:40px;padding:0 20px 0 25px;margin-left:auto;border-radius:20px;font-size:14px;font-weight:500;color:#777;background:var(--pale);transition:all .2s}
#wp_ft .link_wrap .fam_btn svg{width:15px;height:15px;margin:0 0 1px auto;transition:all .2s}
#wp_ft .link_wrap .fam_btn.on svg{transform:rotate(135deg)}
#wp_ft .link_wrap .fam_site{display:none;position:absolute;right:0;top:-138px;width:162px;padding:16px 22px;border-radius:12px;background:var(--pale)}
#wp_ft .link_wrap .fam_site a{display:flex;align-items:center;color:#777;line-height:2}
#wp_ft .link_wrap .fam_site a svg{opacity:0;width:15px;height:15px;margin:0 0 1px 5px}
#wp_ft .links{display:flex;align-items:center}
#wp_ft .links a, #wp_ft .links .prv{font-size:14px;font-weight:500;color:#777}
#wp_ft .links a+a{margin-left:25px}
#wp_ft .links .prv{margin-left:25px}
#wp_ft .info{padding:50px calc((100% - var(--mainsize)) / 2);background:var(--pale)}
#wp_ft .info p{margin-top:10px}
@media(hover:hover){
#fixBtns .kakao:hover, #fixBtns button:hover{box-wpadow:4px 4px 9px rgba(0,0,0,.15)}
#wp_ft .link_wrap .fam_btn:hover{color:#111}
#wp_ft .link_wrap .fam_site a:hover{color:#111}
#wp_ft .link_wrap .fam_site a:hover svg{opacity:1}	
#wp_ft .links a:hover, #wp_ft .prv:hover{color:#111}
}
@media(max-width:1340px){
#wp_ft .link_wrap{padding:0 15px}
#wp_ft .info{padding:50px 15px}
}
@media(max-width:768px){
#wpSection{font-size:14px}
#fixBtns{right:10px}	
#fixBtns a, #fixBtns button{width:45px;height:45px}
#fixBtns .kakao{line-height:45px}
#fixBtns .kakao img{width:24px}
#fixBtns .tel{font-size:20px;line-height:46px}
#fixBtns button.inq_btn svg{width:18px;height:18px}
}
@media(max-width:480px){
#wp_ft{font-size:13px}
#wp_ft .link_wrap{display:block;height:auto;padding:15px}
#wp_ft .link_wrap .links{justify-content:center}
#wp_ft .link_wrap .fam_btn{width:100%;margin-top:15px}
#wp_ft .link_wrap .fam_site{top:-98px;right:15px;width:calc(100% - 30px)}
#wp_ft .links a+a{margin-left:15px}
#wp_ft .info{padding:40px 15px 30px;line-height:1.6}	
#wp_ft .info span{display:block}
}