/* css/content/employment.css */


@media screen and (min-width : 320px) and (max-width : 1279px) {
  #employmentTopBox {
	background-image: url("/resources/asset/images/content/top/visual_company.jpg");
    background-size: cover;
    background-position: center;
  }
  
  /* employmentBox_01 */
  #employmentBox_01 {
    height : auto;
    min-height: 950px;
    background-color : #f2f2f2;
    background-color : var(--color-white);
    padding : 15% 10vw 10%;
    box-sizing: border-box;
  }
  
  #employmentBox_01 h2 {
    margin-bottom : 15%;
  }
  
  #employmentBox_01 .tab_img_area {
    width : 100%;
    height : 250px;
    margin-bottom : 20%;
  }
  
  #employmentBox_01 .tab_img_area li:nth-of-type(1) div { background-image: url("/resources/asset/images/content/company/employment_01.svg");}
  #employmentBox_01 .tab_img_area li:nth-of-type(2) div { background-image: url("/resources/asset/images/content/company/employment_02.svg");}
  #employmentBox_01 .tab_img_area li:nth-of-type(3) div { background-image: url("/resources/asset/images/content/company/employment_03.svg");}
  
  #employmentBox_01 .tab_text_area {
    width : 100%;
    height : 340px;
  }

  #employmentBox_01 .tab_text_area ol {
    height : 100%;
  }

  #employmentBox_01 .tab_text_area li {
    height : auto;
    margin-bottom : 40px;
  }

  #employmentBox_01 .tab_text_area li dd {
    display: none;
    font-size:1rem;
    line-height: 1.5;
  }

  #employmentBox_01 .tab_text_area li dd br {
    display: none;
  }

  #employmentBox_01 .tab_text_area li.act dt {
    color : #557365;
    color : var(--color-green-l);
  }
  
  #employmentBox_01 .tab_text_area li.act dd {
    display: block;
    color : #555;
    color : var(--color-gray-r);
  }

  .tab_text_area li dd:nth-of-type(1) {
    margin-bottom : 10px;
    font-weight: 700;
  }
  
}


@media screen and (min-width : 1280px) and (max-width : 1599px) {
  #employmentTopBox {
	background-image: url("/resources/asset/images/content/top/visual_company.jpg");
    background-size: cover;
    background-position: center;
  }
  
  #employmentTopBox .breadcrumb li {
    color : #f2f2f2;
    color : var(--color-white);
  }

  .top_narr br {
    display: none;
  }
  
  /* employmentBox_01 */
  #employmentBox_01 {
    height : auto;
    min-height: 100vh;
    background-color : #f2f2f2;
    background-color : var(--color-white);
    padding : 6.25vw;
    box-sizing: border-box;
  }
  
  #employmentBox_01 h2 {
    margin-bottom : 4.5vw;
  }
  
  #employmentBox_01 .tab_img_area {
    width : 50%;
    height : 500px;
  }
  
  #employmentBox_01 .tab_img_area li:nth-of-type(1) div { background-image: url("/resources/asset/images/content/company/employment_01.svg");}
  #employmentBox_01 .tab_img_area li:nth-of-type(2) div { background-image: url("/resources/asset/images/content/company/employment_02.svg");}
  #employmentBox_01 .tab_img_area li:nth-of-type(3) div { background-image: url("/resources/asset/images/content/company/employment_03.svg");}
  
  #employmentBox_01 .tab_text_area {
    width : 42%;
    height : 500px;
  }

  #employmentBox_01 .tab_text_area ol {
    height : 100%;
  }
  
  #employmentBox_01 .tab_text_area li:last-of-type {
    margin-top : 40px;
  }

  #employmentBox_01 .tab_text_area li dd {
    font-size:1rem;
  }

  #employmentBox_01 .tab_text_area li.act dt {
    color : #557365;
    color : var(--color-green-l);
  }
  
  #employmentBox_01 .tab_text_area li.act dd {
    color : #555;
    color : var(--color-gray-r);
  }

  .tab_text_area li dd:nth-of-type(1) {
    margin-bottom : 10px;
    font-weight: 700;
  }
  
  /* employmentBox_02 */
  #employmentBox_02 {
    padding : 6.25vw 0;
    background-color : #557365;
    box-sizing: border-box;
  }
  
  #employmentBox_02 h2 {
    margin-left : 6.25vw;
    margin-bottom : 3.125vw;
    color : #f2f2f2;
    color : var(--color-white);
  }
  
  #employmentBox_02 h2.under_line_3 {
    border-bottom : 3px solid #1B402E;
  }
  
  .benefits_list {
    width : 100%;
    height : 100%;
  }
  
  .benefits_list li {
    float: left;
    width : 25%;
    height : 40%;
    border : 1px solid #555;
    background-color : #f2f2f2; /* 媛쒕퀎 �씠誘몄�濡� 蹂�寃� �삁�젙 */
    box-sizing: border-box;
  }
  
  .benefits_list dl {
    width : 100%;
    height : 100%;
  }
  
  .benefits_list dt {
    font-weight: 700;
    font-size : 1.125rem;
    color : #1B402E;
    color : var(--color-green-d);
    text-align: center;
    margin-bottom : 1vw;
    margin-top : 8vw;
    transition: all 500ms ease;
  }
  
  .benefits_list dd {
    opacity: 0;
    font-weight: 300;
    text-align: center;
    transition: all 500ms ease;
  }
  
  .benefits_list li:hover dt {
    margin-top : 7vw;
  }
  
  .benefits_list li:hover dd {
    opacity: 1;
  }
  
}


