/*---------------------------------------------------
    LESS Elements 0.9
  ---------------------------------------------------
    A set of useful LESS mixins
    More info at: http://lesselements.com
  ---------------------------------------------------*/
.universalbanner {
  overflow: hidden;
}
.universalbanner__link {
  position: relative;
  height: 90px;
  display: block;
  overflow: hidden;
}
.universalbanner__no_btn .center {
  padding-left: 110px;
}
.universalbanner__no_btn .universalbanner__btn {
  display: none!important;
}
.pc .universalbanner__no_btn .center {
  padding-left: 75px;
}
.tablet .universalbanner__no_btn .center {
  padding-left: 68px;
}
.phone .universalbanner__no_btn .center {
  padding-left: 0px;
  padding-top: 15px;
}
/* bg */
.universalbanner__bg {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
}
/* percent */
.universalbanner__percent {
  position: relative;
  z-index: 3;
  float: left;
  width: 245px;
  text-align: right;
  color: #FFF;
  margin-right: 30px;
}
.universalbanner__percent__image_sale {
  text-align: center;
  height: 90px;
  line-height: 90px;
}
.universalbanner__percent__image_sale svg {
  width: 160px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
}
.universalbanner__percent__xx {
  font-size: 75px;
  line-height: 90px;
  font-weight: 700;
}
.universalbanner__percent__2xx {
  font-size: 60px;
  line-height: 90px;
  font-weight: 700;
}
.universalbanner__percent__sale_name {
  font-size: 37px;
  line-height: 35px;
  font-weight: 700;
  text-align: center;
  padding-top: 9px;
}
.universalbanner__percent__upto_xx {
  font-size: 58px;
  line-height: 56px;
  font-weight: 700;
  text-align: center;
  padding-top: 1px;
}
.universalbanner__percent__upto_xx span {
  display: block;
  font-weight: 700;
  margin-bottom: 0px;
  font-size: 32px;
  line-height: 28px;
}
.pc .universalbanner__percent {
  width: 145px;
  margin-right: 24px;
}
.pc .universalbanner__percent__image_sale svg {
  width: 120px;
  height: 60px;
}
.pc .universalbanner__percent__xx {
  font-size: 50px;
}
.pc .universalbanner__percent__2xx {
  font-size: 38px;
}
.pc .universalbanner__percent__sale_name {
  font-size: 30px;
  line-height: 28px;
  padding-top: 14px;
}
.pc .universalbanner__percent__upto_xx {
  font-size: 45px;
  line-height: 41px;
  padding-top: 14px;
}
.pc .universalbanner__percent__upto_xx span {
  font-size: 25px;
  line-height: 21px;
}
.tablet .universalbanner__percent {
  width: 92px;
  margin-right: 16px;
}
.tablet .universalbanner__percent__image_sale svg {
  width: 100px;
  height: 50px;
}
.tablet .universalbanner__percent__xx {
  font-size: 35px;
}
.tablet .universalbanner__percent__2xx {
  font-size: 23px;
}
.tablet .universalbanner__percent__sale_name {
  font-size: 18px;
  line-height: 20px;
  padding-top: 23px;
}
.tablet .universalbanner__percent__upto_xx {
  font-size: 32px;
  line-height: 32px;
  padding-top: 18px;
}
.tablet .universalbanner__percent__upto_xx span {
  font-size: 22px;
  line-height: 20px;
}
.phone .universalbanner__percent {
  width: 100%;
  float: none;
  text-align: center;
  margin-right: 0px;
}
.phone .universalbanner__percent__xx {
  font-size: 35px;
  line-height: 35px;
  padding-top: 0px;
}
.phone .universalbanner__percent__2xx {
  font-size: 23px;
  line-height: 23px;
  padding-top: 7px;
}
.phone .universalbanner__percent__sale_name {
  font-size: 17px;
  line-height: 17px;
  padding-top: 7px;
  margin-bottom: 5px;
}
.phone .universalbanner__percent__sale_name br {
  display: none;
}
.phone .universalbanner__percent__upto_xx {
  font-size: 17px;
  line-height: 17px;
  padding-top: 7px;
  margin-bottom: 5px;
}
.phone .universalbanner__percent__upto_xx span {
  display: inline;
  font-size: 17px;
  line-height: 17px;
}
/* text */
.universalbanner__text {
  position: relative;
  z-index: 3;
  width: 574px;
  margin-right: 30px;
  float: left;
  text-align: center;
  font-weight: 700;
  color: #FFF;
}
.universalbanner__text__one_line_big {
  font-size: 43px;
  line-height: 90px;
}
.universalbanner__text__big_small {
  padding-top: 7px;
  font-size: 25px;
  line-height: 27px;
  text-align: left;
}
.universalbanner__text__big_small span {
  font-weight: 700;
  display: block;
  font-size: 40px;
  line-height: 42px;
}
.universalbanner__text__two_equal {
  text-align: left;
  font-size: 25px;
  line-height: 32px;
  padding-top: 12px;
}
.pc .universalbanner__text {
  width: 392px;
  margin-right: 24px;
}
.pc .universalbanner__text__one_line_big {
  font-size: 28px;
}
.pc .universalbanner__text__big_small {
  padding-top: 16px;
  font-size: 20px;
  line-height: 28px;
}
.pc .universalbanner__text__big_small span {
  font-size: 28px;
  line-height: 34px;
}
.pc .universalbanner__text__two_equal {
  font-size: 18px;
  line-height: 22px;
  padding-top: 25px;
}
.tablet .universalbanner__text {
  width: 328px;
  margin-right: 16px;
}
.tablet .universalbanner__text__one_line_big {
  font-size: 23px;
}
.tablet .universalbanner__text__big_small {
  padding-top: 24px;
  font-size: 16px;
  line-height: 16px;
}
.tablet .universalbanner__text__big_small span {
  font-size: 23px;
  line-height: 25px;
}
.tablet .universalbanner__text__two_equal {
  font-size: 15px;
  line-height: 24px;
  padding-top: 20px;
}
.phone .universalbanner__text {
  width: 100%;
  float: none;
  margin-right: 0px;
}
.phone .universalbanner__text__one_line_big {
  font-size: 20px;
  line-height: 20px;
  margin-bottom: 6px;
}
.phone .universalbanner__text__big_small {
  margin-bottom: 9px;
  text-align: center;
  padding-top: 11px;
  font-size: 14px;
  line-height: 16px;
}
.phone .universalbanner__text__big_small span {
  font-size: 20px;
  line-height: 24px;
}
.phone .universalbanner__text__two_equal {
  margin-bottom: 7px;
  font-size: 15px;
  line-height: 20px;
  padding-top: 8px;
  text-align: center;
}
/* btn */
.universalbanner__btn {
  position: relative;
  z-index: 3;
  margin-top: 17px;
  float: right;
  width: 192px;
  height: 54px;
  line-height: 54px;
  -webkit-border-radius: 54px;
  -moz-border-radius: 54px;
  border-radius: 54px;
  background: #FFF;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  vertical-align: middle;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.21);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.21);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.21);
  color: #2e1a4c;
}
.universalbanner__btn svg {
  vertical-align: middle;
  display: inline-block;
  width: 23px;
  height: 23px;
  margin-right: 10px;
  position: relative;
  top: -1px;
}
.universalbanner__btn__hide_icon svg {
  display: none;
}
.pc .universalbanner__btn {
  margin-top: 26px;
  width: 139px;
  height: 39px;
  line-height: 39px;
  -webkit-border-radius: 39px;
  -moz-border-radius: 39px;
  border-radius: 39px;
  font-size: 13px;
}
.pc .universalbanner__btn svg {
  width: 20px;
  height: 20px;
  margin-right: 2px;
  position: relative;
  top: -1px;
}
.tablet .universalbanner__btn {
  margin-top: 26px;
  width: 126px;
  height: 36px;
  line-height: 36px;
  -webkit-border-radius: 36px;
  -moz-border-radius: 36px;
  border-radius: 36px;
  font-size: 11px;
}
.tablet .universalbanner__btn svg {
  width: 20px;
  height: 20px;
  margin-right: 2px;
  position: relative;
  top: -1px;
}
.phone .universalbanner__btn {
  float: none;
  margin: 0 auto;
  width: 108px;
  height: 24px;
  line-height: 24px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  font-size: 10px;
}
.phone .universalbanner__btn svg {
  width: 16px;
  height: 14px;
  margin-right: 2px;
  position: relative;
  top: -1px;
}
/* counter */
.universalbanner__counter {
  position: relative;
  z-index: 3;
  line-height: 90px;
  float: left;
  width: 300px;
  color: #FFF;
  text-align: center;
  font-size: 52px;
}
.universalbanner__counter span {
  display: inline-block;
  vertical-align: top;
}
.universalbanner__counter span.spacer {
  position: relative;
  top: -3px;
  margin: 0px -4px;
}
.universalbanner__counter * {
  color: #FFF;
}
.universalbanner__counter__bold {
  font-wieght: 700;
  font-size: 50px;
}
.universalbanner__counter__bold * {
  font-weight: 700;
}
.pc .universalbanner__counter {
  width: 185px;
  font-size: 32px;
}
.pc .universalbanner__counter__bold {
  font-size: 30px;
}
.tablet .universalbanner__counter {
  width: 142px;
  font-size: 25px;
}
.tablet .universalbanner__counter__bold {
  font-size: 25px;
}
.phone .universalbanner__counter {
  display: none!important;
}
/* pattern */
.universalbanner__pattern {
  position: absolute;
  z-index: 2;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.universalbanner__pattern__shopping_cart { 
  background-image: url(../images/universal_headerbanner/pattern_shopping_cart.png);
}
/* color */
.universalbanner__pink_blue .universalbanner__bg {
  background-color: #e719d0;
  background-image: -webkit-gradient(linear, left top, right top, from(#e719d0), to(#0b98d9));
  background-image: -webkit-linear-gradient(left, #e719d0, #0b98d9);
  background-image: -moz-linear-gradient(left, #e719d0, #0b98d9);
  background-image: -ms-linear-gradient(left, #e719d0, #0b98d9);
  background-image: -o-linear-gradient(left, #e719d0, #0b98d9);
}
.universalbanner__pink_blue .universalbanner__btn svg {
  fill: #6420e4;
}
.universalbanner__red .universalbanner__bg {
  background-color: #bb0000;
  background-image: -webkit-gradient(linear, left top, right top, from(#bb0000), to(#e50d0d));
  background-image: -webkit-linear-gradient(left, #bb0000, #e50d0d);
  background-image: -moz-linear-gradient(left, #bb0000, #e50d0d);
  background-image: -ms-linear-gradient(left, #bb0000, #e50d0d);
  background-image: -o-linear-gradient(left, #bb0000, #e50d0d);
}
.universalbanner__red .universalbanner__btn svg {
  fill: #6420e4;
}
.universalbanner__blue .universalbanner__bg {
  background-color: #0053b9;
  background-image: -webkit-gradient(linear, left top, right top, from(#0053b9), to(#0da0e5));
  background-image: -webkit-linear-gradient(left, #0053b9, #0da0e5);
  background-image: -moz-linear-gradient(left, #0053b9, #0da0e5);
  background-image: -ms-linear-gradient(left, #0053b9, #0da0e5);
  background-image: -o-linear-gradient(left, #0053b9, #0da0e5);
}
.universalbanner__blue .universalbanner__btn svg {
  fill: #6420e4;
}
.universalbanner__pink_orange .universalbanner__bg {
  background-color: #e719d0;
  background-image: -webkit-gradient(linear, left top, right top, from(#e719d0), to(#fba90a));
  background-image: -webkit-linear-gradient(left, #e719d0, #fba90a);
  background-image: -moz-linear-gradient(left, #e719d0, #fba90a);
  background-image: -ms-linear-gradient(left, #e719d0, #fba90a);
  background-image: -o-linear-gradient(left, #e719d0, #fba90a);
}
.universalbanner__pink_orange .universalbanner__btn svg {
  fill: #6420e4;
}
.universalbanner__darkblue_pink .universalbanner__bg {
  background-color: #3619e7;
  background-image: -webkit-gradient(linear, left top, right top, from(#3619e7), to(#ed0954));
  background-image: -webkit-linear-gradient(left, #3619e7, #ed0954);
  background-image: -moz-linear-gradient(left, #3619e7, #ed0954);
  background-image: -ms-linear-gradient(left, #3619e7, #ed0954);
  background-image: -o-linear-gradient(left, #3619e7, #ed0954);
}
.universalbanner__darkblue_pink .universalbanner__btn svg {
  fill: #3713e1;
}
.universalbanner__see_green .universalbanner__bg {
  background-color: #11b237;
  background-image: -webkit-gradient(linear, left top, right top, from(#11b237), to(#0557d1));
  background-image: -webkit-linear-gradient(left, #11b237, #0557d1);
  background-image: -moz-linear-gradient(left, #11b237, #0557d1);
  background-image: -ms-linear-gradient(left, #11b237, #0557d1);
  background-image: -o-linear-gradient(left, #11b237, #0557d1);
}
.universalbanner__see_green .universalbanner__btn svg {
  fill: #0fad3b;
}
.universalbanner__green .universalbanner__bg {
  background-color: #049b40;
  background-image: -webkit-gradient(linear, left top, right top, from(#049b40), to(#41d032));
  background-image: -webkit-linear-gradient(left, #049b40, #41d032);
  background-image: -moz-linear-gradient(left, #049b40, #41d032);
  background-image: -ms-linear-gradient(left, #049b40, #41d032);
  background-image: -o-linear-gradient(left, #049b40, #41d032);
}
.universalbanner__green .universalbanner__btn svg {
  fill: #0fad3b;
}
.universalbanner__orange .universalbanner__bg {
  background-color: #e95831;
  background-image: -webkit-gradient(linear, left top, right top, from(#e95831), to(#fba90a));
  background-image: -webkit-linear-gradient(left, #e95831, #fba90a);
  background-image: -moz-linear-gradient(left, #e95831, #fba90a);
  background-image: -ms-linear-gradient(left, #e95831, #fba90a);
  background-image: -o-linear-gradient(left, #e95831, #fba90a);
}
.universalbanner__orange .universalbanner__btn svg {
  fill: #e9582b;
}
.phone .universalbanner__phone_hide_percent .universalbanner__percent {
  display: none!important;
}

.banner_close_btn {
  z-index: 3;
  display: block;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 20px;
  height: 20px;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  text-align: center;
  line-height: 18px;
}

.banner_close_btn svg {
  fill: #fff;
}

.phone {
  .banner_close_btn {
    width: 10px;
    height: 10px;
    line-height: 8px;
  }
}