/*********** Top *************/
.history_top{position:relative; display:flex; align-items:center; justify-content:center; height:450px; border-radius:var(--borderR30); overflow:hidden; text-align:center; box-sizing:border-box;}
.history_top::before{content:''; position:absolute; inset:0; background:url('/twcenter/bbs/skin/historyBasic/image/history_top.jpg') no-repeat left center/cover;}
.history_top .txt{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:30px; padding:0 5%; box-sizing:border-box; border: 0 !important;}
.history_top h3{color:var(--white); font-weight:700; letter-spacing:var(--letter-spacing-none);}
.history_top p{color:var(--white70);}




/*********** List *************/
.history_cont{overflow:hidden;}
.history_tab{margin:0 auto 60px;}
.history_tab .history_tab_in ul{display:flex; justify-content:center;}
.history_tab .history_tab_in ul li{width:auto; margin:2px;}
.history_tab .history_tab_in ul li a{display:block; min-width:180px; height:65px; line-height:63px; border-radius:65px; box-sizing:border-box; padding:0 20px; text-align:center; border:1px solid var(--border); font-size:1rem; font-family:var(--eng); font-weight:400; color:var(--basic); transition:all .3s;}
.history_tab .history_tab_in ul li a:hover{color:var(--black); border-color:var(--black);}
.history_tab .history_tab_in ul li.hover a{background:var(--main) !important; border-color:var(--main) !important; color:var(--white) !important;}
.history_list{position:relative; padding:120px 0 0;}
.history_list .progressbar{display:block; position:absolute; left:50%; top:0; width:2px; height:100%; margin-left:-1px; background:var(--border); z-index:1;}
.history_list .progressbar .progress{display:block; width:2px; height:0; background:var(--main); position:absolute; left:0; top:0; transition:height .3s;}
.history_list .his_in{position:relative; z-index:2; width:50%; margin-left:50%; padding:0 0 80px 50px; box-sizing:border-box;}
.history_list .his_in:nth-child(even){margin-left:0; padding:0 50px 80px 0; text-align:right;}
.history_list .his_in .his_txt .year{position:relative; font-size:2rem; font-family:var(--eng); font-weight:700; line-height:100%; letter-spacing:var(--letter-spacing-none); color:var(--black);}
.history_list .his_in .his_txt .year .dot{position:absolute; left:-55px; top:13px; display:block; width:10px; height:10px; border-radius:50%; background:#c8c8c8; z-index:2; transition:background .3s, box-shadow .3s;}
.history_list .his_in.effect .his_txt .year .dot{background:var(--main); box-shadow:0 0 0 7px rgba(33,52,110,0.5);}
.history_list .his_in:nth-child(even) .his_txt .year .dot{left:auto; right:-55px;}
.history_list .his_in .his_txt ul{padding-top:20px;}
.history_list .his_in .his_txt ul li{position:relative; font-size:1rem; font-weight:400; line-height:166.67%; letter-spacing:var(--letter-spacing-default); color:var(--basic); padding:0 0 8px; box-sizing:border-box;}
.history_list .his_in .his_txt ul li:last-child{padding-bottom:0;}
.history_list .his_in .his_txt ul li b{display:inline-block; margin-right:8px; font-weight:500; color:var(--black);}
.history_list .his_in:nth-child(even) .his_txt ul li b{margin-right:0; margin-left:8px;}



/*********** 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(--grayBg); 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 1500px
*******************************************************************************/
@media all and (max-width:1500px){
}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
}
/*******************************************************************************
    @media  ~980px
*******************************************************************************/
@media all and (max-width:980px){
.history_top{height:300px; border-radius:var(--borderR20);}
.history_top .txt{gap:20px;}

.history_tab{margin:0 auto 40px;}
.history_tab .history_tab_in ul li a{min-width:140px; height:55px; line-height:53px; padding:0 20px;}

.history_list{padding:80px 0 0;}
.history_list .his_in{padding:0 0 60px 40px;}
.history_list .his_in:nth-child(even){padding:0 40px 60px 0;}
.history_list .his_in .his_txt .year{font-size:1.778rem;}
.history_list .his_in .his_txt .year .dot{left:-45px; top:12px;}
.history_list .his_in:nth-child(even) .his_txt .year .dot{left:auto; right:-45px;}
.history_list .his_in .his_txt ul{padding-top:15px;}
}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

.history_top{height:250px; border-radius:var(--borderR15);}
.history_top .txt{gap:15px;}

.history_tab{margin:0 auto 20px; padding:0 30px; display:block; position:relative;}
.history_tab:before{content:''; display:block; box-sizing:border-box; width:100%; height:100%; border:1px solid var(--border); position:absolute; left:0; bottom:0;}
.history_tab .history_tab_in ul{display:block; white-space:nowrap; text-align:center; font-size:0;}
.history_tab .history_tab_in ul li{float:none; display:inline-block; margin:0; width:auto; padding:0 10px;}
.history_tab .history_tab_in ul li a{min-width:auto; line-height:120%; height:auto; padding:12px 0; border-radius:0; border:0; position:relative;}
.history_tab .history_tab_in ul li a:after{content:''; display:block; width:0; height:2px; background:var(--main); position:absolute; left:0; bottom:0; z-index:2; transition:all .3s linear;}
.history_tab .history_tab_in ul li.hover a{background:transparent !important; color:var(--main) !important; font-weight:700;}
.history_tab .history_tab_in ul li.hover a:after{width:100%;}



.history_list{padding:40px 0 0;}
.history_list .progressbar{left:20px; margin-left:0;}
.history_list .his_in{width:100%; margin-left:0; padding:0 0 40px 40px;}
.history_list .his_in:nth-child(even){padding:0 0 40px 40px; text-align:left;}
.history_list .his_in .his_txt .year{font-size:1.556rem;}
.history_list .his_in .his_txt .year .dot{left:-23px; top:7px; width:8px; height:8px;}
.history_list .his_in.effect .his_txt .year .dot{box-shadow:0 0 0 5px rgba(33,52,110,0.5);}
.history_list .his_in:nth-child(even) .his_txt .year .dot{left:-23px; right:auto;}
.history_list .his_in .his_txt ul{padding-top:10px;}
.history_list .his_in:nth-child(even) .his_txt ul li b{margin-left:0; margin-right:8px;}
}