@charset "utf-8";

/* common */
:root{--space:5%}
.dft_btn{border:none;background:none;font-family:'Inter'}
#dkBlog{font-size: 14px;line-height: 1.65;color: #111;}

/* blogHeader */
#blogHeader{margin-bottom:100px;padding:0 var(--space);transition:padding .2s}
#blogHeader h1{padding:50px 0;font-size:32px;font-weight:700;color:#222;line-height:1.4;text-align:center;word-break:keep-all}

/* dksearch */
#blogHeader .sh_search{overflow:hidden;position:absolute;left:50%;transform:translateX(-50%);width:462px;height:50px;border-radius:50px;border:1px solid #111}
#blogHeader .sh_search .sch_input{display:block;width:calc(100% - 60px);height:100%;padding-left:24px;border:none;font-size:16px;background:#fff;font-family:'inter'}
#blogHeader .sh_search .sch_input::placeholder{color:#a2a2a2}
#blogHeader .sh_search .sch_input:focus,#blogHeader .sh_search .sch_input:active{border:none!important;outline:none;box-shadow:none}
#blogHeader .sh_search button{position:absolute;right:0;top:0;width:60px;height:100%;padding:2px 1px 0 0;border:none;color:#111;background:none}
#blogHeader .sh_search button svg{width:22px;height:22px;stroke-width:2.5;color:#111}
#blogHeader .sh_search .sch_blog{margin-bottom:50px}

/* blogTabs */
#blogTabs{position:sticky;top:0;z-index:20;padding:0 var(--space);background:#fff;transition:all .2s}
#blogTabs .tabs{display:flex;padding:12px 0}
#blogTabs .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}
#blogTabs .tabs a.on{color:#fff;background:#111}
#blogTabs .tabs a+a{margin-left:8px}
#blogTabs .tabs_m{display:flex;margin:10px 0;padding-bottom:10px}
#blogTabs .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}
#blogTabs .tabs_m a:after{opacity:0;display:block;content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:#222;transition:all .2s}
#blogTabs .tabs_m a+a{margin-left:30px}
#blogTabs .tabs_m a.on{font-weight:600;color:#111}
#blogTabs .tabs_m a.on:after{opacity:1}
#blogTabs.fix{box-shadow:2px 2px 6px rgba(0,0,0,.1)}
#blogTabs.fix .tabs button.on:after{opacity:1}

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

/* dkBlogList */
#dkBlogList{margin-bottom:50px}
#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 h2{padding:10px 0;font-size:22px;font-weight:700;color:#222;line-height:1.35;word-break:keep-all;font-family:'inter'}
#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}

/* blogCont */
#blogCont{position:relative;width:100%;font-family:'inter'}
#blogCont *{word-break:keep-all}

/* postView */
#biz_bnr{display:none;position:fixed;left:calc((100% - 860px) / 50%);top:250px;z-index:101;transform:translateX(-185px)}
#biz_bnr img{width:170px}
#biz_bnr button{position:absolute}
#postView{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;position:relative}
#postView .cont_wrap{position:relative;order:-1;width:100%;max-width:860px}
#postView .fix_bnr{position:sticky;right:0;top:15px;width:220px;height:max-content;margin-top:20px;padding:25px 20px;border-radius:12px;font-size:13px;font-weight:500;line-height:1.35;text-align:center;background:#ecfbf9}
#postView .fix_bnr .arr{position:absolute;left:-15px;top:55px}
#postView .fix_bnr .bt{margin-bottom:10px;font-size:15px;font-weight:600;color:#111}
#postView .fix_bnr .st{color:var(--primary)}
#postView .fix_bnr ul{display:flex;flex-flow:column;gap:15px;margin:15px 0}
#postView .fix_bnr ul li .img{overflow:hidden;height:95px;margin-bottom:8px;border-radius:6px}
#postView .fix_bnr ul li .img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:object-position 3s cubic-bezier(0.5, 1, 0.89, 1)}
#postView .fix_bnr ul li .desc{opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 10px;font-size:12px;font-weight:560;color:#222}
#postView .fix_bnr ul li .price{display:flex;align-items:center;justify-content: center}
#postView .fix_bnr ul li .price span{opacity:.5;font-size:12px;font-weight:600;text-decoration:line-through}
#postView .fix_bnr ul li .price p{margin-left:5px;font-size:14px;font-weight:700;color:#111}
#postView .fix_bnr ul li.empty{padding:20px 10px;border-top:1px solid #cae7e3; border-bottom:1px solid #cae7e3}
#postView .fix_bnr .more{overflow:hidden;position:relative;display:inline-block;width:150px;height:40px;border-radius:20px;line-height:40px;color:#fff;background:#111;transition:all .2s}
#postView .fix_bnr .more p{height:40px;line-height:40px;animation:txt_roll2 5s cubic-bezier(0.645, 0.045, 0.355, 1) infinite}
:root{--txt_h2:-40px}
@keyframes txt_roll2{
0%{transform:translateY(0px)}
30%{transform:translateY(0px)}
45%{transform:translateY(var(--txt_h2))}
85%{transform:translateY(var(--txt_h2))}
100%{transform:translateY(0px)}
}

