@charset "utf-8";

/* top_img */
.top_img .inner {background:linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url(../img/company/company_top_bg.jpg)no-repeat center center;
                background-size:cover;}

/* contents */
.contentW {width:100%; padding:5rem 0; background:#fff;}

.contentW .inner { position: relative; width:58.5rem; margin:0 auto; }
.contentW .inner:before {content: ''; position: absolute; top: 0; left: 50%; height: 100%; border-left: 1px solid #dcdcdc;
}

.hfCont {overflow: hidden;}
.hfCont + .hfCont {margin-top: 2.5rem;}

.hfMonth, .hfMonthdl {position: relative;}
.hfMonthdl > dt, .hfMonthdl > dd {margin-bottom: 0.75rem; font-size: 0.9rem;}

.hfMonthdl > dt {font-weight: 500; color:#145DAB;}
.hfMonthdl > dd {font-weight: 300; margin-bottom:0.25rem;}

.hfRight .thumb {float: right; width:48%;}
.hfRight .hfMonth {float:left; width:48%; text-align: right;}

.hfRight .hfMonth .rnd:before {content: ''; position: absolute; top: 0.1rem; right:-1.6rem; width: 0.85rem; height: 0.85rem; background: #fff; border: 1px solid #145DAB; box-sizing: border-box; border-radius: 50%;}
.hfRight .hfMonth .rnd:after {content: ''; position: absolute; top: 0.4rem; right:-1.3rem; width: 0.25rem; height: 0.25rem; background: #145DAB; border-radius: 50%;}

.hfLeft .thumb {float: left; width:48%; text-align:right;}
.hfLeft .hfMonth {float: right; width:48%; text-align: left;}

.hfLeft .hfMonth .rnd:before {content: ''; position: absolute; top: 0; left: -1.55rem; width: 0.85rem; height: 0.85rem; background: #fff; border: 1px solid #145DAB; box-sizing: border-box; border-radius: 50%;}
.hfLeft .hfMonth .rnd:after {content: ''; position: absolute; top: 0.3rem; left: -1.25rem; width: 0.25rem; height: 0.25rem; background: #145DAB; border-radius: 50%;}

@media (max-width:1186px ){
    
    /* contents */
    .contentW .inner {width:90%;}
/*    .contentW:before {  left:28px; }
      .contentW > .inner { width: auto;}*/

    .hfRight .thumb { width: 50%; padding-left: 1.5rem; box-sizing: border-box;}
/*    .hfRight > .thumb img { width: 100%;}*/
    .hfRight .hfMonth { width: 50%; padding-right: 1.5rem; box-sizing: border-box;}
    
    .hfRight .hfMonth .rnd:before {right: -1.95rem;}
    .hfRight .hfMonth .rnd:after {right: -1.65rem;}

    .hfLeft .thumb { width: 50%; padding-right: 1.5rem; box-sizing: border-box;}
/*    .hfLeft > .thumb img {width: 100%;}*/
    .hfLeft .hfMonth { width: 50%; padding-left: 1.5rem; box-sizing: border-box;}
    
    .hfLeft .hfMonth .rnd:before {left: -1.95rem;}
    .hfLeft .hfMonth .rnd:after {left: -1.65rem;}
    
}

@media ( min-width:0px ) and ( max-width:900px ){
   
}

@media ( min-width:0px ) and ( max-width:528px ){
    
    /* contents */
    .contentW .inner:before {left: 1.4rem;}
    
    .hfRight .thumb, .hfLeft .thumb {position: relative; float: none; width:100%;}
    .hfRight .hfMonth, .hfLeft .hfMonth {width:100%; padding: 0 0 0 1.5rem; float: none; text-align: left;}
    .hfRight .hfMonth .rnd, .hfLeft .hfMonth .rnd {padding:0 0 0 1rem;}
    
    .hfRight .thumb {padding-left:0;}
    .hfRight .hfMonth .rnd:before {right:0; left:-0.5rem;}
    .hfRight .hfMonth .rnd:after {right:0; left: -0.2rem;}
    
    .hfLeft .thumb {padding-right:0; text-align:left;}
    .hfLeft .hfMonth .rnd:before {left:-0.5rem;}
    .hfLeft .hfMonth .rnd:after {left: -0.2rem;}

}