/* css/content/partner.css */


@media screen and (min-width : 320px) and (max-width : 767px) {
  #partnerTopBox {
  	background-image: url("/resources/asset/images/content/top/visual_company.jpg");
    background-size: cover;
    background-position: center;
  }

  #partnerBox .conTitleBox {
    margin-top: 150px;
  }


  #partnerBox .conTitleBox {
    margin-top: 120px;
  }

  #partnerBox {
    width : 100%;
    height : auto;
  }
  
  .partner_list {
    width : 100%;
    height : auto;
    padding-top : 100px;
  }

  .white_area {
    background-color : #fff;
  }

  .partner_list ul {
    display: flex;
    width : 80%;
    height : auto;
    margin : auto;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .partner_list li {
    width : 17vw;
    max-width : 100px;
    height : 15vw;
    max-height : 70px;
    margin : 30px 15px;
    background-position: 50% 50%;
    background-size : 95%;
    background-repeat: no-repeat;
  }

  .partner_list li a {
    position: relative;
    display: block;
    width : 100%;
    height : 100%;
  }
  
  .partner_list li a:focus {
    outline: 0;
  }
  
  .partner_list li a:after {
    position: absolute;
    top : 0;
    left : 0;
    right : 0;
    bottom : 0;
    margin : auto;
    content: "";
    display: block;
    width: 98%;
    height : 98%;
    background-color : rgba(255,255,255,0.75);
    transition: all 500ms ease;
  }
  
  .partner_list li a:hover:after,
  .partner_list li a:focus:after {
    background-color: transparent;
  }
  
  
  .black_area {
    background-color : #ccc;
    padding-bottom : 250px;
  }

  .black_area li {
    opacity: 0.5;
  }

  .black_area li a:after {
    background-color : rgba(0,0,0,0);
  }
  
  .black_area li:hover,
  .black_area li:focus {
    opacity: 0.5;
  }
}

@media screen and (min-width : 768px) and (max-width : 1279px) {
  #partnerTopBox {
  	background-image: url("/resources/asset/images/content/top/visual_company.jpg");
    background-size: cover;
    background-position: center;
  }

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

  #partnerBox .conTitleBox {
    margin-top: 150px;
  }

  #partnerBox {
    width : 100%;
    height : auto;
  }
  
  .partner_list {
    width : 100%;
    height : auto;
    padding-top : 100px;
  }

  .white_area {
    background-color : #fff;
  }

  .partner_list ul {
    display: flex;
    width : 80%;
    height : auto;
    margin : auto;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .partner_list li {
    width : 17vw;
    max-width : 150px;
    height : 15vw;
    max-height : 100px;
    margin : 30px 20px;
    background-position: 50% 50%;
    background-size : 80%;
    background-repeat: no-repeat;
  }

  .partner_list li a {
    position: relative;
    display: block;
    width : 100%;
    height : 100%;
  }
  
  .partner_list li a:focus {
    outline: 0;
  }
  
  .partner_list li a:after {
    position: absolute;
    top : 0;
    left : 0;
    right : 0;
    bottom : 0;
    margin : auto;
    content: "";
    display: block;
    width: 98%;
    height : 98%;
    background-color : rgba(255,255,255,0.75);
    transition: all 500ms ease;
  }
  
  .partner_list li a:hover:after,
  .partner_list li a:focus:after {
    background-color: transparent;
  }
  
  
  .black_area {
    background-color : #ccc;
    padding-bottom : 250px;
  }

  .black_area li a:after {
    background-color : rgba(0,0,0,0.1);
  }
  
  .black_area li a:hover:after,
  .black_area li a:focus:after {
    background-color: transparent;
  }
}



@media screen and (min-width : 1280px) {
  #partnerTopBox {
  	background-image: url("/resources/asset/images/content/top/visual_company.jpg");
    background-size: cover;
    background-position: center;
  }

  #partnerBox .conTitleBox {
    margin-top: 150px;
  }

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


  #partnerTopBox .under_line_3 {
    border-bottom : 3px solid #E3B74C;
  }

  #partnerBox {
    width : 100%;
    height : auto;
  }
  
  #partnerBox {
    width : 100%;
    height : auto;
    background-color : #fff;
  }
  
  .partner_list {
    width : 100%;
    height : auto;
    padding : 100px 0;
  }
  
  .partner_list ul {
    display: flex;
    width : 80%;
    height : auto;
    margin : auto;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  .partner_list li {
    width : 200px;
    height : 150px;
    margin : 40px 20px;
    background-position: 50% 50%;
    background-size: 70%;
    background-repeat: no-repeat;
  }
  
  .partner_list li a {
    position: relative;
    display: block;
    width : 100%;
    height : 100%;
  }
  
  .partner_list li a:focus {
    outline: 0;
  }
  
  .partner_list li a:after {
    position: absolute;
    top : 0;
    left : 0;
    right : 0;
    bottom : 0;
    margin : auto;
    content: "";
    display: block;
    width: 98%;
    height : 98%;
    background-color : rgba(255,255,255,0.75);
    transition: all 500ms ease;
  }
  
  .partner_list li a:hover:after,
  .partner_list li a:focus:after {
    background-color: transparent;
  }
  
  
  .black_area {
    background-color : #ccc;
    padding-bottom : 300px;
  }

  .black_area li a:after {
    background-color : rgba(0,0,0,0.1);
  }
  
  .black_area li a:hover:after,
  .black_area li a:focus:after {
    background-color: transparent;
  }
}