/* 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;
}
 
.wrap a{display:block; margin:0 auto;}

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

/*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;}

/*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; margin:0;}
#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;}

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

/*intro*/
#intro{width:100%; height:1060px; overflow-y:hidden; background:none; position:relative;}
#intro .search{width:822px; position:absolute; top:70px; left:calc(50% - 822px/2); z-index:2;}
#intro #box1Slider{width:840px; height:652px; position:absolute; top:193px; left:calc(50% - 840px/2); z-index:2;}
#intro #box1Slider .swiper-container{overflow:visible;}
#intro #box1Slider .swiper-container .cntWrap .swiper-slide{opacity:0 !important;}
#intro #box1Slider .swiper-container .cntWrap .swiper-slide-active{opacity:1 !important;}

#intro #box1Slider .swiper-container .cntWrap .cnt1{width:100%; height:100%;}
#intro #box1Slider .swiper-container .cntWrap .cnt1 .discount{width:196px; position:absolute; top:-7px; right:19px;}
#intro #box1Slider .swiper-container .cntWrap .cnt1 .gif1{width:180px; position:absolute; top:92px; right:240px;}
#intro #box1Slider .swiper-container .cntWrap .cnt1 .gif2{width:200px; position:absolute; top:92px; right:30px;}
#intro #box1Slider .swiper-container .cntWrap .cnt1 .gif3{width:200px; position:absolute; top:262px; right:30px;}
#intro #box1Slider .swiper-container .cntWrap .cnt1 .gif4{width:180px; position:absolute; top:402px; right:240px;}
#intro #box1Slider .swiper-container .cntWrap .cnt1 .txt{width:174px; position:absolute; top:488px; right:43px;}
#intro #box1Slider .swiper-container .cntWrap .cnt1 .img{width:370px; position:absolute; top:92px; left:30px;}
#intro #box1Slider .swiper-container .cntWrap .cnt1 .box{width:100%;}

#intro #box1Slider .swiper-container .cntWrap .cnt2{width:100%; height:100%;}
#intro #box1Slider .swiper-container .cntWrap .cnt2 .discount{width:196px; position:absolute; top:-7px; right:19px;}
#intro #box1Slider .swiper-container .cntWrap .cnt2 .gif1{width:180px; position:absolute; top:92px; right:240px;}
#intro #box1Slider .swiper-container .cntWrap .cnt2 .gif2{width:200px; position:absolute; top:92px; right:30px;}
#intro #box1Slider .swiper-container .cntWrap .cnt2 .gif3{width:200px; position:absolute; top:262px; right:30px;}
#intro #box1Slider .swiper-container .cntWrap .cnt2 .gif4{width:180px; position:absolute; top:402px; right:240px;}
#intro #box1Slider .swiper-container .cntWrap .cnt2 .txt{width:174px; position:absolute; top:488px; right:43px;}
#intro #box1Slider .swiper-container .cntWrap .cnt2 .img{width:370px; position:absolute; top:92px; left:30px;}
#intro #box1Slider .swiper-container .cntWrap .cnt2 .box{width:100%;}

#intro #box1Slider .swiper-container .cntWrap .cnt3{width:100%; height:100%;}
#intro #box1Slider .swiper-container .cntWrap .cnt3 .txt{width:204px; position:absolute; top:486px; right:44px;}
#intro #box1Slider .swiper-container .cntWrap .cnt3 .img{width:460px; position:absolute; top:92px; left:30px;}
#intro #box1Slider .swiper-container .cntWrap .cnt3 .subimg{width:300px; position:absolute; top:92px; right:30px;}
#intro #box1Slider .swiper-container .cntWrap .cnt3 .box{width:100%;}

#intro .info{width:813px; position:absolute; top:870px; left:calc(50% - 813px/2); z-index:2;}

#intro ul.bgWrap{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
#intro ul.bgWrap > li{position:absolute; top:0; left:0; width:100%; height:100%;}
#intro ul.bgWrap > li:nth-child(1){background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY1_1-bg1.jpg") no-repeat center / cover; opacity:1; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
#intro ul.bgWrap > li:nth-child(2){background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY1_1-bg2.jpg") no-repeat center / cover; opacity:0; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
#intro ul.bgWrap > li:nth-child(3){background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY1_1-bg3.jpg") no-repeat center / cover; opacity:0; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}

/*box2*/
#box2{width:100%; height:1514px; background:#fff; position:relative;}
#box2 .title{width:657px; position:absolute; top:160px; left:calc(50% - 657px/2);}
#box2 .coup1{width:560px; position:absolute; top:471px; left:calc(50% - 560px/2);}
#box2 .coup2{width:560px; position:absolute; top:700px; left:calc(50% - 560px/2);}
#box2 .coup3{width:560px; position:absolute; top:927px; left:calc(50% - 560px/2);}
#box2 a.btn{width:680px; height:96px; position:absolute; top:1219px; left:calc(50% - 680px/2);}
#box2 a.btn img{width:100%;}
#box2 .deco1{width:405px; position:absolute; top:124px; left:calc(50% - 405px/2 - 880px);}
#box2 .deco2{width:308px; position:absolute; top:1331px; left:calc(50% - 308px/2 + 890px);}
#box2 .info{width:491px; position:absolute; top:1355px; left:calc(50% - 491px/2);}

