/* 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,
.swiper-button-next:after, .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:890px; overflow-y:hidden; background:#af0808; position:relative;}
#intro .date{width:281px; position:absolute; top:23px; right:23px;}
#intro .title{width:599px; position:absolute; top:155px; left:calc(50% - 599px/2); animation:titleupdown 3s infinite ease-in-out;}

@keyframes titleupdown{
    0%{top:155px;}
    50%{top:165px;}
    100%{top:155px;}
}

#intro .box1{width:209px; position:absolute; top:358px; left:calc(50% - 209px/2 - 346px);}
#intro .box2{width:227px; position:absolute; top:349px; left:calc(50% - 227px/2 - 124px);}
#intro .box3{width:209px; position:absolute; top:358px; left:calc(50% - 209px/2 + 116px);}
#intro .box4{width:209px; position:absolute; top:358px; left:calc(50% - 209px/2 + 346px);}
#intro .prds{width:128px; height:141px; position:absolute; top:392px; left:calc(50% - 128px/2 + 115px);}
#intro .prds li{display:none; width:100%; height:100%; position:absolute; top:0; left:0;}
#intro .prds li:nth-child(1){display:block;}
#intro .prds li img{width:100%;}
#intro .box5{width:209px; position:absolute; top:588px; left:calc(50% - 209px/2 - 346px);}
#intro .box6{width:209px; position:absolute; top:588px; left:calc(50% - 209px/2 - 115px);}
#intro .box7{width:439px; position:absolute; top:588px; left:calc(50% - 439px/2 + 231px);}
#intro .box8{width:209px; position:absolute; top:817px; left:calc(50% - 209px/2 - 346px);}
#intro .box9{width:439px; position:absolute; top:817px; left:calc(50% - 439px/2);}
#intro .box10{width:209px; position:absolute; top:817px; left:calc(50% - 209px/2 + 346px);}
#intro .cookie{width:117px; position:absolute; top:645px; left:calc(50% - 117px/2 + 236px); transform-origin: 76% 100%; transform:rotate(15deg); animation:cookie 3s infinite ease-in-out;}

@keyframes cookie{
    0%{transform:rotate(15deg);}
    50%{transform:rotate(8deg);}
    100%{transform:rotate(15deg);}
}

#intro .coverup{display:block; width:50px; height:20px; background:#af0808; position:absolute; top:797px; left:calc(50% - 100px/2 + 290px); z-index:2;}
#intro .tree{width:135px; position:absolute; top:606px; left:calc(50% - 135px/2 - 347px); z-index:2;}
#intro .light{width:1167px; position:absolute; top:290px; left:calc(50% - 1167px/2 - 348px); transform:scale(1); animation:light 3s infinite ease-in-out;}

@keyframes light{
    0%{transform:scale(0.5);}
    20%{transform:scale(1);}
    40%{transform:scale(0.7);}
    60%{transform:scale(1);}
    80%{transform:scale(1.1);}
    100%{transform:scale(0.5);}
}

/*box2*/
#box2{width:100%; height:871px; background:#f9f9f9; position:relative;}
#box2 .title{width:481px; position:absolute; top:139px; left:calc(50% - 481px/2);}
#box2 .coupons{width:237px; height:286px;}
#box2 .coupon1{position:absolute; top:278px; left:calc(50% - 237px/2 - 304px);}
#box2 .coupon2{position:absolute; top:278px; left:calc(50% - 237px/2);}
#box2 .coupon3{position:absolute; top:278px; left:calc(50% - 237px/2 + 304px);}
#box2 .coupons .coup{width:100%; position:relative;}
#box2 .coupons .icon{width:61px; position:absolute; top:-12px; right:-30px;}
#box2 a.btn{width:1140px; height:101px; position:absolute; top:634px; left:calc(50% - 1140px/2);}
#box2 a.btn img{width:100%;}
#box2 .info{width:218px; position:absolute; top:763px; left:calc(50% - 218px/2);}

/*box3*/
#box3{width:100%; height:962px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY12_3-bg.jpg") no-repeat center top / cover; position:relative;}
#box3 .title{width:545px; position:absolute; top:209px; left:calc(50% - 545px/2);}
#box3 .cnt1,
#box3 .cnt2,
#box3 .cnt3,
#box3 .cnt4{transform:rotateY(90deg); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
#box3 .cnt1{width:248px; position:absolute; top:348px; left:calc(50% - 248px/2 - 440px);}
#box3 .cnt2{width:248px; position:absolute; top:348px; left:calc(50% - 248px/2 - 146px);}
#box3 .cnt3{width:248px; position:absolute; top:348px; left:calc(50% - 248px/2 + 146px);}
#box3 .cnt4{width:248px; position:absolute; top:348px; left:calc(50% - 248px/2 + 440px);}
#box3 .info{width:988px; position:absolute; top:751px; left:calc(50% - 988px/2);}


/*header*/
#header{text-align:center; display:flex; overflow:hidden; position:relative; justify-content:center; position:static; opacity:1; height:104px; width:100%; background:#056145;}
#header.fixed{position:fixed; top:96px; left:0; z-index:9999;}
#header a.menu{position:relative;}
#header a.menu img {height:104px;}
#header a.menu img:nth-child(2){position:absolute; top:0; left:0; 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:4011px; background:#e7e1da; position:relative;}
#box5 .title{width:649px; position:absolute; top:160px; left:calc(50% - 649px/2);}
#box5 .subtitle{width:514px; position:absolute; top:545px; left:calc(50% - 514px/2);}
#box5 a.cnts{width:1142px; height:687px;}
#box5 a.cnts .cnt{width:100%;}

