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

.outerWrap{display:none;}

.policyWrap{background:#fff; width:100%; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.policyWrap .inner{width:100%; margin:0 auto; background:#f3f3f3; padding:70px 20px 100px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}

.policyWrap .agreeAll{padding-bottom:35px; border-bottom:1px solid #888;}
.policyWrap .agreeAll span.chk{display:block; width:24px; height:24px; background:url("http://skinfood.img15.kr/data/content/recruit/chk-off.png") no-repeat center / cover; margin:-3px 6px 0 0; cursor:pointer; float:left;}
.policyWrap .agreeAll span.chk.chkon{background:url("http://skinfood.img15.kr/data/content/recruit/chk-on.png") no-repeat center / cover;}
.policyWrap .agreeAll p{font-size:16px; color:#333; float:left;}
.policyWrap .agreeAll::after{content:""; display:block; clear:both;}/*clearfix*/

.policyWrap .agree span.chk{display:block; width:24px; height:24px; background:url("http://skinfood.img15.kr/data/content/recruit/chk-off.png") no-repeat center / cover; margin:-3px 6px 0 0; cursor:pointer; float:left;}
.policyWrap .agree span.chk.chkon{background:url("http://skinfood.img15.kr/data/content/recruit/chk-on.png") no-repeat center / cover;}
.policyWrap .agree p{font-size:16px; color:#333; float:left;}
.policyWrap .agree::after{content:""; display:block; clear:both;}/*clearfix*/

.policyWrap h1{font-size:20px; text-align:center; font-weight:600; color:#333; letter-spacing:-0.5px; padding-bottom:40px;}
.policyWrap .inner .policy{position:relative; margin-top:35px;}
.policyWrap .inner .policy::before{content:""; display:block; width:calc(100% - 40px); height:20px; background:#fff; position:absolute; top:33px; left:0; border-top-left-radius:20px;}
.policyWrap .inner .policy::after{content:""; display:block; width:calc(100% - 40px); height:20px; background:#fff; position:absolute; bottom:0; left:0; border-bottom-left-radius:20px;}
.policyWrap .inner .policy .cnt{background:#fff; padding:20px 50px 20px 20px; border-radius:20px; height:200px; overflow-y:scroll; font-size:11px; line-height:1.5; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}

.policyWrap .inner .policy .cnt::-webkit-scrollbar{
    width: 30px;
}
.policyWrap .inner .policy .cnt::-webkit-scrollbar-thumb{
    background-color: #EE8D03;
    background-clip: padding-box;
    border: 12px solid transparent;
    border-radius:30px;
}
.policyWrap .inner .policy .cnt::-webkit-scrollbar-track{
    background-color: transparent;
}

.policyWrap .inner .policy .cnt::scrollbar{
    width: 30px;
}
.policyWrap .inner .policy .cnt::scrollbar-thumb{
    background-color: #EE8D03;
    background-clip: padding-box;
    border: 12px solid transparent;
    border-radius:30px;
}
.policyWrap .inner .policy .cnt::scrollbar-track{
    background-color: transparent;
}

.policyWrap .inner .policy .agree{margin-bottom:12px;}
.policyWrap .policy-btn{display:block; width:100%; 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;}


.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 span{font-size:15px; color:#888; letter-spacing:-0.5px; display:block;}
.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 .tit.req:after{content:""; display:block; width:10px; height:10px; background:url("http://skinfood.img15.kr/data/content/recruit/ico-required.png") no-repeat center / cover; position:absolute; top:2px; right:-16px;}
.secs .subtit{font-size:16px; letter-spacing:-0.5px; display:block;}
.secs .info{margin-top:20px;}
.secs .info > li img{display:inline-block; width:10px; margin:-3px 3px 0 0;}
.secs .info > li,
.secs .info > li b{font-size:12px; letter-spacing:-0.5px; color:#333; font-weight:normal;line-height:1.7;}
.secs .info > li.last b{opacity:1;}
.secs .info > li strong{position:relative; text-decoration:none;}
.secs .info > li strong:after{content:""; display:block; width:100%; height:6px; background:#ffcc01; position:absolute; bottom:0px; left:0; z-index:-1; border-radius:3px;}


.sec1{margin-top:70px;}
.sec1 ul{display:flex; flex-wrap:wrap;}
.sec1 ul li{width:100%; padding-top:28px;}
.sec1 ul li label{letter-spacing:-0.5px; position:relative; display:inline-block; font-size:16px; margin-bottom:8px;}
.sec1 ul li.req label:after{content:""; display:block; width:10px; height:10px; background:url("http://skinfood.img15.kr/data/content/recruit/ico-required.png") no-repeat center / cover; position:absolute; top:2px; right:-16px;}
.sec1 ul li input{height:45px; width:100%; display:block; font-size:15px; padding:10px 15px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; border:1px solid #888; border-radius:23px !important;}

.sec1 ul li .select-wrap{position:relative;}
.sec1 ul li .select-wrap select{
height:45px; width:100%; display:block; font-size:16px; padding:10px 15px; border:1px solid #888; border-radius:23px;
box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; background:none !important;
}
.sec1 ul li .select-wrap:after{content:""; display:block; width:15px; height:15px; background:url("http://skinfood.img15.kr/data/content/recruit/ico-arrw2.png") no-repeat center / 15px; position:absolute; top:5px; right:2px; background-color:#fff; padding:10px; border-radius:20px; pointer-events:none;}


.sec2{margin:80px auto 0;}
.sec2 .tit.req:after{content:""; display:block; width:10px; height:10px; background:url("http://skinfood.img15.kr/data/content/recruit/ico-required.png") no-repeat center / cover; position:absolute; top:6px; right:-15px;}
.sec2 .resumeWrap .subtit{font-size:16px; letter-spacing:-0.5px; display:inline-block; margin-top:30px; position:relative;}
.sec2 .resumeWrap .subtit:after{content:""; display:block; width:10px; height:10px; background:url("http://skinfood.img15.kr/data/content/recruit/ico-required.png") no-repeat center / cover; position:absolute; top:2px; right:-16px;}
.sec2 .resumeWrap .resumebox{font-size:15px; line-height:1.2; width:100%; height:auto; border:none; border-bottom:1px solid #333; letter-spacing:-0.5px; color:#333; padding:8px 0px; margin-top:12px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; position:relative;}
.sec2 .resumeWrap .resumebox:after{font-size:15px; line-height:1.2; content:"내용을 입력하세요 (1000byte)"; display:block; color:#888; position:absolute; top:0; left:0; z-index:-1; padding:8px 0px; width:100%;}
.sec2 .resumeWrap .resumebox.focus:after{content:"";}
.sec2 .resumeWrap .countTxt{float:right; margin-top:8px; font-size:14px; color:#888; font-weight:normal;}
.sec2 .resumeWrap .countTxt span{font-size:14px; color:#888; font-weight:normal;}
.sec2 .resumeWrap .countTxt em{color:red; display:none; padding-right:4px;}
.sec2 .resumeWrap::after{content:""; display:block; clear:both;}/*clearfix*/

.sec3{margin:80px auto 0;}
.sec3 .tit span{display:block; margin-top:8px;}
.sec3 .subtit{margin:30px 0 8px;}
.sec3 label{width:100%;}
.sec3 label .btn-upload{width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; position:relative;}
.sec3 label .btn-upload img{position:absolute; top:9px; right:12px; width:28px;}
.sec3 label .btn-upload p{padding:0 40px 0 20px; height:43px; line-height:44px; font-size:15px; letter-spacing:-0.5px; color:#ffcc01; border:1px solid #888; border-radius:23px;}
.sec3 label .btn-upload p::after{content:""; display:block; clear:both;}/*clearfix*/
.sec3 .url{width:100%; height:45px; font-size:15px; letter-spacing:-0.5px; color:#333; padding:10px 15px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; border:1px solid #888; border-radius:23px !important;}
.sec3 input[type=file]{display:none;}

.sec4{background:#f3f3f3; padding:20px; font-size:14px; line-height:1.5; position:relative; margin-top:50px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; hyphens:none; word-break:keep-all;}
.sec4 .agree{margin-top:18px;}
.sec4 .agree span.chk{display:block; width:22px; height:22px; background:url("http://skinfood.img15.kr/data/content/recruit/chk-off.png") no-repeat center / cover; margin-right:6px; cursor:pointer; float:left;}
.sec4 .agree span.chk.chkon{background:url("http://skinfood.img15.kr/data/content/recruit/chk-on.png") no-repeat center / cover;}
.sec4 .agree p{display:block; float:left; font-size:14px;}
.sec4 .agree::after{content:""; display:block; clear:both;}/*clearfix*/

.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 100px; border-radius:35px;}


.popWrap{display:none; width:100%; height:100vh; background:rgba(255,255,255,0.7); position:fixed; top:0; left:0; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}
.popWrap.show{display:flex; flex-wrap:wrap; transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease;}

.popWrap .pops{display:none; margin:auto; background:#fff; padding:30px 20px; border:1px solid #333; border-radius:25px; width:calc(100% - 40px); box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.popWrap .pops p{font-size:16px; line-height:1.5; color:#333; text-align:center;}
.popWrap .pops a{display:block; margin:20px auto 0; font-size:14px; width:200px; padding:15px 0; background:#ffcc01; color:#fff !important; text-align:center; font-weight:600; letter-spacing:-0.5px; border-radius:25px; cursor:pointer;}
.popWrap .pops p b{font-size:14px; color:red; display:block; font-weight:normal; hyphens:none; word-break:keep-all;}


.loaderWrap{display:none; flex-wrap:wrap; position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(255,255,255,0.95); z-index:9999;}
.loaderWrap.on{display:flex;}
.loaderWrap .loaderInn{display:block; margin:auto;}
.loaderWrap .loaderInn p{display:block; font-size:14px; line-height:1.5; text-align:center; font-weight:600; color:#ffcc01;}
.loaderWrap .loaderInn .loader {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffcc01;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
  margin:0 auto 15px;

}
@keyframes l3 {to{transform: rotate(1turn)}}


/* BASIC css end */