/*********** Top *************/
.history_top {background:url('/twcenter/bbs/skin/historyBasic/image/history_top.jpg') no-repeat center/cover; box-sizing:border-box; padding:0 5%; text-align:center; height:550px; display:flex; align-items:center; justify-content:center;}
.history_top h3 {font-size:3.111rem; color:var(--white); font-weight:700; letter-spacing:var(--letter-spacing-heading); line-height:var(--lh56); word-break:keep-all;}
.history_top h3 span {font-weight:300; letter-spacing:inherit;}


/*********** List *************/
.history_wrap .history {display: flex; position:relative; }
.history_wrap .history > div {box-sizing:border-box;}
.history_wrap .history .year_scr {width:50%; padding: 100px 0 0; box-sizing:border-box;}
.history_wrap .history .year {position:sticky; top:130px; transition:all 0.3s ease; display: flex;}
.history_wrap .history .year span {font-size:2.222rem; font-weight: 700; color:var(--main); font-family:var(--eng); line-height: 125%; padding-bottom:30px;}
.history_wrap .history .year sup {display:inline; font-size:2.222rem; font-weight: 700; color:var(--main); letter-spacing: 0; line-height: 125%; }
.history_wrap .history .history_list {width:50%; box-sizing:border-box; padding: 100px 0 10px 40px;}
.history_wrap .history .history_list dl {width:100%; display:flex; flex-wrap:wrap; position: relative; padding:0 0 100px;}
.history_wrap .history .history_list dl dt {font-size:1.333rem; line-height: 150%; width:120px; font-weight:600; color:var(--black); box-sizing:border-box; position: relative;}
.history_wrap .history .history_list dl dt span {display:none;}
/*.history_wrap .history .history_list dt::before {content:''; display: block; width:30px; height: 1px; background:var(--border); position: absolute; left:-40px; top:16px;}*/

.history_wrap .history .history_list dl dt .dot {display: inline-block; width: 14px; height: 14px; box-sizing:border-box; border-radius:50%; position: absolute; left:-47px; top:10px; z-index: 2; transition:all .3s linear;}
.history_wrap .history .history_list dl dt .dot::before {content:''; display:block; width:100%; height: 100%; border-radius:50%; background:var(--main); position: absolute; left: 0; top:0; z-index: -1;}
.history_wrap .history .history_list dl dt .dot::after {content:''; display:block; width:100%; height: 100%; border-radius:50%; background:var(--main); position: absolute; left: 0; top:0; z-index: -1;}
.history_wrap .history .history_list dl dt .dot i {display: block; font-style:normal; width: 100%; height: 100%; border-radius:50%; box-sizing:border-box; border:3px solid var(--main); background:var(--white); transition:all .3s linear;}

/*active */
.history_wrap .history .history_list dl.active dt .dot {transform:scale(2);}
.history_wrap .history .history_list dl.active dt .dot::before {animation: dots2 2s ease-in-out infinite;}
.history_wrap .history .history_list dl.active dt .dot::after {animation: dots 2s 0s ease-in-out infinite;}
.history_wrap .history .history_list dl.active dt .dot i {border-width:2px;}
.history_wrap .history .history_list dl:first-child dt .dot {background:var(--main);}
.history_wrap .history .history_list dl:first-child dt .dot::after background:var(--main);}
.history_wrap .history .history_list dd {position: relative; flex:1; width:calc(100% - 120px);}
.history_wrap .history .history_list dd ul {width: 100%; margin-top:3px;}
.history_wrap .history .history_list dd ul li {font-size:1rem; font-weight: 400; letter-spacing: -0.6px; line-height: 150%; box-sizing:border-box; position: relative; color:var(--basic);}
.history_wrap .history .history_list dd ul li + li {margin:6px 0 0;}
.history_wrap .history .history_list dd ul li strong {display: inline-block; letter-spacing: 0; line-height: inherit; color:var(--basic); font-weight:600; position: absolute; left:0; top:0;}
.history_wrap .history .history_list dd .his_wrap {position:relative; width:100%;display:flex; flex-wrap:wrap; gap:0 15px; align-items:center;}
.history_wrap .history .history_list dd .his_img {flex:0;}
.history_wrap .history .history_list dd .his_img img {}
.history_wrap .history .history_list dd .his_tt {flex:1; color:var(--black);}

