@charset "UTF-8";
/* CSS Document */
/*******************************************
	SITE: マンナン
	FileName: top.css
	LastUpdate: 2016/02/01
********************************************/
.home .heroArea {
  background-image: url(/top/images/heroarea_bg.jpg);
  background-repeat: repeat-x;
  background-position: center top;
  width: 100%;
  height: 562px;
  margin: 0;
}

.slide_area {
  width: 1200px;
  margin: 0 auto;
}
.slide_area .bxslider {
  width: 1200px;
  margin: 0 auto;
}

.slider li:nth-child(2) img, .slider li:nth-child(3) img {
  display: none;
}

.mainConts {
  padding: 70px 0 0 0;
}

/*----------------*/
@media (max-width: 1200px) {
  .slide_area {
    width: 100%;
    height: auto;
  }
  .slide_area .bxslider {
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }
  .slide_area .bxslider img {
    width: 100%;
    height: auto;
  }
}
/*--NewsBox-----------------------------------------*/
.NewsBox {
  margin-bottom: 20px;
  padding-top: 20px;
}
.NewsBox h2 {
  width: 750px;
  float: left;
  color: #ac64aa;
  margin-bottom: 15px;
}
.NewsBox .ppBtn {
  float: right;
  width: 120px;
}
.NewsBox .newsList {
  width: 98%;
  padding-bottom: 30px;
  margin: 20px auto 0;
}
.NewsBox .newsList dl {
  border-bottom: #e9dcb8 1px solid;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.NewsBox .newsList dt {
  width: 160px;
  float: left;
}
.NewsBox .newsList dt em {
  background-color: #9ac818;
  padding: 5px 10px;
  display: inline-block;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #ffffff;
  font-weight: bold;
}
.NewsBox .newsList dd {
  padding-left: 170px;
}
.NewsBox .newsList a {
  text-decoration: underline;
}

/*--linupBox-----------------------------------------*/
.linupBox {
  margin-bottom: 20px;
}
.linupBox h2 {
  width: 750px;
  float: left;
  color: #ac64aa;
  padding-left: 50px;
  background: url(/common/images/icn_lineup.png) no-repeat 0px 0px;
  margin-bottom: 15px;
}
.linupBox .ppBtn {
  float: right;
  width: 120px;
}
.linupBox .linupBoxIn {
  clear: both;
  background-color: #f6e3aa;
  padding: 0 12px;
}
.linupBox .linupBoxIn li {
  float: left;
}

/*----------------------------*/
.conts2Clm {
  margin-bottom: 50px;
}
.conts2Clm .contsL {
  float: left;
  width: 420px;
  position: relative;
}

.new {
  padding-top: 30px;
  position: relative;
  margin-bottom: 20px;
}
.new h2 {
  color: #ac64aa;
}
.new .newItem {
  width: 960px;
  margin-bottom: 80px;
}

/*
.new .newItem{
  background:url(/top/images/new_item_bg.png) no-repeat 0 0;
  width:426px;
  height:316px;
}
*/
.lineup_slider li {
  width: 240px;
}

.new .bx-wrapper {
  width: 240px;
  position: relative;
}

