@charset "utf-8";

.page_write .input span { margin-left:0}
.videoframe { display:none;}
.linebox {position:relative;}
.indexno { position:absolute; top:20px; left:20px;}


/*list*/
.history_list{width:1400px; margin:0 auto; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 4%;}
.history_list .item{margin-bottom:20%;}
.history_list .item .img{position:relative; overflow: hidden;  border:1px solid #ddd;}
.history_list .item .img:hover img{transform: scale(1.05);}
.history_list .item .img img{width:100%; object-fit: contain; transition: all 0.2s ease; }
.history_list .item .img .count{position:absolute; top:0; left:0; z-index: 1; max-width:80px; width:30%; align-content: center; aspect-ratio: 1/1; text-align: center;  background:#8414c0; color:#fff; font-size:18px; font-weight:bold;}
.history_list .item .img .count>span{font-size:clamp(1.6rem, 3vw, 1.87rem);}
.history_list .item .txt{margin-top:30px;}
.history_list .item .txt .tit{font-size:clamp(1.5rem, 3vw, 1.9rem); font-weight:bold; letter-spacing: -1px;}
.history_list .item .txt .stit{font-size:clamp(1rem, 2vw, 1.3rem); font-weight:500; color:#22222290; margin-bottom:20px;}
.history_list .item .info dl{display: grid; grid-template-columns:20% 80%; border-bottom:1px solid #ddd;  margin-bottom:10px; font-size:16px;}
.history_list .item .info dl dt{border-bottom:2px solid #ababab; padding-bottom:10px; font-weight:bold;}
.history_list .item .info dl dd{padding-left:7px;}
@media only all and (max-width:1400px){
    .history_list{width:98%; column-gap: 2%;}
}
@media only all and (max-width:700px){
    .history_list{ grid-template-columns: repeat(2, 1fr); column-gap: 4%;}
    .history_list .item .info dl{display: flex; flex-flow:column wrap;}
    .history_list .item .info dl dt{border-bottom:none; padding-bottom:0;}
    .history_list .item .info dl dd{padding-left:0;padding-bottom:5px; }
}


/* view */
.history_view{width:1400px; margin:0 auto; border-top:2px solid #444; border-bottom:1px solid #222; padding:50px 0;}
.history_view .item{margin-bottom:30px; display: grid; grid-template-columns: 30% 65%; column-gap: 5%; }
.history_view .item .img{position:relative;overflow: hidden;  border:1px solid #ddd;}
.history_view .item .img:hover img{transform: scale(1.1);}
.history_view .item .img img{width:100%; object-fit: contain; transition: all 0.2s ease;  }
.history_view .item .img .count{position:absolute; top:0; left:0; z-index: 1; width:80px; line-height: 80px; aspect-ratio: 1/1; text-align: center;  background:#8414c0; color:#fff; font-size:18px; font-weight:bold;}
.history_view .item .img .count>span{font-size:30px;}
.history_view .item .txt{margin-top:20px;}
.history_view .item .txt .tit{font-size:clamp(1.6rem, 3vw, 1.9rem); font-weight:bold; letter-spacing: -1px;}
.history_view .item .txt .stit{font-size:clamp(1rem, 2vw, 1.3rem); font-weight:bold; color:#444; margin-bottom:20px; font-weight:500;}
.history_view .item .info{margin-top:70px;}
.history_view .item .info dl{display: grid; grid-template-columns:10% 90%; border-bottom:1px solid #ddd;  margin-bottom:10px; }
.history_view .item .info dl dt{border-bottom:2px solid #ababab; padding-bottom:10px; font-weight:bold;}
.history_view .item .info dl dd{padding-left:5px;}
.history_view .detail{border-top:1px solid #ddd; padding-top:60px;}
.history_view .detail .view_box+.view_box{border-top:1px solid #ddd; padding-top:60px; margin-top:60px;}
.history_view .detail .view_tit{font-size:clamp(1.3rem, 2vw, 1.5rem); margin-bottom:10px;}
.history_view .detail .view_box .view_con p+p{margin-top:8px;}
.history_view .detail .view_box .view_con p{color:#797979;}
@media only all and (max-width:1400px){
    .history_view{width:98%;}
}
@media only all and (max-width:1200px){
    .history_view .item{grid-template-columns: 40% 55%; column-gap: 5%; }
    .history_view .item .info dl{grid-template-columns:20% 80%;}
}
@media only all and (max-width:700px){
    .history_view .item{grid-template-columns: repeat(1, 1fr); column-gap: 5%; }
    
}


/*write*/
.page_write .file{margin-bottom:0;}
.page_write  .thume {margin-top:0; border-bottom:1px solid #dedede;}
.page_write .schcate{justify-content: flex-start;}
.page_write .allfile{display:grid; grid-template-columns: repeat(3, 1fr);}
.page_write .allfile .item span{float:none; display: inline; padding:1px 10px 2px 6px; vertical-align: -1px; background:#fff; border:1px solid #ddd; border-radius:2px;}


/*slide*/
.thumbSwiper_wrap{container : slide-wrap / inline-size; background:#f4f4f4;  margin-bottom:50px;}
.thumbSwiper { position:relative; /*height:800px;*/  width:100%;  }
.swiper-button-prev, .swiper-button-next{ width: 65px; height:60px; display: inline-block; overflow:hidden; text-indent:-1000px; text-align: center; background-repeat: no-repeat; background-position: center; cursor: pointer; position: absolute; z-index: 10; }
.swiper-button-prev{ background-image: url(../img/arrL.png); left:0;top: 0;top: 48%;}
.swiper-button-next{ background-image: url(../img/arrR.png); right:0;top: 48%;}
.thumbSwiper .swiper-pagination{position:absolute; bottom:anchor(--thumbSwiper 98%);}
.thumbSwiper .swiper-pagination .swiper-pagination-bullet-active{background:#4271d2; width:25px; border-radius:50px;}
.thumbSwiper .swiper-wrapper {anchor-name:--thumbSwiper; }
.thumbSwiper .swiper-pagination .swiper-pagination-bullet-active { width:100px; border-radius:0; background:transparent;}
/*.thumbSwiper .swiper-wrapper img { width:1400px; height:800px; object-fit:contain;}
.thumbSwiper .swiper-pagination .swiper-pagination-bullet-active { width:100px; border-radius:0; background:transparent;*/
.thumbSwiper .swiper-pagination .swiper-pagination-bullet{width:100px; height:auto; aspect-ratio: 16/9; border-radius:0; background:transparent;}


@container slide-wrap (min-width:1200px){
	.thumbSwiper {width:90%;  }
	.thumbSwiper .swiper-pagination{position:absolute; width:auto; margin-top:15px; left:auto; right:anchor(--thumbSwiper 109.8%); top:anchor(--thumbSwiper 0%); display: flex; flex-flow:column wrap; gap:1%; }
	.thumbSwiper .swiper-pagination span{ box-shadow:0 1px 10px 3px rgba(0,0,0,0.15);}
}
@media only all and (max-width:1250px){
	.thumbSwiper {height:auto; }
}

@media only all and (max-width:720px){
	.thumbSwiper .swiper-pagination{display: flex; }
	.thumbSwiper .swiper-pagination span{flex:1;}
	.thumbSwiper .swiper-button-next, .thumbSwiper .swiper-button-prev{display: none;}
}