.history_wrap .progressbar {position: absolute; left:50%; top:0; width: 1px; height: 100%; background:var(--border); z-index: 1;}
/* .history_wrap .progressbar:before {position:absolute; content:""; left:50%; margin-left:-14px; top:-20px; width:28px; height:40px; z-index:100; background:url('/company/img/symbol.png') top center no-repeat; background-size:auto 100%;} */
.history_wrap .progressbar span{display:block; width:100%; background:var(--main); position:absolute; left:0; top:0; transition:all .3s;}


@keyframes dots {
    0% {
      opacity: 0.5;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(6);
    }
}

@keyframes dots {
    0%{
      opacity: 0.3;
      transform: scale(1);
    }
    100%{
      opacity: 0;
      transform: scale(6);
    }
}


@keyframes dots2 {
    0%{
      opacity: 0.6;
      transform: scale(1);
    }
    100%{
      opacity: 0;
      transform: scale(3);
    }
}

.admin .year_scr{display: none;}
.admin .history_wrap .history .history_list {width:100%; padding:0; border-top: 1px solid var(--border);}
.admin .history_wrap .history .history_list dl {padding:15px 0; border-bottom:1px solid var(--border); align-items:center;}
.admin .history_wrap .history .history_list dt {display:flex; flex-wrap:wrap; width:auto; margin-right:30px;}
.admin .history_wrap .history .history_list dt form {display:flex; align-items:Center;}
.admin .history_wrap .history .history_list dt input[type=checkbox] {margin:0 10px 0 0;}
.admin .history_wrap .history .history_list dt em {font-style:normal; font-size:1rem; color:#999; font-weight:400;}
.admin .history_wrap .history .history_list dd {}
.admin .history_wrap .history .history_list dd .dot {display: none;}
.admin .history_wrap .history .history_list dd ul {margin-top:0;}


/*********** View *************/
.bbs_view{border-top:2px solid var(--black);}
	.bbsView_tit{border-bottom:1px solid var(--border); padding:33px 100px 33px 20px; box-sizing:border-box; position: relative;}
	.bbsView_tit .subject{font-size:26px; letter-spacing:var(--letter-spacing-heading); line-height:130%; font-weight:700; color:var(--black);}
	.bbsView_tit .subject span{display:inline-block; margin-right: 5px; letter-spacing:inherit; font-weight:400;}
	.bbsView_tit .view_detail{margin:10px 0 0; display:flex;}
	.bbsView_tit .view_detail li{font-size:1rem; color:var(--basic); line-height:150%; padding:0 37px 0 0; position:relative;}
	.bbsView_tit .view_detail li:last-child{padding:0;}
	.bbsView_tit .view_detail li:after{content:''; display:block; width:1px; height:16px; background:#ccc; position:absolute; right:18px; top:50%; margin-top:-8px;}
	.bbsView_tit .view_detail li:last-child:after{display:none;}
	.bbsView_tit .count{font-size:1rem; color:var(--basic); line-height:120%; position:absolute; right:20px; top:50%; transform:translateY(-50%);}
	.bbsView_tit .count span{display:inline-block; vertical-align:middle; margin:-2px 7px 0 0; color:var(--black);}
	.view_content{padding:30px 0; box-sizing:border-box;}
	.view_content img{max-width:100%; height:auto !important;}

	.view_file{margin:30px 0 0; box-sizing:border-box; background:var(--gray-bg); display:flex;}	
	.view_file .btit{width:170px; padding:20px; font-size:1rem; letter-spacing:var(--letter-spacing-body); line-height: 120%; color:var(--black); box-sizing:border-box; position: relative;}	
	.view_file .bstxt{width:calc(100% - 170px); padding:20px; font-size:1rem; letter-spacing:-0.35pt; line-height: 120%; box-sizing:border-box;}	
	.view_file .bstxt a{display:inline-block; font-size:1rem; letter-spacing:var(--letter-spacing-body); line-height:150%; color:var(--black); border-bottom:1px solid var(--black); margin: 0 0 5px;}
	.view_file .bstxt a:last-child{margin: 0;}
	.view_file .bstxt .file{display: inline-block; vertical-align: middle; margin-left: -5px; font-size:1rem; color:var(--black);}	

	.bbs_bottom{border-top:1px solid var(--border); display:flex;}
	.bbs_bottom.last{border-bottom:1px solid var(--border);}
	.bbs_bottom dt{width:170px; padding:20px; font-size:1rem; letter-spacing:var(--letter-spacing-body); line-height: 120%; color:var(--black); box-sizing:border-box; position: relative;}
	.bbs_bottom dt .arrow{color:var(--black); opacity:0.5; position:absolute; right:0; top:50%; transform:translateY(-50%);}
	.bbs_bottom dd{width:calc(100% - 170px); padding:20px; font-size:1rem; letter-spacing:var(--letter-spacing-body); line-height: 120%; box-sizing:border-box;}
	.bbs_bottom dd a{text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}


	.his_table{display: flex; flex-wrap:wrap;}
	.his_table dt {font-size:1rem; width:100px; font-weight:600; color:var(--black); padding:3px 0;}
	.his_table dd {font-size:1rem; width:calc(100% - 100px); padding:3px 0;}





/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1350px){

/*********** Top *************/
.history_top {height:480px; }

.history_wrap .history .history_list dl dt {width:110px;}
.history_wrap .history .history_list dd {width:calc(100% - 110px);}


}


/*******************************************************************************
    @media  ~980px              
*******************************************************************************/
@media all and (max-width:980px){


/*********** Top *************/
.history_top {height:400px;}
.history_top h3 {font-size:2.711rem;}


/*********** List *************/
.history_wrap .history .year_scr {width:280px; padding:80px 0 0;}
.history_wrap .history .year {top:120px;}
.history_wrap .history .year span {font-size:2.022rem;}
.history_wrap .history .year sup {font-size:2.022rem;}
.history_wrap .history .history_list {width:calc(100% - 280px); padding: 80px 0 30px 25px;}
.history_wrap .history .history_list dl {padding: 0 0 60px;}
.history_wrap .history .history_list dl dt .dot {width: 12px; height: 12px; left:-30px; top:8px;}
.history_wrap .history .history_list dd .his_wrap {gap:0 12px;}
.history_wrap .history .history_list dd .his_img img {max-height:32px;}

.history_wrap .progressbar {left:280px;}


@keyframes dots {
    0% {
      opacity: 0.5;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(4);
    }
}

@keyframes dots {
    0%{
      opacity: 0.3;
      transform: scale(1);
    }
    100%{
      opacity: 0;
      transform: scale(4);
    }
}


@keyframes dots2 {
    0%{
      opacity: 0.6;
      transform: scale(1);
    }
    100%{
      opacity: 0;
      transform: scale(2);
    }
}


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/*********** Top *************/
.history_top {height:300px;}
.history_top h3 {font-size:2.311rem;}
.history_top h3 br {display:none;}


/*********** List *************/
.history_wrap .history .year_scr {width:130px; padding:60px 0 0;}
.history_wrap .history .year {top:100px;}
.history_wrap .history .year span {font-size:1.622rem;}
.history_wrap .history .year sup {font-size:1.622rem;}
.history_wrap .history .history_list {width:calc(100% - 130px); padding:60px 0 30px 30px;}
.history_wrap .history .history_list dl {padding:0 0 40px 0;}
.history_wrap .history .history_list dl dt {width:80px; font-size:1.111rem;}
.history_wrap .history .history_list dl dt .dot {width: 10px; height: 10px; left:-35px; top:8px;}
.history_wrap .history .history_list dl dd {width:calc(100% - 80px);}

.history_wrap .history .history_list dd .his_wrap {flex-direction:column; align-items: flex-start; gap:0;}
.history_wrap .history .history_list dd .his_img {margin-bottom:7px;}


.history_wrap .progressbar {left:130px;}

@keyframes dots {
    0% {
      opacity: 0.5;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(3);
    }
}

@keyframes dots {
    0%{
      opacity: 0.3;
      transform: scale(1);
    }
    100%{
      opacity: 0;
      transform: scale(3);
    }
}


}


/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:480px){

/*********** Top *************/
.history_top {height:240px;}
.history_top h3 {font-size:2.111rem;}

.history_wrap .history .history_list dl dt {width:100%; padding-bottom:5px;}
.history_wrap .history .history_list dl dd {width:100%;}

}