.advBox .movie_bg {
  background: #363636;
  padding: 15px 0px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.advBox .movie_bg a {
  color: #fff;
  font-size: 12px;
  padding-left: 20px;
  margin-left: 20px;
  background-image: url(../../common/images/icn_arrow.png);
  background-repeat: no-repeat;
  background-position: left center;
  text-decoration: underline;
  display: block;
}
.advBox .movie_bg .mv_area {
  width: 90%;
  margin: 0 auto 5px;
  position: relative;
  padding-top: 50.4%;
}
.advBox .movie_bg .mv_area iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.advBox h2 {
  color: #ac64aa;
  margin-bottom: 20px;
  float: left;
}
.advBox .ppBtn {
  width: 140px;
  float: right;
}

.conts2Clm .contsR {
  float: right;
  width: 490px;
}

.kireiBox {
  margin-top: 0px;
}
.kireiBox h2 {
  color: #ac64aa;
  font-size: 24px;
  text-shadow: 0 0 13px rgba(255, 255, 255, 0.95);
  padding: 0 0 5px 0;
  background-image: url(/lineup/images/lineup_h2_dot.png);
  background-repeat: repeat-x;
  background-position: left bottom;
  margin-bottom: 15px;
  /*display: inline-block;*/
  text-align: center;
}
.kireiBox .ppBtn {
  width: 150px;
  float: right;
}
.kireiBox .whiteBox {
  background-color: #fff;
  overflow: hidden;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  padding-top: 20px;
  padding-right: 30px;
  padding-left: 30px;
  padding-bottom: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.kireiBox .whiteBox p {
  font-size: 14px;
  line-height: 1.8;
  color: #000;
  margin-bottom: 0px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.95);
}
.kireiBox .whiteBox .left {
  float: left;
  width: 80%;
}
.kireiBox .whiteBox .right {
  float: right;
  width: 20%;
}
.kireiBox .whiteBox .right img {
  width: 100%;
}
.kireiBox .greenBox {
  background-color: #9ac818;
  border-radius: 0 0 10px 10px;
  height: 15px;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.kireiBox .greenBox img {
  position: absolute;
  left: 30px;
  bottom: 15px;
}

/*.kireiBox .imgBox{
  position:relative;
  width:100%;
  height:auto;
  z-index:1;
}*/
/*.kireiBox .contsBox{
  position:absolute;
   z-index:99;
   top:38px;
   left:43px;
}*/
/*--sceneArea-----------------------------------------*/
.sceneArea {
  clear: both;
  background-color: #f2dea5;
}
.sceneArea .contArea {
  width: 960px;
  margin: 0 auto;
}
.sceneArea .contArea dl {
  width: 50%;
  overflow: hidden;
  float: left;
}
.sceneArea .contArea dl dd {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  width: 50%;
  min-height: 210px;
  position: relative;
  color: #fff;
  font-size: 12px;
  padding: 25px;
}
.sceneArea .contArea dl dt {
  width: 50%;
  height: auto;
  float: left;
}
.sceneArea .contArea dl.scene03 dt, .sceneArea .contArea dl.scene04 dt {
  float: right;
}
.sceneArea .contArea dl dt img {
  width: 100%;
  height: auto;
}
.sceneArea .contArea dl dd span.ttl {
  font-weight: bold;
  font-size: 20px;
  padding-bottom: 10px;
  display: block;
}
.sceneArea .contArea dl dd span.scene_num {
  display: block;
  font-weight: bold;
  background-image: url(../images/fukidashi.png);
  background-repeat: no-repeat;
  width: 81px;
  height: 36px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  margin-bottom: 5px;
}
.sceneArea .contArea dl.scene01 dd:after, .sceneArea .contArea dl.scene02 dd:after, .sceneArea .contArea dl.scene05 dd:after, .sceneArea .contArea dl.scene06 dd:after {
  content: ' ';
  width: 0;
  height: 0;
  position: absolute;
  border: 10px solid transparent;
  top: 50%;
  left: -20px;
}
.sceneArea .contArea dl.scene03 dd:after, .sceneArea .contArea dl.scene04 dd:after {
  content: ' ';
  width: 0;
  height: 0;
  position: absolute;
  border: 10px solid transparent;
  top: 50%;
  right: -20px;
}
.sceneArea .contArea dl.scene01 dd:after {
  border-right-color: #f56060;
}
.sceneArea .contArea dl.scene02 dd:after {
  border-right-color: #fd9c3d;
}
.sceneArea .contArea dl.scene03 dd:after {
  border-left-color: #9ac818;
}
.sceneArea .contArea dl.scene04 dd:after {
  border-left-color: #b075ae;
}
.sceneArea .contArea dl.scene05 dd:after {
  border-right-color: #fabc00;
}
.sceneArea .contArea dl.scene06 dd:after {
  border-right-color: #f56060;
}
.sceneArea .contArea dl.scene01 {
  background-color: #f56060;
}
.sceneArea .contArea dl.scene02 {
  background-color: #fd9c3d;
}
.sceneArea .contArea dl.scene03 {
  background-color: #9ac818;
}
.sceneArea .contArea dl.scene04 {
  background-color: #b075ae;
}
.sceneArea .contArea dl.scene05 {
  background-color: #fabc00;
}
.sceneArea .contArea dl.scene06 {
  background-color: #f56060;
}
.sceneArea .contArea dl.scene01 dd span.scene_num {
  color: #f56060;
}
.sceneArea .contArea dl.scene02 dd span.scene_num {
  color: #fd9c3d;
}
.sceneArea .contArea dl.scene03 dd span.scene_num {
  color: #9ac818;
}
.sceneArea .contArea dl.scene04 dd span.scene_num {
  color: #b075ae;
}
.sceneArea .contArea dl.scene05 dd span.scene_num {
  color: #fabc00;
}
.sceneArea .contArea dl.scene06 dd span.scene_num {
  color: #f56060;
}

/*------------------------------------------------------------
	.pickupWrap
------------------------------------*/
.home .pickupWrap {
  clear: both;
  position: relative;
  padding: 50px 0 25px 0;
  background-color: #ffffff;
}
.home .pickupArea {
  margin-bottom: 50px;
}
.home .pickupWrap h2 {
  color: #ac64aa;
  margin-bottom: 20px;
}
.home .pickupWrap .contsL {
  float: left;
  width: 470px;
  position: relative;
}
.home .pickupWrap .brandSlide {
  background-color: #fff3d0;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  height: 235px;
  width: 460px;
  padding: 10px 0 0 0;
}
.home .pickupWrap .brandSlide .bx-wrapper {
  width: 300px;
  position: relative;
}
.home .pickupWrap .contsR {
  float: right;
  width: 470px;
}
.home .recomBnr li {
  margin-bottom: 25px;
}

@media (max-width: 960px) {
  .home .heroArea {
    background-size: auto 100%;
    width: 100%;
    height: auto;
    margin: 0 0 30px;
  }

  .slide_area {
    width: 100%;
    height: auto;
  }
  .slide_area .bxslider {
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }
  .slide_area .bxslider img {
    width: 100%;
    height: auto;
  }

  .mainConts {
    padding: 40px 0 0 0;
  }

  /*--NewsBox-----------------------------------------*/
  .NewsBox {
    width: 100%;
  }
  .NewsBox h2 {
    width: 55%;
    margin-left: 3%;
    float: left;
    color: #ac64aa;
    margin-bottom: 15px;
  }
  .NewsBox .ppBtn {
    float: right;
    width: 160px;
    margin-right: 3%;
  }

  /*--linupBox-----------------------------------------*/
  .linupBox {
    width: 100%;
  }
  .linupBox h2 {
    width: 55%;
    margin-left: 3%;
    float: left;
    color: #ac64aa;
    padding-left: 50px;
    background: url(/common/images/icn_lineup.png) no-repeat 0px 0px;
    margin-bottom: 15px;
  }
  .linupBox .ppBtn {
    float: right;
    width: 160px;
    margin-right: 3%;
  }
  .linupBox .linupBoxIn li {
    float: left;
    width: 25%;
    text-align: center;
  }

  /*----------------------------*/
  .conts2Clm {
    margin-bottom: 20px;
  }
  .conts2Clm .contsL {
    float: left;
    width: 46%;
    margin: 0 1% 0 3%;
    position: relative;
  }

  .new {
    margin-bottom: 20px;
  }
  .new h2 {
    position: relative;
    top: 0px;
    color: #ac64aa;
  }

  /*.new .newItem{
    background:url(/top/images/new_item_bg.png) no-repeat 0 0;
    width:100%;
    height:316px;
  }
  .new .bx-wrapper{
    width:240px;
    position:relative;
  }*/
  .advBox h2 {
    color: #ac64aa;
    margin-bottom: 20px;
    float: left;
  }
  .advBox .ppBtn {
    width: 140px;
    float: right;
  }

  .conts2Clm .contsR {
    float: right;
    width: 46%;
    margin: 0 3% 0 1%;
  }

  .kireiBox {
    position: relative;
    margin-top: 30px;
  }
  .kireiBox h2 {
    font-size: 18px;
    padding: 0 0 5px 0;
    margin-bottom: 15px;
  }
  .kireiBox .ppBtn {
    width: 180px;
    float: right;
  }
  .kireiBox .whiteBox {
    padding-right: 5%;
    padding-left: 5%;
  }
  .kireiBox .whiteBox .left {
    float: left;
    width: 80%;
  }
  .kireiBox .whiteBox .right {
    float: right;
    width: 20%;
  }
  .kireiBox .whiteBox .right img {
    margin-top: 60%;
    width: 100%;
  }
  .kireiBox .greenBox img {
    left: 50%;
    bottom: 15px;
    margin-left: -50%;
  }

  /*--sceneArea-----------------------------------------*/
  .sceneArea .contArea {
    width: 100%;
    margin: 0 auto;
  }
  .sceneArea .contArea dl {
    width: 100%;
    overflow: hidden;
    float: none;
  }
  .sceneArea .contArea dl dt {
    width: 40%;
  }
  .sceneArea .contArea dl dd {
    width: 60%;
    height: auto;
    position: relative;
    color: #fff;
    font-size: 16px;
    padding: 25px;
  }
  .sceneArea .contArea dl dd span.ttl {
    font-weight: bold;
    font-size: 28px;
    padding-bottom: 10px;
    display: block;
  }
  .sceneArea .contArea dl dd span.scene_num {
    display: block;
    font-weight: bold;
    background-image: url(../images/fukidashi.png);
    background-repeat: no-repeat;
    width: 81px;
    height: 36px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    margin-bottom: 5px;
  }
  .sceneArea .contArea dl dd:after {
    border: none;
  }
  .sceneArea .contArea dl.scene01 dd:before, .sceneArea .contArea dl.scene03 dd:before, .sceneArea .contArea dl.scene05 dd:before {
    content: ' ';
    width: 0;
    height: 0;
    position: absolute;
    border: 10px solid transparent;
    top: 50%;
    left: -20px;
  }
  .sceneArea .contArea dl.scene02 dd:before, .sceneArea .contArea dl.scene04 dd:before, .sceneArea .contArea dl.scene06 dd:before {
    content: ' ';
    width: 0;
    height: 0;
    position: absolute;
    border: 10px solid transparent;
    top: 50%;
    right: -20px;
  }
  .sceneArea .contArea dl.scene01 dd:before {
    border-right-color: #f56060;
  }
  .sceneArea .contArea dl.scene02 dd:before {
    border-left-color: #fd9c3d;
  }
  .sceneArea .contArea dl.scene03 dd:before {
    border-right-color: #9ac818;
  }
  .sceneArea .contArea dl.scene04 dd:before {
    border-left-color: #b075ae;
  }
  .sceneArea .contArea dl.scene05 dd:before {
    border-right-color: #fabc00;
  }
  .sceneArea .contArea dl.scene06 dd:before {
    border-left-color: #f56060;
  }
  .sceneArea .contArea dl.scene01 dt, .sceneArea .contArea dl.scene03 dt, .sceneArea .contArea dl.scene05 dt {
    float: left;
  }
  .sceneArea .contArea dl.scene01 dd, .sceneArea .contArea dl.scene03 dd, .sceneArea .contArea dl.scene05 dd, .sceneArea .contArea dl.scene02 dt, .sceneArea .contArea dl.scene04 dt, .sceneArea .contArea dl.scene06 dt {
    float: right;
  }
  .sceneArea .contArea dl.scene02 dd, .sceneArea .contArea dl.scene04 dd, .sceneArea .contArea dl.scene06 dd {
    fleoat: left;
  }

  /*------------------------------------------------------------
  	.pickupWrap
  ------------------------------------*/
  .home .pickupWrap {
    position: relative;
    padding: 50px 0 25px 0;
    background-color: #ffffff;
  }
  .home .pickupArea {
    margin-bottom: 50px;
  }
  .home .pickupWrap h2 {
    color: #ac64aa;
    margin-bottom: 20px;
  }
  .home .pickupWrap .contsL {
    float: left;
    width: 46%;
    margin: 0 1% 0 3%;
    position: relative;
  }
  .home .pickupWrap .brandSlide {
    background-color: #fff3d0;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    height: 235px;
    width: 100%;
    padding-top: 10px;
  }
  .home .pickupWrap .brandSlide .bx-wrapper {
    width: 300px;
    position: relative;
  }
  .home .pickupWrap .contsR {
    float: right;
    width: 46%;
    margin: 0 3% 0 1%;
  }
  .home .recomBnr li {
    margin-bottom: 25px;
  }
}
@media (max-width: 640px) {
  /*--NewsBox-----------------------------------------*/
  .NewsBox h2 {
    width: 40%;
    float: left;
    margin-bottom: 15px;
  }
  .NewsBox .ppBtn {
    float: right;
    width: 160px;
    margin-right: 3%;
    margin-bottom: 15px;
    text-align: center;
  }

  /*--linupBox-----------------------------------------*/
  .linupBox h2 {
    width: 40%;
    float: left;
    margin-bottom: 15px;
  }
  .linupBox .ppBtn {
    float: right;
    width: 160px;
    margin-right: 3%;
    margin-bottom: 15px;
  }

  /*----------------------------*/
  .conts2Clm {
    margin-bottom: 40px;
  }
  .conts2Clm .contsL {
    float: none;
    width: 94%;
    margin: 0 3%;
  }

  .new h2 {
    position: relative;
    margin-left: 5%;
    top: 0px;
    color: #ac64aa;
  }
  .new .newItem {
    /*background:url(/top/images/new_item_bg.png) no-repeat 0 0;*/
    width: 100%;
    height: auto;
    padding-bottom: 40px;
  }
  .new .bx-wrapper {
    width: 240px;
    position: relative;
  }

  .advBox {
    width: 100%;
  }
  .advBox img {
    width: 100%;
  }
  .advBox h2 {
    float: left;
    margin-bottom: 15px;
  }
  .advBox .ppBtn {
    float: right;
    width: 160px;
    margin-bottom: 15px;
  }

  .conts2Clm .contsR {
    float: none;
    width: 94%;
    margin: 0 3%;
  }

  .kireiBox {
    width: 100%;
    margin-top: 30px;
    padding: 0;
  }
  .kireiBox h2 {
    font-size: 20px;
    padding: 0 0 5px 0;
    margin-bottom: 15px;
  }
  .kireiBox .ppBtn {
    width: 180px;
    float: right;
  }
  .kireiBox .whiteBox {
    padding-top: 30px;
    padding-right: 5%;
    padding-left: 5%;
    padding-bottom: 20px;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: cover;
  }
  .kireiBox .whiteBox p {
    margin-bottom: 10px;
    line-height: 1.7;
  }
  .kireiBox .whiteBox .right img {
    margin-top: 0;
    width: 100%;
  }
  .kireiBox .greenBox {
    height: 25px;
  }
  .kireiBox .greenBox img {
    left: 50%;
    bottom: 10px;
    margin-left: -45%;
    width: 90%;
  }

  /*--sceneArea-----------------------------------------*/
  .sceneArea .contArea dl dt {
    width: 50%;
  }
  .sceneArea .contArea dl dd {
    width: 50%;
    height: auto;
    position: relative;
    color: #fff;
    font-size: 14px;
    padding: 20px;
  }
  .sceneArea .contArea dl dd span.ttl {
    font-weight: bold;
    font-size: 22px;
    padding-bottom: 5px;
    display: block;
  }
  .sceneArea .contArea dl dd span.scene_num {
    display: block;
    font-weight: bold;
    background-image: url(../images/fukidashi.png);
    background-repeat: no-repeat;
    width: 81px;
    height: 36px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    margin-bottom: 5px;
  }

  /*------------------------------------------------------------
  	.pickupWrap
  ------------------------------------*/
  .home .pickupWrap {
    position: relative;
    padding: 30px 0 15px 0;
    background-color: #ffffff;
  }
  .home .pickupArea {
    margin-bottom: 30px;
  }
  .home .pickupWrap h2 {
    margin: 0 0 15px 3%;
    font-size: 18px;
  }
  .home .pickupWrap .contsL {
    float: none;
    width: 94%;
    margin: 0 3%;
  }
  .home .pickupWrap .brandSlide {
    height: auto;
    width: 100%;
    margin: 0 auto 5%;
    padding: 10px 0;
  }
  .home .pickupWrap .brandSlide li {
    text-align: center;
  }
  .home .pickupWrap .brandSlide li img {
    width: 96%;
    margin: auto;
  }
  .home .pickupWrap .brandSlide .bx-wrapper {
    width: 90%;
    position: relative;
  }
  .home .pickupWrap .contsR {
    float: none;
    width: 94%;
    margin: 0 3%;
  }
  .home .recomBnr li {
    margin-bottom: 10px;
    text-align: center;
  }
  .home .recomBnr li img {
    width: 100%;
  }
}
@media (max-width: 500px) {
  /*--sceneArea-----------------------------------------*/
  .sceneArea .contArea dl dt {
    width: 86%;
    margin: 20px auto 0;
  }
  .sceneArea .contArea dl dd {
    width: 100%;
    height: auto;
    min-height: 100px;
    position: relative;
    color: #fff;
    font-size: 14px;
    padding: 20px 7%;
  }
  .sceneArea .contArea dl dd span.ttl {
    font-weight: bold;
    font-size: 22px;
    padding-bottom: 5px;
    display: block;
  }
  .sceneArea .contArea dl dd span.scene_num {
    display: block;
    font-weight: bold;
    background-image: url(../images/fukidashi.png);
    background-repeat: no-repeat;
    width: 81px;
    height: 36px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    margin-bottom: 5px;
  }
  .sceneArea .contArea dl.scene01 dt, .sceneArea .contArea dl.scene03 dt, .sceneArea .contArea dl.scene05 dt, .sceneArea .contArea dl.scene01 dd, .sceneArea .contArea dl.scene03 dd, .sceneArea .contArea dl.scene05 dd, .sceneArea .contArea dl.scene02 dt, .sceneArea .contArea dl.scene04 dt, .sceneArea .contArea dl.scene06 dt, .sceneArea .contArea dl.scene02 dd, .sceneArea .contArea dl.scene04 dd, .sceneArea .contArea dl.scene06 dd {
    float: none;
  }

  /*--NewsBox-----------------------------------------*/
  .NewsBox h2 {
    width: 94%;
    float: left;
    margin: 0 3% 10px 3%;
  }
  .NewsBox .ppBtn {
    float: none;
    width: 180px;
    margin: 0 auto 20px;
  }

  /*--linupBox-----------------------------------------*/
  .linupBox h2 {
    width: 75%;
    float: left;
    margin: 0 0 10px 3%;
  }
  .linupBox .ppBtn {
    float: none;
    width: 180px;
    margin: 0 auto 20px;
  }
  .linupBox .linupBoxIn li {
    float: left;
    width: 50%;
    text-align: center;
  }

  /*--.advBox-----------------------------------------*/
  .advBox h2 {
    width: 90%;
    float: left;
    margin-bottom: 10px;
  }
  .advBox .ppBtn {
    float: none;
    width: 180px;
    margin: 0 auto 20px;
  }

  .kireiBox .whiteBox .right img {
    margin-top: 60%;
    width: 100%;
  }
}
.mangoBnr {
  margin: 0 auto 50px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .mangoBnr {
    margin: 0 3% 20px;
  }
}
.mangoBnr:hover {
  opacity: 0.8;
}
@media screen and (max-width: 768px) {
  .mangoBnr:hover {
    opacity: 1;
  }
}