@charset "utf-8";

/* common */
:root{--space:5%}
.dft_btn{border:none;background:none;font-family:'Pretendard'}
#dkBlog{font-size:16px;font-weight:500;color:#777;font-family:'Pretendard'}

/* dkHeader */
#dkHeader{padding:0 var(--space);transition:padding .2s}
#dkHeader .tip{display:flex;align-items:center;justify-content:flex-end;height:60px}
#dkHeader .tip a{margin-left:10px}
#dkHeader .tip a.dk_link{display:flex;align-items:center;position:relative;height:32px;padding:0 36px 0 20px;margin-left:30px;border:1px solid #222;border-radius:20px;font-size:14px;color:#222;font-weight:600}
#dkHeader .tip a.dk_link svg{position:absolute;width:16px;height:16px;transition:all .2s}
#dkHeader .tip a.dk_link svg.on{opacity:0;top:12px;right:20px}
#dkHeader .tip a.dk_link svg.off{top:7px;right:15px}
#dkHeader .dk_logo{padding:50px 0;font-size:18px;line-height:1.65;text-align:center}
#dkHeader .dk_logo h1{font-size:32px;font-weight:700;line-height:1.35;color:#222;font-family:'Pretendard'}

/* dkTabs */
#dkTabs{position:sticky;top:63px;z-index:20;padding:0 var(--space);background:#fff;transition:all .2s}
#dkTabs .tabs{display:flex;padding:12px 0}
#dkTabs .tabs a{flex-shrink:0;position:relative;padding:10px 20px;border-radius:30px;font-size:17px;font-weight:600;color:#aaa;background:#f2f2f2;transition:all .2s}
#dkTabs .tabs a.on{color:#fff;background:var(--dark)}
#dkTabs .tabs a+a{margin-left:8px}
#dkTabs .tabs_m{display:flex;margin:10px 0;padding-bottom:10px}
#dkTabs .tabs_m a{flex-shrink:0;position:relative;padding:10px 0 ;border-radius:30px;font-size:16px;font-weight:500;color:#aaa;transition:all .2s}
#dkTabs .tabs_m a:after{opacity:0;display:block;content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:#222;transition:all .2s}
#dkTabs .tabs_m a+a{margin-left:30px}
#dkTabs .tabs_m a.on{font-weight:600;color:#111}
#dkTabs .tabs_m a.on:after{opacity:1}
#dkTabs.fix{box-shadow:2px 2px 6px rgba(0,0,0,.1)}
#dkTabs.fix .tabs button.on:after{opacity:1}

/* dkContainer */
#dkContainer{position:relative;padding:0 var(--space);transition:padding .2s}

/* dkBlogList */
#dkBlogList > div{display:grid;grid-template-columns:repeat(4, 1fr);gap:40px;margin:20px 0 50px}
#dkBlogList > div article a{display:block}
#dkBlogList > div article .img{overflow:hidden;display:flex;height:260px;border-radius:10px;border:1px solid #e9e9e9;background:center no-repeat;background-size:cover;transition:height .2s}
#dkBlogList > div article .img img{object-fit:cover;width:100%}
#dkBlogList > div article .info{padding:25px}
#dkBlogList > div article .info .cate{font-size:15px;font-weight:600;color:var(--primary)}
#dkBlogList > div article .info p{padding:10px 0;font-size:22px;font-weight:700;color:#222;line-height:1.35}
#dkBlogList > div article .info .date{font-size:14px;font-weight:500;color:#aaa}
#dkBlogList .more_btn{display:flex;align-items:center;justify-content:center;padding:0 30px 0 35px;height:50px;margin:0 auto;border-radius:30px;font-size:12px;font-weight:600;color:#aaa;border:1px solid #ccc;transition:all .2s}
#dkBlogList .more_btn svg{width:16px;height:16px;margin-left:6px}

/* dkCont */
#dkCont{position:relative;max-width:860px;width:100%;margin:0 auto;font-family:'Pretendard'}
#dkCont *{word-break:keep-all}