#box5 a.cnt1{position:absolute; top:761px; left:calc(50% - 1142px/2);}
#box5 a.cnt2{position:absolute; top:1516px; left:calc(50% - 1142px/2);}
#box5 a.cnt3{position:absolute; top:2270px; left:calc(50% - 1142px/2);}
#box5 a.cnt4{position:absolute; top:3024px; left:calc(50% - 1142px/2);}

#box5 a.cnt1 .swiper-container{width:261px; height:290px; position:absolute; top:180px; left:calc(50% - 261px/2 + 186px);}
#box5 a.cnt2 .swiper-container{width:284px; height:317px; position:absolute; top:162px; left:calc(50% - 284px/2 + 180px);}
#box5 a.cnt3 .swiper-container{width:350px; height:211px; position:absolute; top:217px; left:calc(50% - 350px/2 + 210px);}

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


/*box6*/
#box6{width:100%; height:1365px; background:#f9f9f9; position:relative;}

#box6 .title{width:933px; position:absolute; top:135px; left:calc(50% - 933px/2); z-index:2;}
#box6 .slideWrap{width:982px; position:absolute; top:354px; left:calc(50% - 982px/2); z-index:2;}
#box6 .slideWrap #box6Slider{width:100%; overflow:visible;}
#box6 .slideWrap #box6Slider ul li{width:100%; opacity:0.5; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
#box6 .slideWrap #box6Slider ul li.swiper-slide-active{opacity:1; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
#box6 .slideWrap #box6Slider ul li a{display:block;}
#box6 .slideWrap #box6Slider ul li a img{width:100%; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
#box6 .slideWrap #box6Slider ul li a img.img{transform:scale(0.9); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
#box6 .slideWrap #box6Slider ul li a img.txt{margin-top:54px; opacity:0; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
#box6 .slideWrap #box6Slider ul li.swiper-slide-active a img.txt{opacity:1; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
#box6 .slideWrap #box6Slider ul li.swiper-slide-active a img.img{transform:scale(1); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}

#box6 .slideWrap .prev_box6Slider{width:29px; height:45px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY12_6-arrwL.png") no-repeat center / cover; position:absolute; top:471px; left:calc(50% - 29px/2 + 268px);}
#box6 .slideWrap .prev_box6Slider::after{content:""; display:block; width:2px; height:22px; background:#013928; position:absolute; top:12px; left:42px;}
#box6 .slideWrap .next_box6Slider{width:29px; height:45px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY12_6-arrwR.png") no-repeat center / cover; position:absolute; top:471px; left:calc(50% - 29px/2 + 325px);}

#box6 .blanket{width:982px; height:452px; position:absolute; top:610px; left:calc(50% - 982px/2);}
#box6 a.btn{width:1140px; height:101px; position:absolute; top:1132px; left:calc(50% - 1140px/2);}
#box6 a.btn img{width:100%;}


/*box7*/
#box7{width:100%; height:2296px; background:#af0808; position:relative;}
#box7 .title{width:707px; position:absolute; top:131px; left:calc(50% - 707px/2);}
#box7 .subtitleA{width:733px; position:absolute; top:365px; left:calc(50% - 733px/2);}
#box7 .subtitleB{width:351px; position:absolute; top:1274px; left:calc(50% - 351px/2);}

#box7 .blanketA{width:1023px; height:578px; position:absolute; top:619px; left:calc(50% - 1023px/2);}
#box7 .blanketB{width:1023px; height:578px; position:absolute; top:1415px; left:calc(50% - 1023px/2);}

#box7 .slideWrapA{width:1001px; height:578px; position:absolute; top:619px; left:calc(50% - 1001px/2); z-index:2;}
#box7 .slideWrapB{width:1001px; height:578px; position:absolute; top:1415px; left:calc(50% - 1001px/2); z-index:2;}
#box7 .slideWrapB .info{margin:0 0 0 auto;}

#box7 .slideWrapA .swiper-button-prev, 
#box7 .slideWrapB .swiper-button-prev{width:55px; height:55px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY12_7-arrwL.png") no-repeat center / cover; left:-111px;}
#box7 .slideWrapA .swiper-button-next,
#box7 .slideWrapB .swiper-button-next{width:55px; height:55px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/BY12_7-arrwR.png") no-repeat center / cover; right:-111px;}

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


/*box8*/
#box8{width:100%; height:auto; background:#f9f9f9; position:relative; padding-bottom:205px;}
#box8 .title{width:764px; padding:132px 0 0;}

#box8 .tabs{width:1120px; display:flex; flex-wrap:wrap; margin:174px auto 0;}
#box8 .tabs li{width:25%; position:relative; cursor:pointer;}
#box8 .tabs li img{width:100%;}
#box8 .tabs li img:nth-child(2){position:absolute; top:0; left:0; opacity:0;}
#box8 .tabs li.on img:nth-child(2){opacity:1;}

#box8 .cnts{width:1140px; margin:0 auto; display:none;}
#box8 .cnts a.prd{display:block; width:1120px; height:436px; margin:82px auto 0;}
#box8 .cnt1{display:block;}

#box8 a.btn{width:1140px; height:101px; margin:83px auto 0; display:block;}
#box8 a.btn img{width:100%;}


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


/* BASIC css end */