@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
*{-webkit-text-size-adjust:none}
body{background:#fff;font-size:0.81em;font-family:'Inter'!important}
h1, h2, h3, h4, h5, h6, input, button, textarea, select{font-family:'Inter'!important}
figure{margin:0}
a{color:#222}

:root{--primary:#006AFF;--pale:#eef5ff;--error:#f34a4a;--dft-space:70px;--main-size:1320px;--safe-b: env(safe-area-inset-bottom, 0px)}
@media(max-width:1024px){
body.scroll-lock{overflow:hidden;height:100vh}
}

/* defalt */
.dft-input{border:none;outline:none;background:none}
.dft-btn{border:none;background:none}
.dft-txtarea{border:none;background:none}

/* common ------------------------------------------------------------------------------------------- */ 
.cm-ws-pl{white-space:pre-line}
.cm-ellipsis-1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-ellipsis-2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cm-color-prm{color:var(--primary)}
.cm-tooltip{position:relative;display:inline-flex;cursor:help}
.cm-tooltip svg{width:16px;height:16px}
.cm-tooltip::after{opacity:0;pointer-events:none;content:attr(data-tooltip);position:absolute;top:calc(100% + 10px);left:50%;z-index:1;transform:translateX(-50%);width:max-content;max-width:300px;padding:10px 15px;border-radius:6px;font-size:12px;font-weight:400;line-height:1.45;color:#fff;background:#aaa}
.cm-tooltip::before{opacity:0;pointer-events:none;display:block;content:"";position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;border-radius:2px;background:#aaa}
.cm-required{color:var(--error)}
@media(hover:hover){
.cm-tooltip:has(svg:hover)::after,.cm-tooltip:has(svg:hover)::before{opacity:1}
}

/* common - button */
.cm-btn-fill-small{height:28px;padding:0 15px;border-radius:6px;font-size:13px;font-weight:500;color:#fff;line-height:28px;text-align:center;background:#111}
.cm-btn-line-small{height:28px;padding:0 15px;border-radius:6px;border:1px solid #111;font-size:13px;font-weight:600;color:#111;line-height:26px;text-align:center}
.cm-btn-fill-base{height:40px;padding:0 15px;border-radius:6px;font-size:14px;font-weight:500;color:#fff;line-height:40px;text-align:center;background:#111}
.cm-btn-line-base{height:40px;padding:0 15px;border-radius:6px;border:1px solid #111;font-size:14px;font-weight:600;line-height:38px;color:#111;text-align:center}
.cm-btn-fill-medium{height:50px;padding:0 35px;border-radius:6px;font-size:15px;font-weight:500;color:#fff;line-height:50px;text-align:center;background:#111}
.cm-btn-line-medium{height:50px;padding:0 35px;border-radius:6px;border:1px solid #111;font-size:15px;font-weight:600;color:#111;line-height:48px;text-align:center}
.cm-btn-fill-large{height:65px;padding:0 35px;border-radius:6px;font-size:18px;font-weight:500;color:#fff;line-height:65px;text-align:center;background:#111}
.cm-btn-line-large{height:65px;padding:0 35px;border-radius:6px;border:1px solid #111;font-size:18px;font-weight:600;color:#111;line-height:63px;text-align:center}
.cm-btn-full{width:100%}
.cm-btn-fill-gray{background:#aaa}
.cm-btn-round{border-radius:50px}
.cm-btn-adm{padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;color:var(--error);background:#ffe9e9}
@media(max-width:768px){
.cm-btn-fill-small{height:25px;padding:0 12px;font-size:12px;line-height:25px}
.cm-btn-line-small{height:25px;padding:0 12px;font-size:12px;line-height:23px}
.cm-btn-fill-base{height:35px;padding:0 12px;font-size:13px;line-height:35px}
.cm-btn-line-base{height:35px;padding:0 12px;font-size:13px;line-height:33px}
.cm-btn-fill-large{height:55px;padding:0 25px;font-size:16px;line-height:55px}
.cm-btn-line-large{height:55px;padding:0 25px;font-size:16px;line-height:53px}
}
@media(max-width:480px){
.cm-btn-fill-medium{height:45px;font-size:14px;line-height:45px}    
.cm-btn-line-medium{height:45px;font-size:14px;line-height:43px}
.cm-btn-fill-large{height:50px;padding:0 20px;font-size:15px;line-height:50px}
.cm-btn-line-large{height:50px;padding:0 20px;font-size:15px;line-height:48px}
}

/* common - type */
.cm-type{gap:10px}
.cm-type li{height:36px;padding:0 8px;border-radius:6px;border:1px solid #e5e5e5;font-size:13px;color:#777;line-height:34px}

/* common - flex */
.cm-flex{display:flex}
.cm-flex-ai-ct{align-items:center}
.cm-flex-ai-bl{align-items:baseline}
.cm-flex-ai-st{align-items:flex-start}
.cm-flex-ai-end{align-items:end}
.cm-flex-jc-ct{justify-content:center}
.cm-flex-jc-end{justify-content:end}
.cm-flex-jc-sb{justify-content:space-between}
.cm-flex-col{display:flex;flex-direction:column}
.cm-inline-flex{display:inline-flex}
.cm-flex-wrap{flex-wrap:wrap}
.gap-8{gap:8px}

/* common - dropdown */
.cm-dropdown{position:relative}
.cm-dropdown-btn{gap:20px;height:40px;border:1px solid #e5e5e5;border-radius:6px;padding:0 12px 0 12px;font-size:14px;color:#111}
.cm-dropdown-btn svg{width:14px;height:14px}
.cm-dropdown-list{overflow:hidden;display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:10;width:max-content;border:1px solid #e5e5e5;border-radius:6px;animation:fadeIn .15s ease;background:#fff}
.cm-dropdown-list li{padding:10px 20px;font-size:14px;cursor:pointer;transition:background .15s}
.cm-dropdown-list li:hover{background:#f5f5f5}
.cm-dropdown.show .cm-dropdown-list{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* common - form*/
.cm-form .h2-area{margin-bottom:40px;font-size:13px;text-align:center;color:#777}
.cm-form .h2-area h2{margin-bottom:10px;color:#111}
.cm-form ul{gap:20px}
.cm-form ul li .name-group{gap:8px}
.cm-form .error-msg{font-size:12px;color:var(--error)}
.cm-form .flex-1{flex:1}
.cm-form .cm-label{display:flex;align-items:baseline;gap:4px;margin-bottom:2px;font-size:13px;font-weight:600}
.cm-form .cm-input, .cm-form .cm-select{width:100%}
.cm-form .cm-input:read-only{background:#f2f2f2}
.cm-form .has-btn{gap:8px}
.cm-form .has-btn button{min-width:30%}
.cm-form .btn-area{margin-top:40px}

/* common - form textarea */
.cm-txtarea{height:90px;padding:12px;border-radius:6px;border:1px solid #ddd;font-size:15px;font-weight:300;color:var(--secondary);transition:all .15s}
.cm-txtarea.full{width:100%}
.cm-txtarea:focus{border-color:#aaa;outline:none}

/* common - form - input */
.cm-input{height:40px;padding:0 16px;border-radius:6px;border:1px solid #ddd;font-size:14px;font-weight:500;color:#111;transition:all .15s}
.cm-input.readonly{background:#f5f5f5}
.cm-input.full{width:100%}
.cm-input:focus{border-color:#aaa;outline:none}
.cm-input.error{border-color:var(--error)}

/* common - form - select */
.cm-select{cursor:pointer;min-width:95px;height:40px;padding:0 30px 0 16px;border-radius:6px;border:1px solid #ddd;font-size:14px;font-weight:500;color:#111;-webkit-appearance:none;appearance:none;background:url(/sh_img/common/select_arr.png) calc(100% - 10px) center no-repeat #fff;background-size:16px;transition:all .15s}
.cm-select:focus{border-color:#aaa;outline:none}

/* common - form - checkbox */
.cm-input-ck-label{display:flex;align-items:center;gap:6px;cursor:pointer;min-width:auto;font-size:14px;font-weight:500;color:#777}
.cm-input-ck-label span{flex-shrink:0;display:flex;width:18px;height:18px;border-radius:3px;border:1px solid rgba(0, 0, 0, .3);color:#fff;text-align:center}
.cm-input-ck-label span svg{display:none;width:14px;height:14px;stroke-width:3px;margin:auto}
.cm-input-ck-label input[type="checkbox"]{display:none}
.cm-input-ck-label input[type="checkbox"]:checked+span{color:#fff;background:#111}
.cm-input-ck-label input[type="checkbox"]:checked+span svg{display:block}
.cm-input-ck-label input[type="radio"]{display:none}
.cm-input-ck-label input[type="radio"]:checked+span{color:#fff;background:#111}
.cm-input-ck-label input[type="radio"]:checked+span svg{display:block}

/* common - search */
.cm-search{gap:8px;width:280px;height:40px;padding:0 5px 0 15px;border-radius:6px;border:1px solid #e5e5e5}
.cm-search .search-input{width:100%;height:100%;font-size:14px;color:#111}
.cm-search .search-input::placeholder{color:#aaa}
.cm-search .search-btn{flex-shrink:0;width:32px;height:32px;padding-bottom:2px;border-radius:50%;color:#111}
.cm-search .search-btn svg{margin:auto;width:17px;height:17px}

/* 모달 */
#modal{display:flex;position:fixed;left:0;top:0;z-index:101;width:100%;height:100%;padding:15px;background:rgba(0,0,0,.5)}
#modal *{word-break:keep-all}
#modalWrap{overflow-y:auto;position:relative;width:100%;max-width:560px;max-height:calc(100vh - 30px);padding:35px;margin:auto;border-radius:12px;font-size:14px;font-weight:400;line-height:1.65;color:#111;background:#fff;box-shadow:4px 4px 16px rgba(0,0,0,.1)}
#modal .close{position:absolute;right:0;top:0;z-index:101;width:50px;height:50px;border:none;color:var(--dark);background:none}
#modal .close svg{width:25px;height:25px}
#modalWrap:has(.modal-type-info){max-width:300px; text-align:center}
#modalWrap:has(.modal-type-info-medium){text-align:center}
.cm-modal-cont h2{margin-bottom:20px;font-size:18px;font-weight:700;color:#111}
.cm-modal-cont b{font-weight:600;color:#111}
.cm-modal-cont .btns{gap:6px;margin-top:20px}
.cm-modal-cont dl+dl{margin-top:10px}
.cm-modal-cont dl.bd-top{padding-top:15px;margin-top:15px;border-top:1px solid #e1e1e1}
.cm-modal-cont dl dt{flex-shrink:0;width:40%;font-weight:500;color:var(--dark)}
.cm-modal-cont dl dd{font-size:14px;color:#777}
.cart-list-add ul{gap:6px;width:max-content;margin:15px auto;padding:15px 30px;border-top:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1}
.cart-list-add .price{font-weight:600;color:#111}

/* pg_wrap */
#page_area{}
.pg_wrap .pg{display:flex;justify-content:center;margin:40px 0 20px;font-size:12px;font-weight:600;text-align:center}
.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}
.pg_current{color:#fff;background:#111}
.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}
}

/* dkWrap -------------------------------------------------------------------------------------------- */ 
#dkWrap{font-size:14px;line-height:1.65;color:#111}
#dkWrap *{word-break:keep-all}

/* dkCont -------------------------------------------------------------------------------------------- */ 
#dkContainer{position:relative;z-index:15}
#dkCont{min-height:400px}

/* dkMain - hero ------------------------------------------------------------------------------------- */ 
#dkMain .hero{padding:60px 16px;font-size:20px;line-height:1.65;text-align:center}
#dkMain .hero h1{margin-bottom:15px;font-size:72px;font-weight:700}

/* dkMain - search */
#dkMain .main-search{gap:8px;max-width:640px;width:100%;height:65px;margin-top:40px;padding:0 12px 0 25px;border-radius:40px;background:#f2f2f2}
#dkMain .main-search .search-input{width:100%;height:100%;font-size:16px;color:#111}
#dkMain .main-search .search-input::placeholder{color:#aaa}
#dkMain .main-search .search-btn{flex-shrink:0;width:45px;height:45px;padding-bottom:2px;border-radius:50%;color:#fff;background:linear-gradient(126deg,rgba(20, 192, 222, 1) 0%, rgba(0, 106, 255, 1) 100%)}
#dkMain .main-search .search-btn svg{margin:auto;width:22px;height:22px}
#dkMain .btn-area{margin:70px 0;padding:0 16px;font-size:16px;text-align:center}
#dkMain .btn-area .more-btn{display:block;width:max-content;height:55px;margin:0 auto 40px;padding:0 30px;border-radius:30px;font-size:16px;font-weight:500;color:#fff;line-height:55px;background:#111}
#dkMain .btn-area p a{font-weight:500;color:var(--primary)}
@media(hover:hover){
#dkMain .btn-area p a:hover{text-decoration:underline}
}

/* mainBlog ------------------------------------------------------------------------------------------- */ 
#mainBlog{padding:85px var(--dft-space);margin-top:100px;background:#f5f5f5}
#mainBlog .tit{position:relative}
#mainBlog .tit h2{margin:20px 0 40px;font-size:50px;font-weight:700;line-height:1}
#mainBlog .tit svg{position:absolute;right:-4px;bottom:-4px;width:40px;height:40px;stroke-width:1px}
#mainBlog .list{gap:34px}
#mainBlog .list-item{width:20%}
#mainBlog .list-item .img{overflow:hidden;height:230px;margin-bottom:15px;border-radius:12px}
#mainBlog .list-item .img img{width:100%;height:100%;object-fit:cover}
#mainBlog .list-item .cate{font-size:13px;font-weight:600;color:var(--primary)}
#mainBlog .list-item .date{font-size:12px;font-weight:500;color:#aaa}
#mainBlog .list-item h3{margin:5px 0 10px;font-size:16px;font-weight:600;line-height:1.45}

/* startBnr ------------------------------------------------------------------------------------------- */ 
#startBnr{position:sticky;bottom:0;z-index:16;overflow:hidden;gap:28px;padding:14px 0;background:#111;font-size:17px;font-weight:400;text-align:center;color:#fff}
#startBnr p{position:relative}
#startBnr a{gap:10px;position:relative;height:34px;padding:0 12px;border:1px solid rgba(255, 255, 255, .5);border-radius:30px;font-size:13px;color:#fff;transition:all .2s}
#startBnr a svg{width:17px;height:17px}
#startBnr a:hover{color:#111;background:#fff}
#startBnr .bg-r{position:absolute;bottom:-50px;left:60%;animation:floatY 3s ease-in-out infinite alternate}
#startBnr .bg-l{position:absolute;bottom:-95px;left:25%;animation:floatX 3.5s ease-in-out infinite alternate}
@keyframes floatY{0%{transform:translateY(0)}100%{transform:translateY(-20px)}}
@keyframes floatX{0%{transform:translateX(0)}100%{transform:translateX(20px)}}
#startBnr .bnr-close{position:absolute;top:50%;right:20px;height:24px;transform:translateY(-50%);color:rgba(255, 255, 255, .7)}

/* dkFooter ------------------------------------------------------------------------------------------- */ 
#dkFooter{padding:100px var(--dft-space) 0;border-top:1px solid #e5e5e5}
#dkFooter .logo{width:160px}
#dkFooter .col{gap:20px}
#dkFooter .col p{font-size:16px;font-weight:700}
#dkFooter .col ul li+li{margin-top:10px}
#dkFooter .col ul li a{color:#111}
#dkFooter .col-2{margin-left:auto}
#dkFooter .col-2 .ul-wrap{gap:80px}
#dkFooter .col-3{margin-left:8%}
#dkFooter .copy{padding:20px 0;margin-top:60px;border-top:1px solid #e5e5e5}

@media(max-width:1320px){
#dkMain .hero h1{font-size:6vw}    
#dkMain .hero .cm-ws-pl{font-size:16px}
#dkFooter{padding:100px 16px 0}
}
@media(max-width:1024px){
#startBnr{display:block;position:relative;padding:16px}    
#startBnr .bnr-close{display:none}    
#startBnr a{width:max-content;margin:10px auto 0}
#dkFooter .col-2 .ul-wrap{gap:20px}
}
@media(max-width:768px){
#dkWrap{font-size:13px;line-height:1.45}
#modalWrap{padding:20px}
.cm-modal-cont h2{margin-bottom:10px;font-size:15px}
#dkMain .hero{padding:30px 16px}    
#dkMain .hero .cm-ws-pl{font-size:15px}    
#dkMain .main-search{height:50px;margin-top:20px;padding:0 10px 0 20px}
#dkMain .main-search .search-input{font-size:14px}
#dkMain .main-search .search-btn{width:34px;height:34px}
#dkMain .main-search .search-btn svg{width:18px;height:18px}
#dkMain .btn-area{margin:40px 0;font-size:13px}
#dkMain .btn-area .more-btn{height:45px;margin-bottom:20px;line-height:45px;font-size:14px}
#dkMain .btn-area p a{display:block;width:max-content;margin:0 auto}
#startBnr{font-size:14px}
#startBnr .bg-r{left:40%}
#startBnr .bg-l{left:3%}
#dkFooter{padding:40px 0 0;border:none;font-size:12px;text-align:center}
#dkFooter > .cm-flex{flex-direction:column}
#dkFooter .logo{width:110px}
#dkFooter .col {gap:5px;align-items:center}
#dkFooter .col p{font-size:12px}
#dkFooter .col-2{display:none}
#dkFooter .col-3{margin:15px 0 0}
#dkFooter .col-3 ul{display:flex;gap:10px}
#dkFooter .col ul li+li{margin:0}
#dkFooter .copy{margin-top:25px;padding:10px 0;border:none;background:#f5f5f5}
}

@media(max-width:480px){
#dkMain .hero h1{font-size:26px;line-height:1.25}        
#dkMain .hero .cm-ws-pl{font-size:12px;color:#777}    
}