/* postView */
#postView .tit_area{padding:40px 0;color:#aaa;text-align:center;line-height:1.8}
#postView .tit_area p{margin-bottom:6px;font-size:26px;font-weight:700;line-height:1.4;color:#222}
#postView .tit_area span{color:var(--primary)}
#postView .tit_area span:after{display:inline-block;vertical-align:0;content:"";width:1px;height:10px;margin:0 10px;background:#ccc}
#postView .cont{padding-bottom:40px;font-weight:400;color:#222;line-height:1.8;font-family:'pretendard'!important}
#postView .cont *{font-family:'pretendard'!important}
#postView .cont img{max-width:100%}
#postView .cont b{font-weight:700}
#postView .btn_area{display:flex;padding-top:30px}
#postView .btn_area.top{order:-2;width:100%;margin:30px calc((100% - 860px) / 2) 0;padding:16px 20px;border-radius:6px;background:#f5f5f5}
#postView .btn_area a, #postView .btn_area button{display:flex;align-items:center;font-size:14px;font-weight:500;color:#888;transition:all .2s}
#postView .btn_area svg{width:16px;height:16px;margin-right:6px}
#postView .btn_area button.back{margin-left:0}
#postView .btn_area button{margin-left:auto}
#postView .other{margin-top:60px}
#postView .other .tit{margin-bottom:20px;font-size:20px;font-weight:700;color:#222}
#postView .other ul{display:grid;grid-template-columns:repeat(2, 1fr);gap:30px}
#postView .other ul li a{display:block}
#postView .other ul li .img{height:220px;border-radius:10px;border:1px solid #e9e9e9;background:center no-repeat;background-size:cover;transition:height .2s}
#postView .other ul li .info{padding:15px 0 20px}
#postView .other ul li .info .cate{font-size:14px;font-weight:600;color:var(--primary)}
#postView .other ul li .info p{padding:8px 0;font-size:18px;font-weight:700;color:#222;line-height:1.35}
#postView .other ul li .info .date{font-size:13px;font-weight:500;color:#aaa}

#postView .related{padding:70px 0 50px;border-bottom:1px solid #e5e5e5;background:#fff}
#postView .related .tit{margin-bottom:20px;font-size:20px;font-weight:700;color:#222}
#postView .related ul li a{font-size:12px;font-weight:400;color:#888}
#postView .related ul li .img{overflow:hidden;position:relative;height:200px;border-radius:12px;border:1px solid var(--line)}
#postView .related ul li .img img{width:100%}
#postView .related ul li .img span{display:block;position:absolute;left:12px;top:12px;z-index:1;height:26px;padding:0 10px;border-radius:20px;font-size:13px;font-weight:600;color:#fff;line-height:27px;background:var(--primary)}
#postView .related ul li .wish{position:absolute;right:18px;top:10px;z-index:1;border:none;background:none}
#postView .related ul li .wish svg{color:#fff;fill:rgba(0,0,0,.3)}
#postView .related ul li .wish svg.on{fill:var(--primary)}
#postView .related ul li .info{padding:15px 0;line-height:1.6}
#postView .related ul li .info .code{font-size:18px;font-weight:700;color:#111}
#postView .related .arr{display:flex;position:absolute;top:40%;z-index:101;transform:translateY(-50%);width:40px;height:40px;color:#fff;background:rgba(0,0,0,.6);transition:opacity .2s}
#postView .related .arr svg{margin:auto}
#postView .related .arr.next{right:1px}
#postView .related .arr.prev{left:1px}
#postView .related .arr.swiper-button-disabled{display:none}

/* dkFooter */
#dkFooter{padding:100px 0 30px;font-size:14px;font-weight:600;color:#aaa;text-align:center}

