/* BASIC css start */
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: YoonGothic !important;
}
.wrap img {
    max-width: none;
    margin:0 auto;
    display:block;
}

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

/*slider next,prev btn*/
.slideWrap .swiper-button-next, .slideWrap .swiper-button-prev{width:48px; height:73px; top:49%;}
.slideWrap .swiper-button-next:after, .slideWrap .swiper-button-prev:after{display:none;}

/*slider pagination*/
.slideWrap{position:relative;}
.slideWrap .swiper-pagination{width:100%; bottom:-75px !important; left:0px !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet{width:24px; height:24px; border-radius:50%; background:#fff; border:1px solid #966c6c; margin:0 7px !important; opacity:1 !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#966c6c; opacity:1 !important;}

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

/*on header fixed*/
#intro.fixed{margin-bottom:106px;}

/*target point*/
.posrel{position:relative;}
#tar1{position:absolute; top:-199px; left:0; display:block; width:100%; height:0;}
#tar2{position:absolute; top:-199px; left:0; display:block; width:100%; height:0;}
#tar3{position:absolute; top:-199px; left:0; display:block; width:100%; height:0;}
#tar4{position:absolute; top:-199px; left:0; display:block; width:100%; height:0;}

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

/*intro*/
#intro{width:100%; height:787px; overflow-y:hidden; background:#000; position:relative;}
#intro .date{width:276px; position:absolute; top:22px; right:22px;}
#intro .bubble{width:436px; position:absolute; top:116px; left:calc(50% - 436px/2); animation: bubble 2s ease-in-out infinite;}

@keyframes bubble{
    0%{top:116px;}
    50%{top:106px;}
    100%{top:116px;}
}

#intro .tit{width:723px; position:absolute; top:244px; left:calc(50% - 723px/2);}
#intro .deco1{width:401px; position:absolute; top:452px; left:calc(50% - 401px/2 - 400px); z-index:10;}
#intro .deco2{width:402px; position:absolute; top:452px; left:calc(50% - 402px/2 + 400px); z-index:10;}

#intro .slideWrap{width:1047px; height:309px; background:rgba(0,255,0,0); position:absolute; top:452px; left:calc(50% - 1047px/2);}
#intro .slideWrap #box1Slider ul li{height:309px; display:flex; justify-content:center;}
#intro .slideWrap #box1Slider ul li img{width:149px; margin:auto; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
#intro .slideWrap #box1Slider ul li.swiper-slide-active img{width:349px; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}

/*roll*/
#rolling{background:#000; width:100%; height:103px; position:relative;}
#rolling .roll{width:100%; height:27px; position:absolute; bottom:37px; left:0; background-image:url(http://skinfood.img15.kr/data/content/skinfoodday/BY11_2-roll.png); background-repeat:repeat-x; background-position:0 0; background-size:auto 100%; animation:move1 70s infinite linear;}

@keyframes move1{
    0%{background-position:0 0;}
    100%{background-position:-5245px 0;}
}

/*box3*/
#box3{width:100%; height:947px; background:#f9f9f9; position:relative;}
#box3 .tit{width:615px; position:absolute; top:149px; left:calc(50% - 615px/2);}
#box3 a.coups{width:250px; height:265px;}
#box3 a.coups img{width:100%;}
#box3 a.coup1{position:absolute; top:293px; left:calc(50% - 250px/2 - 280px);}
#box3 a.coup2{position:absolute; top:293px; left:calc(50% - 250px/2);}
#box3 a.coup3{position:absolute; top:293px; left:calc(50% - 250px/2 + 280px);}
#box3 a.btn{width:1140px; height:100px; position:absolute; top:623px; left:calc(50% - 1140px/2);}
#box3 a.btn img{width:100%;}
#box3 .info{width:451px; position:absolute; top:752px; left:calc(50% - 451px/2);}

/*header*/
#header{text-align:center; display:flex; overflow:hidden; position:relative; justify-content:center; position:static; opacity:1; height:104px; width:100%; background:#000;}
#header.fixed{position:fixed; top:96px; left:0; z-index:9999;}
#header a.menu{position:relative; height:104px; display:flex; flex-wrap:wrap; background:#000; padding:0 36px;}
#header a.menu img{display:block; margin:auto; height:24px;}
#header a.menu:nth-child(2) img{height:20px;}
#header a.menu img:nth-child(2){position:absolute; top:40px; left:36px; opacity:0;}
#header a.menu:nth-child(2) img:nth-child(2){position:absolute; top:42px; left:36px; opacity:0;}
#header a.menu.select img:nth-child(1){opacity:0;}
#header a.menu.select img:nth-child(2){opacity:1;}

/*box5*/
#box5{width:100%; height:3426px; background:#fff831; position:relative;}
#box5 .subtit{width:296px; position:absolute; top:150px; left:calc(50% - 296px/2);}
#box5 .tit{width:745px; position:absolute; top:230px; left:calc(50% - 745px/2);}
#box5 a.cnts{width:1142px; height:868px;}
#box5 a.cnts img{width:100%;}
#box5 a.cnt1{position:absolute; top:371px; left:calc(50% - 1142px/2);}
#box5 a.cnt2{position:absolute; top:1306px; left:calc(50% - 1142px/2);}
#box5 a.cnt3{position:absolute; top:2240px; left:calc(50% - 1142px/2);}
#box5 a.btn{width:1140px; height:101px; position:absolute; top:3176px; left:calc(50% - 1140px/2);}
#box5 a.btn img{width:100%;}

/*box6*/
#box6{width:100%; height:3540px; background:#1e1e1e; position:relative;}
#box6 .subtit{width:296px; position:absolute; top:150px; left:calc(50% - 296px/2);}
#box6 .tit{width:716px; position:absolute; top:236px; left:calc(50% - 716px/2);}
#box6 .tag{width:401px; position:absolute; top:331px; left:calc(50% - 401px/2);}
#box6 a.cnts{width:1142px; height:868px;}
#box6 a.cnts img{width:100%;}

#box6 a.cnt1{position:absolute; top:470px; left:calc(50% - 1142px/2);}
#box6 a.cnt2{position:absolute; top:1406px; left:calc(50% - 1142px/2);}
#box6 a.cnt3{position:absolute; top:2343px; left:calc(50% - 1142px/2);}
#box6 a.btn{width:1140px; height:101px; position:absolute; top:3281px; left:calc(50% - 1140px/2);}
#box6 a.btn img{width:100%;}

/*box7*/
#box7{width:100%; height:3459px; background:#f5f5f5; position:relative;}
#box7 .subtit{width:296px; position:absolute; top:150px; left:calc(50% - 296px/2);}
#box7 .tit{width:427px; position:absolute; top:230px; left:calc(50% - 427px/2);}
#box7 a.cnts img{width:100%;}

#box7 a.cnt1{width:1142px; height:868px; position:absolute; top:366px; left:calc(50% - 1142px/2);}
#box7 a.cnt2, #box7 a.cnt3, #box7 a.cnt4, #box7 a.cnt5{width:559px; height:886px;}
#box7 a.cnt2{position:absolute; top:1300px; left:calc(50% - 559px/2 - 291px);}
#box7 a.cnt3{position:absolute; top:1300px; left:calc(50% - 559px/2 + 291px);}
#box7 a.cnt4{position:absolute; top:2252px; left:calc(50% - 559px/2 - 291px);}
#box7 a.cnt5{position:absolute; top:2252px; left:calc(50% - 559px/2 + 291px);}

#box7 a.btn{width:1140px; height:101px; position:absolute; top:3207px; left:calc(50% - 1140px/2);}
#box7 a.btn img{width:100%;}

/*box8*/
#box8{width:100%; height:3455px; background:#222222; position:relative;}
#box8 .subtit{width:296px; position:absolute; top:152px; left:calc(50% - 296px/2);}
#box8 .tit{width:485px; position:absolute; top:232px; left:calc(50% - 485px/2);}

#box8 a.cnts{width:1142px; height:916px; position:relative;}
#box8 a.cnts .gif{width:514px; position:absolute; top:116px; left:calc(50% - 514px/2 - 275px); z-index:1;}
#box8 a.cnts .plus{width:75px; position:absolute; top:263px; left:calc(50% - 75px/2); z-index:2;}

#box8 a.cnt1{position:absolute; top:386px; left:calc(50% - 1142px/2);}
#box8 a.cnt2{position:absolute; top:1368px; left:calc(50% - 1142px/2);}
#box8 a.cnt3{position:absolute; top:2263px; left:calc(50% - 1142px/2);}

#box8 a.btn{width:1140px; height:100px; position:absolute; top:3207px; left:calc(50% - 1140px/2);}
#box8 a.btn img{width:100%;}

/*caution*/
#caution{background:#000;}
#caution img{margin:auto; padding:160px 0;}


/* BASIC css end */