/* BASIC css start */
@charset "euc-kr";

html {
  scroll-behavior: smooth;
}

#overlay_layer {
  display: none;
}

/* max-width 초기화 */
#layout_body {
  max-width: none !important;
}
.top-area {
  /*max-width: 1140px;*/
  margin: 0 auto;
}
.header__line-banner{
    margin: 0 auto;
}
.wrap {
  position: relative;
  width: 100%;
  min-width: 1140px;
}
.wrap * {
  font-family: "Roboto", "YoonGothic", sans-serif !important;
}
.wrap img {
    max-width: none;
    margin:0 auto;
    display:block;
}

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

.brpgMain .mainban{width:100%; height:728px; background:url("/design/skinfood/event/brpg-main-ban.jpg") no-repeat center / cover;}
.brpgMain .txt{width:928px; background:rgba(123,122,23,0); margin:-4.6vw auto 0; position:relative; transition:all 2.3s ease; -webkit-transition:all 2.3s ease; -moz-transition:all 2.3s ease;}
.brpgMain .txt h2{font-size:70px; letter-spacing:-1.75px; font-weight:bold; color:#2e2e2e; line-height:85px;}
.brpgMain .txt p{padding-top:30px; font-size:15px; letter-spacing:-0.3px; color:#2e2e2e; line-height:1.7; font-weight:normal;}
.brpgMain .txt p strong{font-size:20px; font-weight:600; letter-spacing:-0.5px; color:#2e2e2e;}
.brpgMain .txt img.arrw{width:30px; position:absolute; bottom:-70px; right:0; animation:updown 2s infinite ease-in-out;}

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

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

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

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

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

.brpgSumm .summInner ul > li:nth-child(2){padding-top:170px;}
.brpgSumm .summInner ul > li:nth-child(2) h4{text-align:right;}
.brpgSumm .summInner ul > li:nth-child(2) h4:after{content:""; display:block; width:428px; height:5px; 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:311px; position:absolute; top:49px; left:0;}

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

.brpgSumm .summInner img.deco1{width:204px; position:absolute; top:240px; right:-70px;}
.brpgSumm .summInner img.deco2{width:266px; position:absolute; bottom:-35px; left:-40px;}


.brpgBV{padding:235px 0 0;}
.brpgBV .title{padding-bottom:88px;}
.brpgBV .cntWrap{width:1140px; height:890px; margin:0 auto; position:relative;}

.brpgBV .cntWrap ul.head{position:absolute; top:0; left:0; width:100%; height:100%; z-index:90; display:flex; flex-wrap:wrap;}
.brpgBV .cntWrap ul.head > li{width:33.3333%; height:100%; cursor:pointer; opacity:0;}

.brpgBV .cntWrap ul.head > li:nth-child(1){background:rgba(255,12,33,0.5);}
.brpgBV .cntWrap ul.head > li:nth-child(2){background:rgba(12,255,33,0.5);}
.brpgBV .cntWrap ul.head > li:nth-child(3){background:rgba(33,12,255,0.5);}

.brpgBV .cntWrap ul.tail{width:100%; height:100%; position:relative;}
.brpgBV .cntWrap ul.tail > 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.tail > li img.bg{position:absolute; top:0; left:0; width:1140px; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease;}
.brpgBV .cntWrap ul.tail > li p{position:absolute; bottom:0; left:0; color:#fff; z-index:10; width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; padding:0 0 43px 51px;}
.brpgBV .cntWrap ul.tail > li p strong{font-size:70px; font-weight:bold; letter-spacing:-1.75px; display:block; padding-bottom:10px;}
.brpgBV .cntWrap ul.tail > li p b{font-size:40px; font-weight:600; letter-spacing:-0.8px; position:relative; display:block;}
.brpgBV .cntWrap ul.tail > li p b:after{content:""; display:block; width:69px; height:15px; background:url("/design/skinfood/event/brpg-bv-arrw.png") no-repeat center / cover; position:absolute; top:16px; left:204px;}
.brpgBV .cntWrap ul.tail > li p span{display:block; font-size:15px; letter-spacing:-0.3px; line-height:25px; font-weight:500; position:absolute; bottom:44px; left:0;}

.brpgBV .cntWrap ul.tail > li:nth-child(1){left:0%;}
.brpgBV .cntWrap ul.tail > li:nth-child(1) p span{left:381px; width:582px;}
.brpgBV .cntWrap ul.tail > li:nth-child(1) img.bg{left:-378px;}

.brpgBV .cntWrap ul.tail > li:nth-child(2){left:33.3333%;}
.brpgBV .cntWrap ul.tail > li:nth-child(2) p span{left:381px; width:505px;}
.brpgBV .cntWrap ul.tail > li:nth-child(2) img.bg{left:-374px;}

.brpgBV .cntWrap ul.tail > li:nth-child(3){left:66.6666%;}
.brpgBV .cntWrap ul.tail > li:nth-child(3) p span{left:381px; width:627px;}
.brpgBV .cntWrap ul.tail > li:nth-child(3) p span img{display:inline-block; width:120px; margin-top:-2px;}
.brpgBV .cntWrap ul.tail > li:nth-child(3) img.bg{left:-198px;}


.brpgPrd{padding:200px 0;}
.brpgPrd .title{padding-bottom:88px;}

.brpgPrd .cnt{width:975px; margin:0 auto 20px; display:flex; flex-wrap:wrap;}
.brpgPrd .cnt img{width:48%;}
.brpgPrd .cnt .info{width:52%;}
.brpgPrd .cnt .info h5{font-size:15px; letter-spacing:-0.3px; font-weight:500; padding-top:49px;}
.brpgPrd .cnt .info h4{font-size:25px; letter-spacing:-0.5px; padding:10px 0 30px; font-weight:bold; color:#2e2e2e;}
.brpgPrd .cnt .info p{font-size:15px; letter-spacing:-0.3px; line-height:25px; color:#2e2e2e; font-weight:normal; padding-bottom:60px;}
.brpgPrd .cnt .info a{display:block; font-size:25px; letter-spacing:-0.5px; color:#000; line-height:1; padding:23px 0; border:2px solid #000; border-radius:25px; font-weight:bold; width:216px; 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:2px 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:2px 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:2px solid #9a6f37; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease;}














/* BASIC css end */