/* BASIC css start */
#overlay_layer {
  display: none;
}

button img {
  display: block;
}

.wrap {
  position: relative;
  width: 100%;
  overflow:hidden;
}
.wrap * {
  font-family: "Roboto", sans-serif !important;
}
.wrap img {
    max-width: none;
    margin:0 auto;
    display:block;
    background:transparent;
}

.test{position:fixed; top:100px; left:20px; z-index:999;}

/*-------------------------------------*/

.brpgMain .mainban{width:100%; height:219px; background:url("/design/skinfood/event/brpg-main-ban-m.jpg") no-repeat center / cover;}

.brpgMain .txt{width:calc(100% - 100px); background:rgba(123,122,23,0); margin:-12.8vw auto 0; position:relative; opacity:1; transform:translateY(30px); transition:all 2.3s ease; -webkit-transition:all 2.3s ease; -moz-transition:all 2.3s ease;}
.brpgMain .txt.on{transform: translateY(0px); opacity:1; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}

.brpgMain .txt h2{font-size:41px; letter-spacing:-1.75px; font-weight:bold; color:#2e2e2e; line-height:1.2;}
.brpgMain .txt p{padding-top:15px; font-size:14px; letter-spacing:-0.3px; color:#2e2e2e; line-height:1.6; font-weight:normal;}
.brpgMain .txt p strong{font-size:17px; font-weight:600; letter-spacing:-0.5px; color:#2e2e2e;}

.brpgMain .txt img.arrw{width:14px; position:absolute; bottom:-30px; right:0; animation:updown 2s infinite ease-in-out;}

@keyframes updown{
    0%{bottom:-30px;}
    50%{bottom:-50px;}
    100%{bottom:-30px;}
}


.brpg .title{font-size:31px; letter-spacing:-1px; color:#000000; line-height:1.2; text-align:center; font-weight:bold;}

.brpgSumm{padding-top:166px;}
.brpgSumm .summInner{width:345px; margin:0 auto; background:rgba(111,24,134,0); padding:38px 0 62px; position:relative;}
.brpgSumm .summInner:before{content:""; display:block; width:345px; height:621px; background:url("/design/skinfood/event/brpg-sum-blk-m.png") no-repeat center / cover; position:absolute; top:38px; left:0; z-index:-1;}

.brpgSumm .summInner ul{width:82%; margin:55px auto 0; background:rgba(255,12,123,0);}
.brpgSumm .summInner ul > li{position:relative;}
.brpgSumm .summInner ul > li h4{font-size:18px; letter-spacing:-0.5px; color:#2e2e2e; font-weight:bold; padding-bottom:12px; position:relative;}
.brpgSumm .summInner ul > li p{font-size:12px; letter-spacing:-0.3px; line-height:1.5; color:#2e2e2e; padding-top:10px;}

.brpgSumm .summInner ul > li:nth-child(1) h4:after{content:""; display:block; width:70%; height:3px; background:#ffcd00; border-radius:3px; position:absolute; bottom:0; left:0;}
.brpgSumm .summInner ul > li:nth-child(1) img{width:134px; position:absolute; top:-32px; right:20px;}

.brpgSumm .summInner ul > li:nth-child(2){padding-top:50px;}
.brpgSumm .summInner ul > li:nth-child(2) h4{text-align:right;}
.brpgSumm .summInner ul > li:nth-child(2) h4:after{content:""; display:block; width:80%; height:3px; background:#ffcd00; border-radius:3px; position:absolute; bottom:0; right:0;}
.brpgSumm .summInner ul > li:nth-child(2) p{text-align:right;}
.brpgSumm .summInner ul > li:nth-child(2) img{width:120px; position:absolute; top:33px; left:-12px;}

.brpgSumm .summInner ul > li:nth-child(3){padding-top:58px;}
.brpgSumm .summInner ul > li:nth-child(3) h4:after{content:""; display:block; width:70%; height:3px; background:#ffcd00; border-radius:3px; position:absolute; bottom:0; left:0;}
.brpgSumm .summInner ul > li:nth-child(3) img{width:112px; position:absolute; top:28px; right:5px;}

.brpgSumm .summInner img.deco1{width:77px; position:absolute; top:170px; right:-13px;}
.brpgSumm .summInner img.deco2{width:83px; position:absolute; bottom:-10px; left:-10px;}


.brpgBV{padding:140px 0 0;}
.brpgBV .title{padding-bottom:41px;}
.brpgBV .cntWrap{width:100%; height:325px; margin:0 auto; position:relative;}

.brpgBV .cntWrap ul{width:100%; height:100%; position:relative;}
.brpgBV .cntWrap ul > li{position:absolute; overflow:hidden; width:33.3333%; height:100%; top:0; left:0; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease;}
.brpgBV .cntWrap ul > li img.bg{position:absolute; top:0; left:0; width:100vw; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease;}
.brpgBV .cntWrap ul > li p{position:absolute; top:215px; left:15px; color:#fff; z-index:10; width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; padding:0; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease;}
.brpgBV .cntWrap ul > li p strong{font-size:28px; font-weight:bold; letter-spacing:-0.5px; display:block; padding-bottom:10px;}
.brpgBV .cntWrap ul > li p b{font-size:18px; font-weight:bold; letter-spacing:-0.5px; position:relative; display:block; line-height:1.2; padding-bottom:30px;}
.brpgBV .cntWrap ul > li p b:after{content:""; display:block; width:14px; height:6px; background:url("/design/skinfood/event/brpg-bv-arrw-m.png") no-repeat center / cover; position:absolute; top:8px; left:80px; opacity:1; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease;}
.brpgBV .cntWrap ul > li p span{display:block; width:86%; font-size:12px; letter-spacing:-0.3px; line-height:1.5; font-weight:normal; hyphens:none; word-break:keep-all;}
.brpgBV .cntWrap ul > li:nth-child(3) p span img{width:94px; display:inline-block; margin-top:-3px;}

.brpgBV .cntWrap ul > li:nth-child(1){left:0;}
.brpgBV .cntWrap ul > li:nth-child(1) img.bg{left:-34vw;}
.brpgBV .cntWrap ul > li:nth-child(2){left:33.3333%;}
.brpgBV .cntWrap ul > li:nth-child(2) img.bg{left:-32vw;}
.brpgBV .cntWrap ul > li:nth-child(3){left:66.6666%;}
.brpgBV .cntWrap ul > li:nth-child(3) img.bg{left:-17vw;}


.brpgBV .cntWrap ul > li.open{width:100%; left:0; z-index:100;}
.brpgBV .cntWrap ul > li.open p{top:55px; left:20px; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease;}
.brpgBV .cntWrap ul > li.open p b:after{opacity:1; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease;}
.brpgBV .cntWrap ul > li.open img.bg{left:0; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease;}

.brpgBV .cntWrap img.clsBtn{position:absolute; top:20px; right:20px; width:17px; cursor:pointer; display:none; z-index:101;}


.brpgPrd{padding:129px 0 100px;}
.brpgPrd .title{padding-bottom:42px;}

.brpgPrd .cnt{width:78.5%; margin:0 auto 30px;}
.brpgPrd .cnt img{width:100%;}
.brpgPrd .cnt .info{width:100%;}
.brpgPrd .cnt .info h5{font-size:13px; letter-spacing:-0.3px; font-weight:500; padding-top:24px;}
.brpgPrd .cnt .info h4{font-size:20px; letter-spacing:-0.5px; padding:8px 0 16px; font-weight:bold; color:#2e2e2e;}
.brpgPrd .cnt .info p{font-size:13px; letter-spacing:-0.3px; line-height:1.5; color:#2e2e2e; font-weight:normal; padding-bottom:25px;}
.brpgPrd .cnt .info a{display:block; font-size:14px; letter-spacing:-0.5px; color:#000; line-height:1; padding:10px 0; border:1px solid #000; border-radius:12px; font-weight:bold; width:108px; text-align:center; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease;}

.brpgPrd .cnt1 .info h5{color:#f07700;}
.brpgPrd .cnt1 .info a:hover{color:#f07700; border:1px solid #f07700; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease;}
.brpgPrd .cnt2 .info h5{color:#257d2b;}
.brpgPrd .cnt2 .info a:hover{color:#257d2b; border:1px solid #257d2b; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease;}
.brpgPrd .cnt3 .info h5{color:#9a6f37;}
.brpgPrd .cnt3 .info a:hover{color:#9a6f37; border:1px solid #9a6f37; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease;}

.brpg .ani01{opacity:1; transform:translateY(30px); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.brpg .ani01.on{transform:translateY(0px); opacity:1; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.brpg .ani02{opacity:1; transform:translate(40px, 30px); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.brpg .ani02.on{transform:translate(0px, 0px); opacity:1; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}



/* BASIC css end */