/* 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; background:#fff; margin:0 7px !important; opacity:1 !important;}
.slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1 !important;}
*/

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

/*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:1336px; overflow:hidden; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY2_1-bg.jpg") no-repeat top center / cover; position:relative;}
#intro .title{width:766px; position:absolute; top:262px; left:calc(50% - 766px/2); z-index:2;}

#intro .cards{width:253px; height:338px; z-index:2; perspective: 5000px;}
#intro .card1{position:absolute; top:868px; left:calc(50% - 253px/2 - 402px);}
#intro .card2{position:absolute; top:868px; left:calc(50% - 253px/2 - 134px);}
#intro .card3{position:absolute; top:868px; left:calc(50% - 253px/2 + 134px);}
#intro .card4{position:absolute; top:868px; left:calc(50% - 253px/2 + 402px);}
#intro .cards .card-inner{width:100%; height:100%; position: relative; transform-style: preserve-3d; transition: transform 4s ease-in-out;}
#intro .cards .card-inner img{width:100%; backface-visibility: hidden;}
#intro .cards .card-inner img:nth-child(1){position:absolute; top:0; left:0; animation:cardFront 8s ease-in-out infinite;}
#intro .cards .card-inner img:nth-child(2){position:absolute; top:0; left:0; animation:cardBack 8s ease-in-out infinite;} 
#intro .card2 .card-inner img:nth-child(1){animation-delay:0.3s;}
#intro .card2 .card-inner img:nth-child(2){animation-delay:0.3s;}
#intro .card3 .card-inner img:nth-child(1){animation-delay:0.6s;}
#intro .card3 .card-inner img:nth-child(2){animation-delay:0.6s;}
#intro .card4 .card-inner img:nth-child(1){animation-delay:0.9s;}
#intro .card4 .card-inner img:nth-child(2){animation-delay:0.9s;}


@keyframes cardFront{
    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 cardBack{
    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);}
}

#intro .sun{width:1441px; position:absolute; top:13px; left:calc(50% - 1441px/2); z-index:1; transform:scale(0.9); animation:sunAni 6s ease-in-out infinite;}

@keyframes sunAni{
    0%{transform:scale(0.9);}
    50%{transform:scale(1);}
    100%{transform:scale(0.9);}
}

/*box2*/
#box2{width:100%; height:2535px; background:#ffefe2; position:relative;}
#box2 .title{width:461px; position:absolute; top:159px; left:calc(50% - 461px/2);}
#box2 .cnt1{width:1059px; position:absolute; top:478px; left:calc(50% - 1059px/2);}
#box2 .cnt2{width:1059px; position:absolute; top:1261px; left:calc(50% - 1059px/2);}
#box2 a.btn1{width:680px; height:96px; display:block; position:absolute; top:996px; left:calc(50% - 680px/2); z-index:2;}
#box2 a.btn2{width:680px; height:96px; display:block; position:absolute; top:2157px; left:calc(50% - 680px/2); z-index:2;}
#box2 a img{width:100%;}

/*box3*/
#box3{width:100%; height:1200px; background:#ef2d21; position:relative;}
#box3 .title{width:406px; position:absolute; top:152px; left:calc(50% - 406px/2);}
#box3 .cards{width:253px; opacity:1;}

#box3 .card1{position:absolute; top:487px; left:calc(50% - 253px/2 - 402px);}
#box3 .card2{position:absolute; top:487px; left:calc(50% - 253px/2 - 134px);}
#box3 .card3{position:absolute; top:487px; left:calc(50% - 253px/2 + 134px);}
#box3 .card4{position:absolute; top:487px; left:calc(50% - 253px/2 + 402px);}

#box3 .info{width:563px; position:absolute; top:989px; left:calc(50% - 563px/2);}

/*box4*/
#box4{width:100%; height:1766px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY2_4-bg.jpg") no-repeat bottom center / cover; position:relative;}
#box4 .title{width:686px; position:absolute; top:173px; left:calc(50% - 686px/2);}
#box4 a.object{width:328px; position:absolute; top:685px; left:calc(50% - 328px/2); z-index:2; transition:all ease 2s; -webkit-transition:all ease 2s; -moz-transition:all ease 2s; cursor:pointer;}
#box4 a.object img{width:100%;}

#box4 .cnt{width:1059px; position:absolute; top:492px; left:calc(50% - 1059px/2);}
#box4 a.btn{width:680px; height:96px; display:block; position:absolute; top:1366px; left:calc(50% - 680px/2);}
#box4 a.btn img{width:100%;}
  
/*box6*/
#box6{width:100%; height:auto; background:#fff; position:relative; padding:170px 0 149px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
#box6 > .title{width:713px; padding:0 0 129px;}

