/* BASIC css start */
#overlay_layer {
  display: none;
}

button img {
  display: block;
}

.wrap {
  position: relative;
  width: 100%;
  overflow:hidden;
}
.wrap * {
  font-family: YoonGothic !important;
}
.wrap img {
    max-width: none;
    margin:0 auto;
    display:block;
    background:transparent;
}


/*-------------------------------------*/
.wrap{margin-top:50px;}

.intro{height:430px; background:url("http://skinfood.img15.kr/data/content/recruit/tit-bg.png") no-repeat center / cover;}
.intro .logo{width:85px; padding-top:50px;}
.intro .tit{width:330px; margin-top:50px;}
.intro .subtit{width:170px; margin-top:20px;}

.intro .fdWrap{position:relative; transform:scale(0.38); margin-top:50px;}
.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:calc(100% - 40px); margin:0 auto;}
.secs .tit{font-size:20px; letter-spacing:-0.5px; display:inline-block; position:relative; padding-left:24px;}
.secs .tit::after{content:""; display:block; position:absolute; top:0; left:0px; width:15px; height:23px; 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:18px 0; border-bottom:1px solid #333; font-size:16px; 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:34px; height:34px; background:url("http://skinfood.img15.kr/data/content/recruit/ico-arrw.png") no-repeat center / cover; position:absolute; top:10px; right:0; transform:rotate(0deg); transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease;}
.sec2 .outerWrap > li h4::after{content:""; display:block; width:34px; height:34px; background:url("http://skinfood.img15.kr/data/content/recruit/ico-arrw.png") no-repeat center / cover; position:absolute; top:14px; 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:12px;}

.sec1 .tit{margin-top:70px;}
.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:10px; height:3px; background:#ffcc01; position:absolute; top:23px; left:0; border-radius:3px;}
.sec1 .outerWrap > li .toggle ul.cnt > li p,
.sec1 .outerWrap > li .toggle ul.cnt > li span{font-size:13px; 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:125px; padding-left:22px; 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% - 125px);}
.sec1 .outerWrap > li .toggle ul.cnt > li.nop span{padding-left:20px; width:100%;}


.sec2{width:100%; padding:50px 0 100px; margin-top:50px; background:#F7F5F1;}
.sec2 .outerWrap > li h4.open{}
.sec2 .innerWidth{width:calc(100% - 40px); margin:0 auto;}
.sec2 .outerWrap > li .toggle{display:block;}
.sec2 .outerWrap > li .toggle ul.cnt{padding:20px 0 10px;}
.sec2 .outerWrap > li .toggle ul.cnt > li.txt{font-size:13px; letter-spacing:-0.5px; color:#333; line-height:1.6;}
.sec2 .outerWrap > li .toggle ul.cnt > ul.img{display:flex; flex-wrap:wrap; text-align:center; justify-content:center; padding-top:25px; margin-left:-6px; margin-right:-6px;}

.sec2 .outerWrap > li .toggle ul.cnt > ul.img > li{padding:0 6px 12px; 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:12px; padding-top:10px; display:block; text-align:center;}

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

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

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

.sec2 .outerWrap > li .toggle ul.cnt4{padding:20px 0 0;}
.sec2 .outerWrap > li .toggle ul.cnt4 > ul.img > li{width:100%;}
.sec2 .outerWrap > li .toggle ul.cnt4 > ul.img > li img{width:100%; display:block;}

.recruit-btn{display:block; width:calc(100% - 40px); font-size:14px; line-height:1; padding:18px 0; background:#ffcc01; color:#fff !important; text-align:center; font-weight:600; letter-spacing:-0.5px; margin:50px auto 0; border-radius:35px;}

/*on*/
.secs .tit{opacity:1; transform:translateY(30px); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.secs .tit.on{opacity:1; transform:translateY(0px); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.secs .outerWrap > li h4{opacity:1; transform:translateY(30px); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.secs .outerWrap > li h4.on{opacity:1; transform:translateY(0px); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.secs p{opacity:1; transform:translateY(30px); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.secs p.on{opacity:1; transform:translateY(0px); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.secs img{opacity:1; transform:translateY(30px); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.secs img.on{opacity:1; transform:translateY(0px); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}

.intro .logo{opacity:1; transform:translateY(30px); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.intro .logo.on{opacity:1; transform:translateY(0px); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.intro .tit{opacity:1; transform:translateY(30px); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.intro .tit.on{opacity:1; transform:translateY(0px); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.intro .subtit{opacity:1; transform:translateY(30px); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.intro .subtit.on{opacity:1; transform:translateY(0px); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.intro .fdWrap img{opacity:1; transform:translateY(30px); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.intro .fdWrap img.on{opacity:1; transform:translateY(0px); transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}






/* BASIC css end */