#data-style{width:calc(100% - var(--layout-flax-margin)); max-width:var(--layout-width); margin: auto; padding:var(--gap-140) 0;}
#data-style > .head-wrap{display:flex; flex-wrap: wrap;  align-items: center; justify-content: space-between;}
#data-style > .head-wrap > p{color:var(--color-font); font-size:var(--font-size-normal);}
#data-style > .head-wrap > p > span{color:var(--color-primary); font-weight: 600;}
#data-style > .head-wrap > .thumbnail-search-wrap{width:236px; display:flex; align-items: center; border-bottom:1px solid var(--color-border); padding:5px 0; background-color:transparent;}
#data-style > .head-wrap > .thumbnail-search-wrap > input{border:none; background-color:transparent; width:calc(100% - 26px); height: 25px;}
#data-style .inner-wrap{margin-top:var(--gap-80);}
#data-style .board-list-wrap .cont-list{display:flex; padding:var(--gap-20) 0; border-bottom:1px solid var(--color-border); transition: all .5s;}
#data-style .board-list-wrap .cont-list:hover{border-bottom:1px solid var(--color-primary)}
#data-style .board-list-wrap .cont-list > li{text-align: center; color:#000; display: flex; flex-wrap: wrap; align-items: center; justify-content:center; padding:0 var(--gap-10);}
#data-style .board-list-wrap .cont-list > li.number{font-weight: 900; font-size:var(--font-size-xxxxlarge); color:var(--color-border);}
#data-style .board-list-wrap .cont-list > li.flexWidth > .tdate{text-align: left; font-size:var(--font-size-normal); color:var(--color-font); width:100%;}
#data-style .board-list-wrap .cont-list > li.date{color:var(--color-font)}
#data-style .board-list-wrap .cont-list > li > a{width:100%; display: inline-block;  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size:var(--font-size-large); font-weight: 500; text-align: left;}
#data-style .board-list-wrap .cont-list > li > a:hover{color:var(--color-font);}
#data-style .board-list-wrap ul > li.sort > .sort-wrap{padding:5px 15px; color:#fff; font-size:var(--font-size-small); text-align: center; background-color:#F0BC68; border-radius: 25px;}

#data-style .board-list-wrap ul > li.number{width:150px;}
#data-style .board-list-wrap ul > li.sort{width:130px; justify-content: flex-end;}

#data-style.read-wrap{padding:var(--gap-140) 0;}
#data-style.read-wrap > .inner-wrap{ margin:0 auto; width:calc(100% - var(--layout-flax-margin)); max-width:960px;}
#data-style.read-wrap > .inner-wrap > h1.title{color:#000; text-align: center; font-weight: 600; font-size:var(--font-size-xxxlarge); margin:0 0 var(--gap-20) 0; line-height: 120%;}
#data-style.read-wrap > .inner-wrap > p.date{color:var(--color-font); font-size:var(--font-size-normal); text-align: center;}
#data-style.read-wrap .head-info-wrap{display:flex; justify-content:center; align-items: center; flex-wrap: wrap;  padding:0 0 var(--gap-10) 0;}
#data-style.read-wrap .head-info-wrap .sort-wrap{padding:3px var(--gap-20); color:#fff; font-size:var(--font-size-small); text-align: center; background-color:#F0BC68; border-radius: 25px;}
#data-style.read-wrap .cont-wrap{padding:var(--gap-100) 0; color:var(--color-font); font-size:var(--font-size-normal);}
#data-style.read-wrap .cont-wrap .movie-wrap{width:100%; margin-bottom:var(--gap-40); position:relative;}
#data-style.read-wrap .cont-wrap .movie-wrap:after{content:""; display:block; clear:both; padding-top:56%;}
#data-style.read-wrap .cont-wrap .movie-wrap > iframe{width:100%; height: 100%; position:absolute; top:0; left:0;}
#data-style.read-wrap .cont-wrap img{max-width:100%;}
#data-style.read-wrap .btn-wrap{display:flex; justify-content: center; margin:var(--gap-30) 0;}

#data-style.read-wrap .file-wrap{margin-bottom:var(--gap-40);}

#data-style .pn-wrap{width:100%; padding:var(--gap-15); border-top:1px solid var(--color-border); display:flex; align-items: center; transition:all .5s;}
#data-style .pn-wrap:hover{color:var(--color-font); transition:all .5s;}
#data-style .pn-wrap:last-of-type{border-bottom:1px solid var(--color-border);}
#data-style .pn-wrap > svg{margin:0 var(--gap-15);}