/* css/content/crewhistory.css */

.conTitleBox .tinyEngTitle {
  background-color: #fff;
}
#historyBox .gray {
  color: #666;
}
#historyTopBox {
  background : url("/resources/asset/images/content/top/visual_company.jpg") no-repeat 50% 50%;
  background-size: cover;
}

@media screen and (min-width : 320px) and (max-width : 767px) {
  #historyBox {
    width : 100%;
    height : auto;
    background-color : #fff;
    padding : 100px 40px;
    box-sizing: border-box;
  }

  #history_detail_area {
    width : 240px;
    height : auto;
    margin : auto;
  }

  #history_detail_area li {
    width : 100%;
    height : auto;
    margin-bottom : 200px;
  }

  #history_detail_area dt {
    margin-bottom : 50px;
  }

  #history_detail_area dd {
    border-left : 2px solid #ED6D00;
    padding-left : 25px;
    font-weight: 700;
    color : #333;
    padding-bottom : 50px;
  }

  #history_detail_area dd .gray {
    font-weight: 300;
  }
  .his_sub_text {
    font-size : 0.875rem;
  }
}


@media screen and (min-width : 768px) {
  
  #historyBox {
    padding : 150px 0;
  }
  
  #history_detail_area {
    width : 600px;
    height : auto;
    margin : auto;
  }
  
  #history_detail_area li {
    opacity: 0;
    width : 100%;
    height : auto;
    margin-bottom : 150px;
    transition : all 1500ms ease;
  }
  
  #history_detail_area li.act {
    opacity: 1;
  }
  
  #history_detail_area dl {
    width : 100%;
    height: 450px;
  }
  
  #history_detail_area dt {
    float: left;
    width: 300px;
    height: 450px;
    padding-right : 70px;
    box-sizing: border-box;
    text-align: right;
    border-right : 2px solid #ED6D00;
  }
  
  #history_detail_area dt .his_sub_text {
    font-size : 0.875rem;
  }
  
  #history_detail_area dd {
    float: right;
    width : 240px;
    margin-bottom : 50px;
    font-weight: 700;
    opacity: 0;
    transition: all 1000ms ease;
    transition-delay: 300ms;
  }
  
  #history_detail_area dd:nth-of-type(1) {
    transition-delay: 300ms;
  }
  #history_detail_area dd:nth-of-type(2) {
    transition-delay: 600ms;
  }
  #history_detail_area dd:nth-of-type(3) {
    transition-delay: 900ms;
  }
  #history_detail_area dd:nth-of-type(4) {
    transition-delay: 1200ms;
  }
  #history_detail_area dd:nth-of-type(5) {
    transition-delay: 1500ms;
  }
  
  #history_detail_area li.act dd {
    opacity: 1;
  }
  
  #history_detail_area .gray {
    font-weight: 300;
  }
}