@media screen and (min-width : 1600px) {
  #employmentTopBox {
	background-image: url("/resources/asset/images/content/top/visual_company.jpg");
    background-size: cover;
    background-position: center;
  }
  
  #employmentTopBox .breadcrumb li {
    color : #f2f2f2;
    color : var(--color-white);
  }

  .top_narr br {
    display: none;
  }
  
  /* employmentBox_01 */
  #employmentBox_01 {
    height : auto;
    min-height: 100vh;
    background-color : #f2f2f2;
    background-color : var(--color-white);
    padding : 6.25vw;
    box-sizing: border-box;
  }
  
  #employmentBox_01 h2 {
    margin-bottom : 7.8125vw;
  }
  
  #employmentBox_01 .tab_img_area {
    width : 50%;
    height : 28.125vw;
  }
  
  #employmentBox_01 .tab_img_area li:nth-of-type(1) div { background-image: url("/resources/asset/images/content/company/employment_01.svg");}
  #employmentBox_01 .tab_img_area li:nth-of-type(2) div { background-image: url("/resources/asset/images/content/company/employment_02.svg");}
  #employmentBox_01 .tab_img_area li:nth-of-type(3) div { background-image: url("/resources/asset/images/content/company/employment_03.svg");}
  
  #employmentBox_01 .tab_text_area {
    width : 42%;
    height : 500px;
  }

  #employmentBox_01 .tab_text_area ol {
    height: 100%;
  }

  #employmentBox_01 .tab_text_area li:last-of-type {
    margin-top : 30px;
  }
  
  #employmentBox_01 .tab_text_area li.act dt {
    color : #557365;
    color : var(--color-green-l);
  }
  
  #employmentBox_01 .tab_text_area li.act dd {
    color : #555;
    color : var(--color-gray-r);
  }
  
  .tab_text_area dd:nth-of-type(1) {
    margin-bottom : 10px;
    font-weight: 700;
  }
  
  /* employmentBox_02 */
  #employmentBox_02 {
    padding : 6.25vw 0;
    background-color : #557365;
    box-sizing: border-box;
  }
  
  #employmentBox_02 h2 {
    margin-left : 6.25vw;
    margin-bottom : 3.125vw;
    color : #f2f2f2;
    color : var(--color-white);
  }
  
  #employmentBox_02 h2.under_line_3 {
    border-bottom : 3px solid #1B402E;
  }
  
  .benefits_list {
    width : 100%;
    height : 100%;
  }
  
  .benefits_list li {
    float: left;
    width : 25%;
    height : 40%;
    border : 1px solid #555;
    background-color : #f2f2f2; /* 媛쒕퀎 �씠誘몄�濡� 蹂�寃� �삁�젙 */
    box-sizing: border-box;
  }
  
  .benefits_list dl {
    width : 100%;
    height : 100%;
  }
  
  .benefits_list dt {
    font-weight: 700;
    font-size : 1.125rem;
    color : #1B402E;
    color : var(--color-green-d);
    text-align: center;
    margin-bottom : 1vw;
    margin-top : 7.5vw;
    transition: all 500ms ease;
  }
  
  .benefits_list dd {
    opacity: 0;
    font-weight: 300;
    text-align: center;
    transition: all 500ms ease;
  }
  
  .benefits_list li:hover dt {
    margin-top : 6.5vw;
  }
  
  .benefits_list li:hover dd {
    opacity: 1;
  }
  
}