/*box3*/
#box3{width:100%; height:1052px; position:relative;}
#box3 .title{width:300px; position:absolute; top:0; left:calc(50% - 300px/2);}
#box3 .cnt1{width:320px; position:absolute; top:311px; left:calc(50% - 320px/2 - 340px);}
#box3 .cnt2{width:320px; position:absolute; top:311px; left:calc(50% - 320px/2);}
#box3 .cnt3{width:320px; position:absolute; top:311px; left:calc(50% - 320px/2 + 340px);}
#box3 .info{width:733px; position:absolute; top:860px; left:calc(50% - 733px/2);}
    
/*box4*/
#box4{width:100%; height:1056px; background:#f4f4f4; position:relative;}
#box4 .title{width:493px; position:absolute; top:140px; left:calc(50% - 493px/2);}
#box4 .coup{width:628px; position:absolute; top:431px; left:calc(50% - 628px/2); animation:coupAni 3s ease-in-out infinite;}

@keyframes coupAni{
    0%{top:415px;}
    50%{top:430px;}
    100%{top:415px;}
}

#box4 .info{width:600px; position:absolute; top:768px; left:calc(50% - 600px/2);}
    
/*box6*/
#box6{width:100%; height:1539px; background:#fff; position:relative;}

#box6 .card{width:1040px; height:898px; position:absolute; top:160px; left:calc(50% - 1040px/2); perspective: 5000px;}
#box6 .card .card-inner {width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 4s ease-in-out;}
#box6 .card .card-inner .cnt1,
#box6 .card .card-inner .cnt2{width;100%; position:absolute; top:0; left:0; backface-visibility: hidden;}

#box6 .card .card-inner .cnt1{animation:redbeanAni 8s ease-in-out infinite;}
#box6 .card .card-inner .cnt2{animation:bananaAni 8s ease-in-out infinite;}

@keyframes redbeanAni{
    0%{transform: rotateY(0deg);}
    30%{transform: rotateY(0deg);}
    40%{transform: rotateY(90deg);}
    50%{transform: rotateY(180deg);}
    80%{transform: rotateY(180deg);}
    90%{transform: rotateY(270deg);}
    100%{transform: rotateY(360deg);}
}
@keyframes bananaAni{
    0%{transform: rotateY(180deg);}
    30%{transform: rotateY(180deg);}
    40%{transform: rotateY(270deg);}
    50%{transform: rotateY(360deg);}
    80%{transform: rotateY(360deg);}
    90%{transform: rotateY(450deg);}
    100%{transform: rotateY(540deg);}
}

#box6 .info{width:783px; position:absolute; top:1117px; left:calc(50% - 783px/2);}
#box6 a.btn{width:1040px; height:96px; position:absolute; top:1283px; left:calc(50% - 1040px/2);}
#box6 a.btn img{width:100%;}

/*box7*/
#box7{width:100%; height:2431px; background:#ffeeee; position:relative;}
#box7 .title{width:393px; position:absolute; top:124px; left:calc(50% - 393px/2);}

#box7 a.cnt1{width:1068px; height:748px; position:absolute; top:397px; left:calc(50% - 1068px/2);}
#box7 a.cnt1 img{width:100%;}
#box7 a.btn1{width:1060px; height:96px; position:absolute; top:1199px; left:calc(50% - 1060px/2);}
#box7 a.btn1 img{width:100%;}

#box7 a.cnt2{width:1068px; height:748px; position:absolute; top:1373px; left:calc(50% - 1068px/2);}
#box7 a.cnt2 img{width:100%;}
#box7 a.btn2{width:1060px; height:96px; position:absolute; top:2175px; left:calc(50% - 1060px/2);}
#box7 a.btn2 img{width:100%;}

/*box8*/
#box8{width:100%; height:1455px; background:#fff7d4; position:relative;}
#box8 .title{width:566px; position:absolute; top:122px; left:calc(50% - 566px/2);}
#box8 a.cnt{width:1068px; height:748px; position:absolute; top:397px; left:calc(50% - 1068px/2);}
#box8 a.cnt img{width:100%;}
#box8 a.btn{width:1060px; height:96px; position:absolute; top:1199px; left:calc(50% - 1060px/2);}
#box8 a.btn img{width:100%;}

