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

/*********** Top *************/
.history_top{background:url('/twcenter/bbs/skin/historyBasic/image/history_top.jpg') no-repeat center/cover; box-sizing:border-box; padding:175px 30px; text-align:center;}
.history_top h3{font-size: 2.778rem; line-height: 100%; letter-spacing: 0.1em; margin: 0 0 20px; font-weight: 400;}


/*********** List *************/
.history_list form {padding-left: 50px;}

.history_list{position: relative; padding: 100px 0;}
.history_list .his_item {display: flex; justify-content: flex-end;}
.history_list .his_in {padding-bottom: 70px; position: relative; z-index: 2; width: 50%;}

.history_list .his_in .year {font-size: 1.667rem; line-height: 100%; margin: 0 0 15px; position: relative; padding-left: 50px;}
.history_list .his_in .year .dot{position: absolute; left:-4px; top:13px; display: block; width: 10px; height: 10px; border-radius:50%; background:var(--border); z-index: 9; transition:all .3s;}
.history_list .his_in .year .dot::after{content:''; display: block; width: 100%; height: 100%; box-sizing:border-box; background:var(--border); border-radius:50%; position: absolute; left:0; top:0; z-index: 8; animation: dots 1.5s ease-in-out infinite;}
.history_list .his_item.effect .year .dot{background:var(--main);}
.history_list .his_item.effect .year .dot::after {background:var(--main);}

.history_list .his_in ul{padding-left: 50px;}

.history_list .progressbar{display: block; position: absolute; left:50%; top:0; width: 1px; height: 100%; background: var(--border); z-index: 1;}
.history_list .progressbar .progress{display: block; width: 1px; height: 0; background:var(--main); position: absolute; left:50%; top:0;transition:all .3s;}

.history_list .his_item:last-of-type .his_in {padding-bottom: 0;}

.history_list .his_item:nth-child(2n) {justify-content: flex-start; text-align: right;}
.history_list .his_item:nth-child(2n) .his_in .year {padding-left: 0; padding-right: 50px;}
.history_list .his_item:nth-child(2n) .his_in .year .dot{left:auto; right:-6px;}
.history_list .his_item:nth-child(2n) .his_in .year .dot::after{left:auto; right:0;}
.history_list .his_item:nth-child(2n) .his_in ul {padding-left: 0; padding-right: 50px;}

.history_list .his_item:nth-child(2n) form {padding-right: 50px;}


/*********** View *************/
.bbs_view{border-top:2px solid var(--main);}
.bbsView_tit{border-bottom:1px solid var(--border); padding:30px 100px 30px 20px; box-sizing:border-box; position: relative;}
.bbsView_tit .view_detail{margin:10px 0 0; display:flex;}
.bbsView_tit .view_detail li{padding:0 37px 0 0; color: var(--basic); position:relative;}
.bbsView_tit .view_detail li:last-child{padding:0;}
.bbsView_tit .view_detail li:after{content:''; display:block; width:1px; height:12px; background:var(--border); position:absolute; right:18px; top:50%; margin-top:-6px;}
.bbsView_tit .view_detail li:last-child:after{display:none;}
.bbsView_tit .count{position:absolute; right:20px; top:50%; transform:translateY(-50%); color: var(--basic);}
.bbsView_tit .count span{display:inline-block; vertical-align:middle; margin:-1px 5px 0 0; color:var(--black); font-size:22px;}
.view_content{padding:30px 0; box-sizing:border-box;}
.view_content img{max-width:100%; height:auto !important;}

.view_file{margin:30px 0 0; padding: 20px; box-sizing:border-box; background:var(--grayBg); display:flex; align-items: flex-start;}	
.view_file .btit{width:120px; box-sizing:border-box; position: relative;}	
.view_file .bstxt{width:calc(100% - 120px); box-sizing:border-box;}	
.view_file .bstxt a{display:inline-block; font-size:inherit; letter-spacing:inherit; line-height:inherit; margin: 10px 0 0; text-decoration: underline; text-decoration-color: var(--black); text-underline-offset: 6px;}
.view_file .bstxt a::before {content:"\e226"; font-family: var(--icon); font-size: 20px; color: var(--black); line-height: 1; font-weight: 400; display: inline; vertical-align: middle;}
.view_file .bstxt a:first-child{margin: 0;}

.bbs_bottom{border-top:1px solid var(--border); display:flex; align-items:center;}
.bbs_bottom.last{border-bottom:1px solid var(--border);}
.bbs_bottom dt{width:185px; padding:20px 25px 20px 20px; box-sizing:border-box; position: relative;}
.bbs_bottom dt .arrow{color:var(--black); position:absolute; right:20px; top:50%; transform:translateY(-50%); color: var(--black); opacity: 0.4;}
.bbs_bottom dd{width:calc(100% - 185px); padding:20px 0; 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; letter-spacing: inherit; line-height: inherit;}




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

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

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* TOP */
.history_top {padding: 100px 30px;}
.history_top h3 {margin: 0 0 15px; font-size: 2.2rem;}

/* List */
.history_list {padding: 70px 0;}
.history_list .his_in .year {margin: 0 0 5px; padding-left: 30px;}
.history_list .his_in .year .dot {top: 8px;}
.history_list .his_in ul {padding-left: 30px;}

.history_list .his_item:nth-child(2n) .his_in .year {padding-right: 30px;}
.history_list .his_item:nth-child(2n) .his_in ul {padding-right: 30px;}

/* View */
.bbsView_tit {padding: 25px 75px 25px 15px;}
.bbsView_tit .count span {font-size: 20px;}
.bbsView_tit .view_detail li {padding: 0 28px 0 0;}
.bbsView_tit .view_detail li::after {right: 14px;}

.view_content {padding: 25px 0;}

.view_file {margin: 25px 0 0; padding: 15px;}
.view_file .btit {width: 100px;}
.view_file .bstxt {width: calc(100% - 100px);}

.bbs_bottom dt {padding: 15px; width: 140px;}
.bbs_bottom dt .arrow {font-size: 20px; right: 15px;}
.bbs_bottom dd {padding: 15px 0; width: calc(100% - 140px);}
}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* TOP */
.history_top {padding: 70px 15px;}
.history_top h3 {margin: 0 0 10px; font-size: 2rem; line-height: 120%;}

/* List */
.history_list {padding: 50px 0;}
.history_list .his_item {justify-content: flex-start !important; text-align: left !important;}
.history_list .his_in {width: 100%; padding-bottom: 40px;}

.history_list .his_in .year {padding-left: 50px !important;}
.history_list .his_in .year .dot {left: 17px !important; top: 7px; width: 8px; height: 8px; right: auto !important;}
.history_list .his_in ul {padding-left: 50px !important;}

.history_list .progressbar {left: 20px;}

/* View */
.bbsView_tit {padding: 20px 60px 20px 15px;}
.bbsView_tit .count {top:20px; transform: none; right: 15px;}
.bbsView_tit .count span {font-size: 18px; margin-right: 2px;}
.bbsView_tit .view_detail {flex-direction: column; gap: 2px;}
.bbsView_tit .view_detail li {padding: 0}
.bbsView_tit .view_detail li::after {display: none;}

.view_content {padding: 20px 0;}

.view_file {margin: 20px 0 0}
.view_file .bstxt a::before {font-size: 18px;}

.bbs_bottom dt {width: 120px;}
.bbs_bottom dd {width: calc(100% - 120px);}
}