/* css/content/aboutcrew.css */

#limeInformationBox .text_32 {
  font-family: 'Oswald';
  font-weight: 800;
  padding-bottom: 150px;
}
#limeInformationBox.act .text_area p {
  font-size: 24px;
  color: #999;
}
#limeInformationBox.act .text_area dt {
  font-weight: 600;
}

@media screen and (min-width : 320px) and (max-width : 767px) {
  #topViewBox {
    position: relative;
    background: url("/resources/asset/images/content/top/visual_company.jpg") no-repeat 50% 50%;
    background-size: cover;
    width : 100%;
    height : 40vh;
  }

  #topViewBox .narr {
    position: absolute;
    z-index: 10;
    top : 50%;
    left : 50%;
    width : auto;
    min-width : 260px;
    height : auto;
    color : #f2f2f2;
    font-size : 1.5rem;
    transform: translate(-50%, -50%);
  }

  #limeInformationBox {
    background-color : #fff;
    height : auto;
    min-height: 100vh;
    padding : 100px 40px 50px;
    box-sizing: border-box;
  }

  #limeInformationBox .text_area {
    width : 100%;
    height : auto;
    margin-bottom : 40px;
  }

  #limeInformationBox .text_area h2{
    width: 100%;
    margin-bottom : 80px;
  }

  #limeInformationBox .text_area dl {
    width : 100%;
    height : auto;
    margin-bottom : 80px;
  }

  #limeInformationBox .text_area dt {
    opacity: 0;
    width : 100%;
    height : auto;
    margin-bottom : 45px;
    font-size: 1.5rem;
    color : #ED6D00;
    color : var(--color-green-l);
    line-height: 1.5;
    transition: all 1000ms ease;
  }

  #limeInformationBox .text_area dd {
    opacity: 0;
    width : 100%;
    height : auto;
    margin-bottom : 40px;
    font-size : 1.125rem;
    line-height: 1.725;
    transition: all 1000ms ease;
    transition-delay: 700ms;
  }

  #limeInformationBox .text_area dd br {
    display: none;
  }

  #limeInformationBox .text_area p {
    opacity: 0;
    text-align: right;
    transition: all 500ms ease;
    transition-delay: 1400ms;
  }

  #limeInformationBox .img_area {
    display: none;
  }

  #limeInformationBox.act .text_area dt,
  #limeInformationBox.act .text_area dd,
  #limeInformationBox.act .text_area p {
    opacity: 1;
  }
}


@media screen and (min-width : 768px) and (max-width : 1279px) {
  #topViewBox {
    position: relative;
    background: url("/resources/asset/images/content/top/visual_company.jpg") no-repeat 50% 50%;
    background-size: cover;
    width : 100%;
    height : 40vh;
  }

  #topViewBox .narr {
    position: absolute;
    z-index: 10;
    top : 50%;
    left : 50%;
    width : auto;
    min-width : 260px;
    height : auto;
    color : #fff;
    font-size : 1.5rem;
    transform: translate(-50%, -50%);
  }

  #limeInformationBox {
    background-color : #fff;
    height : auto;
    min-height: 100vh;
    padding : 100px 40px 0;
    box-sizing: border-box;
  }

  #limeInformationBox .text_area {
    width : 100%;
    height : auto;
    margin-bottom : 40px;
  }

  #limeInformationBox .text_area h2{
    width: 100%;
    margin-bottom : 80px;
  }

  #limeInformationBox .text_area dl {
    width : 100%;
    height : auto;
    margin-bottom : 80px;
  }

  #limeInformationBox .text_area dt {
    opacity: 0;
    width : 100%;
    height : auto;
    margin-bottom : 45px;
    font-size: 1.5rem;
    color : #ED6D00;
    color : var(--color-green-l);
    line-height: 1.5;
    transition: all 1000ms ease;
  }

  #limeInformationBox .text_area dd {
    opacity: 0;
    width : 100%;
    height : auto;
    margin-bottom : 40px;
    font-size : 1.125rem;
    line-height: 1.725;
    transition: all 1000ms ease;
    transition-delay: 700ms;
  }

  #limeInformationBox .text_area dd br {
    display: none;
  }

  #limeInformationBox .text_area p {
    opacity: 0;
    text-align: right;
    transition: all 500ms ease;
    transition-delay: 1400ms;
  }

  #limeInformationBox .img_area {
    display: none;
  }

  #limeInformationBox.act .text_area dt,
  #limeInformationBox.act .text_area dd,
  #limeInformationBox.act .text_area p {
    opacity: 1;
  }
}