/*box9*/
#box9{width:100%; height:5563px; background:#f9f9f9; position:relative;}
#box9 .title{width:697px; padding-top:160px;}
#box9 .tag1{width:304px; padding:79px 0 58px;}
#box9 a.cnts{width:1068px; height:748px; padding-bottom:32px; position:relative;}
#box9 a.cnts img.cnt{width:100%;}
#box9 a.cnts .gift{width:162px; position:absolute; top:225px; left:calc(50% - 162px/2 + 205px); z-index:2;}

#box9 a.cnts #box9SliderA,
#box9 a.cnts #box9SliderB{width:980px; height:400px; position:absolute; top:42px; left:calc(50% - 980px/2); z-index:1;}
#box9 a.cnts .swiper-container{}
#box9 .tag2{width:440px; padding:101px 0 58px;}

/*box10*/
#box10{width:100%; height:3213px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY1_10-bg.jpg") no-repeat center / cover; position:relative;}
#box10 .title{width:682px; position:absolute; top:160px; left:calc(50% - 682px/2);}
#box10 .deco{width:170px; position:absolute; top:273px; left:calc(50% - 170px/2 + 404px);}
#box10 .tag1{width:360px; position:absolute; top:513px; left:calc(50% - 360px/2);}

#box10 a.prds{width:362px; height:449px;}
#box10 a.prds img{width:100%;}

#box10 a.prd1{position:absolute; top:646px; left:calc(50% - 362px/2 - 375px);}
#box10 a.prd2{position:absolute; top:646px; left:calc(50% - 362px/2);}
#box10 a.prd3{position:absolute; top:646px; left:calc(50% - 362px/2 + 375px);}
#box10 a.prd4{position:absolute; top:1154px; left:calc(50% - 362px/2 - 375px);}
#box10 a.prd5{position:absolute; top:1154px; left:calc(50% - 362px/2);}
#box10 a.prd6{position:absolute; top:1154px; left:calc(50% - 362px/2 + 375px);}
#box10 a.prd7{width:550px; height:445px; position:absolute; top:1658px; left:calc(50% - 550px/2 - 281px);}
#box10 a.prd8{width:550px; height:445px; position:absolute; top:1658px; left:calc(50% - 550px/2 + 281px);}

#box10 .tag2{width:330px; position:absolute; top:2242px; left:calc(50% - 330px/2);}

#box10 #box10Slider{width:100%; position:relative; position:absolute; top:2374px; left:0;}
#box10 #box10Slider .swiper-container{width:1000px; height:641px; margin:0 auto;}

#box10 #box10Slider .swiper-button-prev{width:50px; height:50px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY1_10-cnt2-arrwL.png") no-repeat center / cover; left:calc(50% - 50px/2 - 535px);}
#box10 #box10Slider .swiper-button-next{width:50px; height:50px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY1_10-cnt2-arrwR.png") no-repeat center / cover; right:calc(50% - 50px/2 - 535px);}

#box10 .swiper-pagination{width:100%; bottom:-36px;}
#box10 .swiper-pagination .swiper-pagination-bullet{width:160px; height:14px; border-radius:10px; background:#fff; opacity:0.4; margin:0 2px;}
#box10 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1;}

#box10 .box{width:1008px; position:absolute; top:2374px; left:calc(50% - 1008px/2);}


/*box11*/
#box11{width:100%; height:auto; background:#fff; position:relative; padding:0 0 180px}

#box11 .title{width:564px; padding:160px 0 79px;}

#box11 .coupWrap{width:100%; background:#f9f9f9; padding:47px 0 80px;}
#box11 .coupWrap .coup{display:block; padding:0 0 63px; margin:0 auto;}
#box11 .coupWrap a.btn{width:1000px; height:96px;}
#box11 .coupWrap a.btn img{width:100%;}

#box11 ul{width:1040px; margin:101px auto 0;}
#box11 ul li{width:100%; border-top:2px solid #000; cursor:pointer;}
#box11 ul li:nth-last-child(1){border-bottom:2px solid #000;}

#box11 ul li .head{width:100%; height:122px; position:relative;}
#box11 ul li .head .nos{height:22px; position:absolute; top:49px; left:30px;}
#box11 ul li .head .txts{height:39px; position:absolute; top:41px; left:88px;}
#box11 ul li .head .arrw{width:36px; position:absolute; top:53px; right:59px; transform:rotate(0deg); transition:all .5 ease; -webkit-transition:all .5 ease; -moz-transition:all .5 ease;}

#box11 ul li.on{background:#f9f9f9;}
#box11 ul li .head .arrw.on{transform:rotate(180deg); transition:all .5 ease; -webkit-transition:all .5 ease; -moz-transition:all .5 ease;}

#box11 ul li a.dropdown{padding:0px; height:auto; overflow:hidden; display:none;}
#box11 ul li a.dropdown img{width:100%; padding-bottom:36px;}

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


/* BASIC css end */