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

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


.intro{height:836px; background:url("http://skinfood.img15.kr/data/content/recruit/tit-bg.png") no-repeat center bottom / cover;}
.intro .logo{width:130px; padding-top:80px;}
.intro .tit{width:700px; margin-top:100px;}
.intro .subtit{width:420px; margin-top:45px;}

.intro .fdWrap{position:relative; transform:scale(0.8); margin-top:120px;}
.intro .fdWrap img{position:absolute; top:0; left:0;}

.intro .fdWrap img.fd1{left:calc(50% - 209px/2 - 350px); top:100px; transform:rotate(0); animation: ani1 1s linear infinite;}
.intro .fdWrap img.fd2{left:calc(50% - 289px/2 - 100px); transform:rotate(0); animation: ani2 1s linear infinite;}
.intro .fdWrap img.fd3{left:calc(50% - 389px/2 - 60px); top:170px; transform:rotate(0); animation: ani3 1s linear infinite; animation-delay: -.5s;}
.intro .fdWrap img.fd4{left:calc(50% - 212px/2 + 290px); top:-14px; transform:rotate(0); animation: ani1 1s linear infinite; animation-delay: -1s;}
.intro .fdWrap img.fd5{left:calc(50% - 229px/2 + 260px); top:270px; transform:rotate(0); animation: ani4 1s linear infinite; animation-delay: -.7s;}
.intro .fdWrap img.fd6{left:calc(50% - 199px/2 + 133px); top:-10px; transform:rotate(0); animation: ani4 1s linear infinite;}

@keyframes ani1{
    0%{transform:rotate(0);}
    50%{transform:rotate(3deg);}
    100%{transform:rotate(0);}
}

@keyframes ani2{
    0%{transform:rotate(0);}
    50%{transform:rotate(-3deg);}
    100%{transform:rotate(0);}
}

@keyframes ani3{
    0%{transform:rotate(0);}
    50%{transform:rotate(3deg);}
    100%{transform:rotate(0);}
}

@keyframes ani4{
    0%{transform:rotate(0);}
    50%{transform:rotate(4deg);}
    100%{transform:rotate(0);}
}

.secs{width:1150px; margin:0 auto;}
.secs .tit{font-size:24px; letter-spacing:-0.5px; display:inline-block; position:relative; padding-left:29px;}
.secs .tit::after{content:""; display:block; position:absolute; top:0; left:0px; width:19px; height:29px; background:url("http://skinfood.img15.kr/data/content/recruit/ico-tag.png") no-repeat center / cover;}
.secs .outerWrap{margin-top:22px;}
.secs .outerWrap > li h4{padding:28px 0; border-bottom:1px solid #333; font-size:20px; font-weight:normal; letter-spacing:-0.5px; position:relative; cursor:pointer;}
.secs .outerWrap > li h4.open{border-bottom:none;}
.secs .outerWrap > li h4::after{content:""; display:block; width:36px; height:36px; background:url("http://skinfood.img15.kr/data/content/recruit/ico-arrw.png") no-repeat center / cover; position:absolute; top:22px; right:0; transform:rotate(0deg); transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease;}
.secs .outerWrap > li h4.open::after{transform:rotate(180deg); transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease;}
.secs .outerWrap > li h4 strong{padding-right:20px;}

.sec1 .tit{margin-top:190px;}
.sec1 .outerWrap > li .toggle{display:none;}
.sec1 .outerWrap > li .toggle ul.cnt{border-bottom:1px solid #333; padding:0 0 35px;}
.sec1 .outerWrap > li .toggle ul.cnt > li{display:flex; flex-wrap:nowrap; padding-top:15px; position:relative;}
.sec1 .outerWrap > li .toggle ul.cnt > li::after{content:""; display:block; width:15px; height:4px; background:#ffcc01; position:absolute; top:24px; left:0; border-radius:3px;}
.sec1 .outerWrap > li .toggle ul.cnt > li p,
.sec1 .outerWrap > li .toggle ul.cnt > li span{font-size:16px; letter-spacing:-0.5px; hyphens:none; word-break:keep-all; line-height:1.6;}
.sec1 .outerWrap > li .toggle ul.cnt > li p{display:block; width:190px; padding-left:50px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.sec1 .outerWrap > li .toggle ul.cnt > li span{display:block; width:calc(100% - 190px);}
.sec1 .outerWrap > li .toggle ul.cnt > li.nop span{padding-left:50px; width:100%;}


.sec2{width:100%; padding:150px 0 250px; margin-top:150px; background:#F7F5F1;}
.sec2 .outerWrap > li h4.open{border-bottom:1px solid #333;}
.sec2 .innerWidth{width:1150px; margin:0 auto;}
.sec2 .outerWrap > li .toggle{display:block;}
.sec2 .outerWrap > li .toggle ul.cnt{padding:40px 0 40px;}
.sec2 .outerWrap > li .toggle ul.cnt > li.txt{font-size:16px; letter-spacing:-0.5px; color:#333;}
.sec2 .outerWrap > li .toggle ul.cnt > ul.img{display:flex; flex-wrap:wrap; text-align:center; justify-content:center; padding-top:25px; margin-left:-10px; margin-right:-10px;}

.sec2 .outerWrap > li .toggle ul.cnt > ul.img > li{padding:0 11px 30px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.sec2 .outerWrap > li .toggle ul.cnt > ul.img > li span{font-size:14px; padding-top:10px; display:block; text-align:center;}

.sec2 .outerWrap > li .toggle ul.cnt1 > ul.img > li{width:25%;}
.sec2 .outerWrap > li .toggle ul.cnt1 > ul.img > li img{width:100%; display:block;}
.sec2 .outerWrap > li .toggle ul.cnt1 > ul.img > li:nth-last-child(1){width:100%; padding:0;}
.sec2 .outerWrap > li .toggle ul.cnt1 > ul.img > li:nth-last-child(1) img{width:540px;}

.sec2 .outerWrap > li .toggle ul.cnt2 > ul.img > li img{width:280px; display:block;}

.sec2 .outerWrap > li .toggle ul.cnt3 > ul.img > li{width:33.3333%;}
.sec2 .outerWrap > li .toggle ul.cnt3 > ul.img > li img{width:100%; display:block;}

.sec2 .outerWrap > li .toggle ul.cnt4 > ul.img > li{width:33.3333%;}
.sec2 .outerWrap > li .toggle ul.cnt4 > ul.img > li img{width:100%; display:block;}

.recruit-btn{display:block; width:1150px; font-size:20px; line-height:1; padding:24px 0; background:#ffcc01; color:#fff !important; text-align:center; font-weight:600; letter-spacing:-0.5px; margin:100px auto 0px; border-radius:35px;}












/* BASIC css end */