@media screen and (min-width : 1280px) and (max-width : 1599px) {
  #topViewBox {
    position: relative;
    background: url("/resources/asset/images/content/top/visual_company.jpg") no-repeat 50% 50%;
    background-size: cover;
    width : 100%;
    height : 50vh;
  }

  #topViewBox .breadcrumb li {
    color : #f2f2f2;
  }

  #topViewBox .narr {
    position: absolute;
    z-index: 10;
    top : 50%;
    left : 50%;
    width : 700px;
    height : 45px;
    color : #f2f2f2;
    transform: translate(-50%, -50%);
  }

  #topViewBox .narr br {
    display: none;
  }

  #limeInformationBox {
    background-color : #fff;
    padding-top : 7%;
    box-sizing: border-box;
  }

  #limeInformationBox .text_area {
    float: left;
    width : 61%;
    height : 620px;
    margin-left : 5%;
  }

  #limeInformationBox .text_area h2{
    margin-bottom : 70px;
  }

  #limeInformationBox .text_area dl {
    margin-bottom : 70px;
  }

  #limeInformationBox .text_area dt {
    opacity: 0;
    margin-bottom : 45px;
    font-size: 1.5rem;
    color : #ED6D00;
    color : var(--color-green-l);
    transition: all 1000ms ease;

  }

  #limeInformationBox .text_area dd {
    opacity: 0;
    margin-bottom : 20px;
    font-size : 1.125rem;
    transition: all 1000ms ease;
    transition-delay: 700ms;
  }

  #limeInformationBox .text_area p {
    opacity: 0;
    text-align: right;
    transition: all 500ms ease;
    transition-delay: 1400ms;
  }

  #limeInformationBox .img_area {
    background: url("/resources/asset/images/common/header_logo.svg") -5% 5% no-repeat;
    background-size: 85%;
    opacity: 0;
    float: right;
    width : 34%;
    height : 100%;
  }

  #limeInformationBox.act .text_area dt,
  #limeInformationBox.act .text_area dd,
  #limeInformationBox.act .text_area p,
  #limeInformationBox.act .img_area {
    opacity: 1;
  }
}




@media screen and (min-width : 1600px) and (max-width : 1919px) {
  #topViewBox {
    position: relative;
    background: url("/resources/asset/images/content/top/visual_company.jpg") no-repeat 50% 50%;
    background-size: cover;
    width : 100%;
    height : 50vh;
  }


  #topViewBox .narr {
    position: absolute;
    z-index: 10;
    top : 50%;
    left : 50%;
    width : 700px;
    height : 45px;
    transform: translate(-50%,-50%);
    color : #f2f2f2;
  }

  #topViewBox .narr br {
    display: none;
  }

  #limeInformationBox {
    padding-top : 10%;
    box-sizing: border-box;
    background-color : #fff;
  }

  #limeInformationBox .text_area {
    float: left;
    width : 50%;
    height : 700px;
    margin-left : 10%;
  }

  #limeInformationBox .text_area h2{
    margin-bottom : 130px;
  }

  #limeInformationBox .text_area dl {
    margin-bottom : 95px;
  }

  #limeInformationBox .text_area dt {
    opacity: 0;
    margin-bottom : 45px;
    font-size: 1.5rem;
    color : #ED6D00;
    color : var(--color-green-l);
    transition: all 1000ms ease;

  }

  #limeInformationBox .text_area dd {
    opacity: 0;
    margin-bottom : 20px;
    font-size : 1.125rem;
    transition: all 1000ms ease;
    transition-delay: 700ms;
  }

  #limeInformationBox .text_area p {
    opacity: 0;
    text-align: right;
    transition: all 500ms ease;
    transition-delay: 1400ms;
  }

  #limeInformationBox .img_area {
    background: url("/resources/asset/images/common/header_logo.svg") 5% 10% no-repeat;
    background-size: 85%;
    opacity: 0;
    float: right;
    width : 34%;
    height : 100%;
  }

  #limeInformationBox.act .text_area dt,
  #limeInformationBox.act .text_area dd,
  #limeInformationBox.act .text_area p,
  #limeInformationBox.act .img_area {
    opacity: 1;
  }
}





@media screen and (min-width : 1920px) {
  #topViewBox {
    position: relative;
    background: url("/resources/asset/images/content/top/visual_company.jpg") no-repeat 50% 50%;
    background-size: cover;
    width : 100%;
    height : 50vh;
  }

  #topViewBox .breadcrumb li {
    color : #333;
  }

  #topViewBox .narr {
    position: absolute;
    z-index: 10;
    top : 50%;
    left : 50%;
    width : 700px;
    height : 45px;
    transform: translate(-50%,-50%);
    color : #333;
  }

  #topViewBox .narr br {
    display: none;
  }

  #limeInformationBox {
    background-color : #fff;
  }

  #limeInformationBox .text_area {
    float: left;
    width : 50%;
    height : 700px;
    margin-top : 10%;
    margin-left : 10%;
  }

  #limeInformationBox .text_area h2{
    margin-bottom : 130px;
  }

  #limeInformationBox .text_area dl {
    margin-bottom : 95px;
  }

  #limeInformationBox .text_area dt {
    opacity: 0;
    margin-bottom : 45px;
    font-size: 1.5rem;
    color : #ED6D00;
    color : var(--color-green-l);
    transition: all 1000ms ease;

  }

  #limeInformationBox .text_area dd {
    opacity: 0;
    margin-bottom : 20px;
    font-size : 1.125rem;
    transition: all 1000ms ease;
    transition-delay: 700ms;
  }

  #limeInformationBox .text_area p {
    opacity: 0;
    text-align: right;
    transition: all 500ms ease;
    transition-delay: 1400ms;
  }

  #limeInformationBox .img_area {
    background: url("/resources/asset/images/common/header_logo.svg") -10% 30% no-repeat;
    background-size: 85%;
    opacity: 0;
    float: right;
    width : 34%;
    height : 100%;
  }

  #limeInformationBox.act .text_area dt,
  #limeInformationBox.act .text_area dd,
  #limeInformationBox.act .text_area p,
  #limeInformationBox.act .img_area {
    opacity: 1;
  }
}