@charset "utf-8";
/* CSS Document */

.sub-grid-img:not(.prod-detail-img) img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}
.cate{position:absolute;top:.5rem;left:1rem;z-index:80;transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform-origin:top left;font-size:14px;line-height:1.15384;text-transform:uppercase;font-weight:500;color:#ccc;letter-spacing:0; color: var(--thm-primary)}
.cate.right{top:0;right:0;left:auto;transform:rotate(90deg) translate(100%);-webkit-transform:rotate(90deg) translate(100%);-moz-transform:rotate(90deg) translate(100%);-ms-transform:rotate(90deg) translate(100%);transform-origin:top right}
.history-item-swiper{ overflow: hidden;}
.swiper-wrapper { margin:0; padding:0}
.historyWrap { position: relative; z-index: 0}
.sub-grid-img{text-align:left;}
.sub-grid-cnt{margin-top:5rem}
.sub-grid-cnt>*{position:relative;z-index:1}
.history-gallery-tit{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%;margin-bottom:2rem;font-size:3rem;font-weight:600;line-height:1}
.history-gallery-tit span{padding-right:2rem}
.history-gallery-tit small{margin:.5rem 0 1rem;font-size:1.4rem;font-weight:700}
.history-swiper-btn{position:relative;width:3.75rem;height:3.75rem;;margin:40px 0 40px auto}
.history-item, .history-details li{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline}
.history-item .history-summary{flex:0 0 1%;font-size:1rem;font-weight:600;color:#111}
.history-summary+*, .history-details .txt-desc{flex:1;width:100%; font-size: .95rem}
.history-item+.history-item{margin-top:2rem}
.history-item .txt-desc{margin-top:0 !important}
.history-month{display:inline-block;flex-basis:40px;max-width:40px;font-size:1rem;   font-weight:500;color:#999}
.history-gallery{position:relative;box-shadow:0px 40px 60px lightgrey;-webkit-box-shadow:0px 40px 60px #0000001A;-moz-box-shadow:0px 40px 60px #0000001A}
.history-gallery::after{display:none;content:"";position:absolute;left:-3.125vw;bottom:-3.75rem;width:20.8333vw;height:17.7083vw;background:var(--thm-primary)}
.history-item-swiper{position:unset}
.history-item-swiper .swiper-pagination{display:-ms-flexbox;display:flex;position:absolute;top:100%;;height:3.75rem;-ms-flex-align:center;align-items:center;justify-content:end}
.history-item-swiper .swiper-pagination-bullet{width:6px;height:6px;margin:0 17px !important;position:relative;opacity:1}
.history-item-swiper .swiper-pagination-bullet::before{content:"";position:absolute;left:50%;top:50%;width:1.8em;height:1.8em;border-radius:50%;border:1px solid;transform:translate(-50%, -50%);opacity:0;transition:all .4s}
.history-item-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active::before{opacity:1}
.history-gallery .history-gallery-img{position:relative}
.history-gallery .history-gallery-img::before{content:'';display:block;padding-top:91.22807%}
.history-gallery .history-gallery-img img{z-index:10}

.history-item-swiper .swiper-pagination-bullet-active { background: var(--thm-primary)}



@media (min-width: 1400px) {
    .sub-history::before{display:block}
    .history-gallery::after{display:block}
    .history-item-swiper .swiper-pagination{padding-right:1.5rem}
  	.sub-grid-img{max-width:570px}
    .history-details .txt-desc{white-space:nowrap}
    .history-swiper-btn{right:auto;left:100%}
}
@media (min-width:1200px){

    .sub-cnts-type-grid{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}
	.sub-grid-cnt{flex-basis:0;flex-grow:1;padding-left:10.6383%}

}
@media (max-width: 767px) {
	.history-gallery-tit{font-size:2rem; margin-bottom:1rem; align-items:baseline}
	.history-gallery-tit span{padding-right:1rem}
	.history-gallery-tit small{margin:.5rem 0 1rem;font-size:1rem;font-weight:700}
	.history-item{-ms-flex-direction:column;flex-direction:column}
	.history-item .history-summary{flex:0 0 100%;margin-bottom:1rem;border-bottom:1px solid}
	.situation_ban { position: relative}
	.situation_ban .cs_section_heading.cs_style_1 .cs_section_title { font-size: 20px}
	.situation_ban .cs_section_heading.cs_style_1.cs_type_1 .cs_section_heading_right { display: none}
	.cs_funfact.cs_style1 .cs_funfact_text::before { width:30px; height:30px;}
	.cs_stroke_text { font-size: 40px}
	.cs_funfact.cs_style1 .cs_funfact_text { font-size: 14px; padding:10px 0; padding-left:15px;}
	.cs_stroke_text .han { font-size: 14px; margin:5px 0 10px}
}
@media (max-width: 575px) {
	.cs_video_block.cs_style1, .cs_video_block.cs_style1.cs_size1 { height:200px; z-index: 0}
}