#postView .tit_area{padding:40px 0;color:#aaa;text-align:center;line-height:1.8}
#postView .tit_area h1{margin-bottom:6px;font-size:26px;font-weight:700;line-height:1.4;color:#222}
#postView .tit_area span:first-of-type{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;border-bottom:1px solid #eee;font-weight:400;color:#222;line-height:1.8;font-family:'inter'!important}
#postView .cont *{font-family:'inter'!important}
#postView .cont img{max-width:100%}
#postView .cont b{font-weight:700}
#postView .btn_area{display:flex;padding-top:30px}
#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 .btn_area.top{order:-2;width:100%;margin:30px calc((100% - 860px) / 2) 0;padding:16px 20px;border-radius:6px;background:var(--pale)}
#postView .btn_area.css{margin:30px calc((100% - 1092px) / 2) 0}
#postView .other{margin:60px 0}
#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%;height:100%;object-fit:cover;object-position:top;transition:object-position 3s cubic-bezier(0.5, 1, 0.89, 1)}
#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 .desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;color:#999}
#postView .related ul li .info .price{display:flex;align-items:center}
#postView .related ul li .info .price span{font-weight:600;color:#aaa;text-decoration:line-through}
#postView .related ul li .info .price p{margin-left:5px;font-size:16px;font-weight:700;color:#111}
#postView .related ul li .info .code{font-size:18px;font-weight:700;color:#111}
#postView .related .arr{display:flex;position:absolute;top:35%;z-index:101;transform:translateY(-50%);width:40px;height:40px;color:#fff;background:rgba(0,0,0,.75);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}

@media(hover:hover){
#blogHeader .tip a.dk_link:hover svg.on{opacity:1;top:7px;right:15px;transition-delay:.1s}
#blogHeader .tip a.dk_link:hover svg.off{opacity:0;top:2px;right:10px}
#blogHeader .tabs a:not(.on):hover{color:#666}
#postView .fix_bnr ul li:hover .img img{object-position:bottom}
#postView .fix_bnr .more:hover{background:var(--primary)}
#postView .btn_area a:hover, #postView .btn_area button:hover{color:#222}
#postView .related ul li:hover .img img{object-position:bottom}
}
@media(max-width:1400px){
:root{--space:3%}
#dkBlogList > div{grid-template-columns:repeat(3, 1fr);gap:30px}
}
@media(max-width:1500px){
#biz_bnr{left:10px;transform:none}    
#biz_bnr img{width:140px}    
}
@media(max-width:1160px){
#biz_bnr svg{width:18px;height:18px}
#biz_bnr img{width:100px}    
}
@media(max-width:1080px){
#biz_bnr{left:auto;right:10px;top:auto;bottom:30vh}
#biz_bnr button{left:-10px}
#biz_bnr img{width:80px}    
}
@media(max-width:1200px){
#dkBlogList > div article .info h2{font-size:20px}	
#postView .fix_bnr{display:none}
}
@media(max-width:1024px){
#blogHeader h1{padding:50px 0 30px}
#blogHeader .sh_search{width:350px}
#dkBlogList > div{gap:20px}
#dkBlogList > div article .img{height:200px}
}
@media(max-width:860px){
#blogContainer{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}
#blogHeader{margin-bottom:70px;padding-top:97px}
#blogHeader h1{padding:20px 0;font-size:18px}
#blogHeader .tip a.dk_link{margin-left:20px}
#blogTabs .tabs{overflow-x:scroll}
#blogTabs .tabs a{padding:6px 12px;font-size:14px}
#blogTabs .tabs a+a{margin-left:4px}
#blogTabs .tabs_m{overflow-x:scroll}
#blogTabs .tabs_m a{font-size:14px}
#blogTabs .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 h2{font-size:17px}
#dkBlogList > div article .info .date{font-size:13px}
#dkBlogList .more_btn{height:32px;padding:0 20px 0 25px}
#blogCont{padding-top:96px}
#postView .tit_area h1{font-size:21px}
#postView .btn_area.top{padding:12px 15px}
#postView .related ul li .info .price p{font-size:14px}
#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}
#blogHeader .sh_search{width:300px;height:40px}
#blogHeader .sh_search .sch_input{font-size:14px}
}
@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}
#blogHeader .dk_logo{padding:10px 0 15px;font-size:14px}
#blogHeader .dk_logo h1{font-size:25px}
#blogHeader .tip{justify-content:normal;height:50px}	
#blogHeader .tip a{margin:0}
#blogHeader .tip a+a{margin-left:10px}
#blogHeader .tip a.dk_link{margin-left:auto;font-size:13px}
#blogTabs .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 h2{padding:8px 0;font-size:16px}	
#postView .tit_area{padding:20px 0}
#postView .tit_area h1{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:40px 0}
#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){
#blogHeader{margin-bottom:55px}
#dkBlogList > div article .img{height:140px}
#blogHeader .dk_logo h1{font-size:23px}
#postView .other ul li .img{height:140px}
#postView .related .arr{width:32px;height:32px}
#postView .related .arr svg{width:20px;height:20px}
#blogHeader .sh_search{width:250px;height:37px}
#blogHeader .sh_search .sch_input{font-size:13px}
#blogHeader .sh_search button{width:50px}
#blogHeader .sh_search button svg{width:15px;height:15px}
#blogHeader .sh_search .sch_input{padding-left:20px}
}
@media(max-width:420px){
#dkBlogList > div article .img{height:120px}
#postView .other ul li .img{height:120px}
}
@media(max-width:360px){
#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}
}