@media(hover:hover){
#dkHeader .tip a.dk_link:hover svg.on{opacity:1;top:7px;right:15px;transition-delay:.1s}
#dkHeader .tip a.dk_link:hover svg.off{opacity:0;top:2px;right:10px}
#dkHeader .tabs a:not(.on):hover{color:#666}
#postView .btn_area a:hover, #postView .btn_area button:hover{color:#222}
}
@media(max-width:1400px){
:root{--space:3%}
#dkBlogList > div{grid-template-columns:repeat(3, 1fr);gap:30px}
}
@media(max-width:1200px){
#dkBlogList > div article .info p{font-size:20px}	
}
@media(max-width:1024px){
#dkBlogList > div{gap:20px}
#dkBlogList > div article .img{height:200px}
#dkHeader .dk_logo{padding:50px 0}
#dkTabs{top:0}
}
@media(max-width:860px){
#dkContainer{padding:0}	
#postView .cont_wrap{max-width:100%;padding:0 12px}
#postView .btn_area.top{margin:0;border-radius:0}
#dkBlogList{padding:0 12px}
}
@media(max-width:768px){
:root{--space:20px}
#dkHeader .dk_logo{padding:20px 0;font-size:16px}
#dkHeader .dk_logo h1{font-size:25px}
#dkHeader .tip a.dk_link{margin-left:20px}
#dkTabs .tabs{overflow-x:scroll}
#dkTabs .tabs a{padding:6px 12px}
#dkTabs .tabs a+a{margin-left:4px}
#dkTabs .tabs_m{overflow-x:scroll}
#dkTabs .tabs_m a{font-size:14px}
#dkTabs .tabs_m a+a{margin-left:20px}
#dkBlogList > div{grid-template-columns:repeat(2, 1fr);gap:15px;margin:10px 0 30px}
#dkBlogList > div article .img{height:220px}
#dkBlogList > div article .info{padding:15px 0 20px}
#dkBlogList > div article .info .cate{font-size:14px}
#dkBlogList > div article .info p{font-size:17px}
#dkBlogList > div article .info .date{font-size:13px}
#dkBlogList .more_btn{height:32px;padding:0 20px 0 25px}
#postView .tit_area p{font-size:21px}
#postView .related ul li .img span{top:5px;left:5px;height:20px;padding:0 10px;font-size:10px;line-height:20px}
#postView .related ul li .wish{top:5px;right:5px}
#postView .related ul li .wish svg{display:block;width:20px;height:20px}
#postView .related ul li .info{padding:10px 0}
#postView .related ul li .info .code{font-size:16px}
#dkFooter{padding:50px 0 20px}
}
@media(max-width:680px){
#postView .other ul{gap:20px}
#postView .other ul li .img{height:180px}
#postView .related ul li .img{height:160px}
}
@media(max-width:560px){
:root{--space:15px}
#dkBlog{font-size:14px}
#dkHeader .dk_logo{padding:10px 0 15px;font-size:14px}
#dkHeader .dk_logo h1{font-size:22px}
#postView .btn_area a, #postView .btn_area button{font-size:12px}
#dkHeader .tip{justify-content:normal;height:50px}	
#dkHeader .tip a{margin:0}
#dkHeader .tip a+a{margin-left:10px}
#dkHeader .tip a.dk_link{margin-left:auto;font-size:13px}
#dkTabs .tabs a{font-size:14px}
#dkBlogList > div{margin:0 0 30px}
#dkBlogList > div article .img{height:160px}	
#dkBlogList > div article .info{padding:10px 0 15px}
#dkBlogList > div article .info p{padding:8px 0;font-size:16px}	
#postView .tit_area{padding:30px 0}
#postView .tit_area p{margin-bottom:3px;font-size:18px}
#postView .btn_area{padding-top:20px}
#postView .btn_area a, #postView .btn_area button{font-size:12px}
#postView .btn_area svg{width:13px;height:13px;margin-right:3px}
#postView .other{margin-top:40px}
#postView .other .tit{margin-bottom:12px;font-size:18px}
#postView .other ul{gap:15px}
#postView .other ul li .img{height:160px}
#postView .other ul li .info p{font-size:16px}
#postView .other ul li .info .cate{font-size:13px}
#postView .related{padding:50px 0 30px}
#postView .related .tit{margin-bottom:12px;font-size:18px}
}
@media(max-width:480px){
#dkBlogList > div article .img{height:140px}
#dkHeader .dk_logo h1{font-size:20px}
#postView .other ul li .img{height:140px}
#postView .related .arr{width:32px;height:32px}
#postView .related .arr svg{width:20px;height:20px}
}
@media(max-width:420px){
#dkBlogList > div article .img{height:120px}
#postView .other ul li .img{height:120px}
}
@media(max-width:390px){
#dkHeader .dk_logo h1{font-size:18px}
#dkBlogList > div{grid-template-columns:repeat(1, 1fr);gap:15px}
#dkBlogList > div article .img{height:180px}
#postView .other ul{display:block}
#postView .other ul li+li{margin-top:15px}
#postView .other ul li a{display:flex; align-items:center}
#postView .other ul li .img{flex-shrink:0;width:120px;height:80px}
#postView .other ul li .info{width:calc(100% - 120px);padding:0 12px}
#postView .other ul li .info p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
}