#box6 ul.tabHead{width:1059px; margin:0 auto 79px; display:flex; flex-wrap:wrap;}
#box6 ul.tabHead > li{width:25%; padding:30px 0; cursor:pointer; border-bottom:4px solid rgba(255,255,255,1); opacity:0.5;}
#box6 ul.tabHead > li.on{border-bottom:4px solid rgba(0,0,0,1); opacity:1;}
#box6 ul.tabHead > li p,
#box6 ul.tabHead > li span{display:block; width:100%; letter-spacing:-1.2px; line-height:1; text-align:center; font-size:40px; color:#000; font-family:'Pretendard', sans-serif !important;}
#box6 ul.tabHead > li p{font-weight:400; margin-bottom:12px;}
#box6 ul.tabHead > li span{font-weight:900;}

#box6 .cntWrap{width:1062px; margin:0 auto;}
#box6 .cntWrap .cnts .title{margin-bottom:50px;}
#box6 .cntWrap .cnt1 .title{width:411px;}
#box6 .cntWrap .cnt2 .title{width:283px;}
#box6 .cntWrap .cnt3 .title{width:602px;}
#box6 .cntWrap .cnt4 .title{width:514px;}

#box6 .cntWrap .cnts .prds::after{content:""; display:block; clear:both;}/*clearfix*/
#box6 .cntWrap .cnts .prds a{width:519px; height:363px; margin-bottom:23px; float:left;}
#box6 .cntWrap .cnts .prds a:nth-child(odd){margin-right:22px;}
#box6 .cntWrap .cnt3 .prds a{width:100%; height:363px;}
#box6 .cntWrap .cnts .prds a img{width:100%;}

#box6 .cntWrap .cnts{display:none;}
#box6 .cntWrap .cnt1{display:block;}

#box6 .info{width:639px; margin-top:44px;}

/*box7*/
#box7{width:100%; height:1612px; background:url("http://skinfood.img15.kr/data/content/skinfoodday/CY2_7-bg.jpg") no-repeat bottom center / cover; position:relative;}
#box7 > .title{width:889px; position:absolute; top:170px; left:calc(50% - 889px/2);}
#box7 .slideWrap{width:1008px; height:737px; position:absolute; top:644px; left:calc(50% - 1008px/2);}
#box7 .slideWrap #box7Slider{width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; overflow-x:clip; overflow-y:visible;}
#box7 .slideWrap #box7Slider .swiper-container{overflow:visible;}
#box7 .slideWrap #box7Slider .swiper-container ul.swiper-wrapper li.swiper-slide .title{width:auto; height:49px; margin-top:-106px;}
#box7 .slideWrap #box7Slider .swiper-container ul.swiper-wrapper li.swiper-slide .prd{width:1000px; position:absolute; top:0; left:calc(50% - 1000px/2);}

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

#box7 .slideWrap .swiper-pagination{width:100%; bottom:-50px !important; left:0px !important;}
#box7 .slideWrap .swiper-pagination .swiper-pagination-bullet{width:102px; height:14px; border-radius:8px; background:#ff291b; opacity:0.3; margin:0 5px;}
#box7 .slideWrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1;}

#box7 .slideWrap .box{width:100%; position:absolute; top:0; left:0; z-index:1;}

/*box8*/
#box8{width:100%; height:auto; background:#fff; padding:170px 0 169px; position:relative; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}

#box8 .title{width:795px; padding-bottom:102px;}
#box8 .banner{width:1089px; padding-bottom:70px;}

#box8 ul.tabHead{width:1059px; margin:0 auto 77px; display:flex; flex-wrap:wrap;}
#box8 ul.tabHead > li{width:25%; padding:30px 0; cursor:pointer; border-bottom:4px solid rgba(255,255,255,1); opacity:0.5;}
#box8 ul.tabHead > li.on{border-bottom:4px solid rgba(0,0,0,1); opacity:1;}
#box8 ul.tabHead > li p{display:block; width:100%; letter-spacing:-1.2px; line-height:1; text-align:center; font-size:40px; color:#000; font-weight:900; font-family:'Pretendard', sans-serif !important;}

#box8 .cnts{width:1071px; margin:0 auto;}
#box8 .cnts .prds{width:100%; display:flex; flex-wrap:wrap; justify-content:center; }
#box8 .cnts .prds a{width:calc(33.3333% - 14px);}
#box8 .cnts .prds a.prd4,
#box8 .cnts .prds a.prd5{margin:48px 7px 0;}
#box8 .cnts a.btn{width:680px; height:96px; margin:69px auto 0;}

#box8 .cnts{display:none;}
#box8 .cnt1{display:block;}

/*box9*/
#box9{width:100%; height:4574px; background:#fff4eb; position:relative;}
#box9 .title{width:809px; padding:170px 0 98px;}
#box9 a.prds{width:1068px; margin-bottom:104px;}
#box9 a.prds img{width:100%;}

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


/* BASIC css end */