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

/*-------------------------------------*/
.outerWrap{display:none;}

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

.policyWrap .agreeAll{padding-bottom:30px; border-bottom:1px solid #888;}
.policyWrap .agreeAll span.chk{display:block; width:28px; height:28px; background:url("http://skinfood.img15.kr/data/content/recruit/chk-off.png") no-repeat center / cover; margin:-4px 8px 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:18px; color:#333; float:left;}
.policyWrap .agreeAll::after{content:""; display:block; clear:both;}/*clearfix*/

.policyWrap .agree span.chk{display:block; width:28px; height:28px; background:url("http://skinfood.img15.kr/data/content/recruit/chk-off.png") no-repeat center / cover; margin:-4px 8px 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:18px; color:#333; float:left;}
.policyWrap .agree::after{content:""; display:block; clear:both;}/*clearfix*/

.policyWrap h1{font-size:24px; text-align:center; font-weight:600; color:#333; letter-spacing:-0.5px; padding-bottom:70px;}
.policyWrap .inner .policy{position:relative; margin-top:50px;}
.policyWrap .inner .policy::before{content:""; display:block; width:calc(100% - 100px); height:35px; background:#fff; position:absolute; top:36px; left:0; border-top-left-radius:35px;}
.policyWrap .inner .policy::after{content:""; display:block; width:calc(100% - 100px); height:35px; background:#fff; position:absolute; bottom:0; left:0; border-bottom-left-radius:35px;}
.policyWrap .inner .policy .cnt{background:#fff; padding:35px 100px 60px 60px; border-radius:35px; height:230px; overflow-y:scroll; font-size:14px; 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: 70px;
}
.policyWrap .inner .policy .cnt::-webkit-scrollbar-thumb{
    background-color: #EE8D03;
    background-clip: padding-box;
    border: 31px solid transparent;
    border-radius:70px;
}
.policyWrap .inner .policy .cnt::-webkit-scrollbar-track{
    background-color: transparent;
}

.policyWrap .inner .policy .agree{margin-bottom:12px;}
.policyWrap .policy-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 50px; border-radius:35px;}


.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(2deg);}
    100%{transform:rotate(0);}
}

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

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

@keyframes ani4{
    0%{transform:rotate(0);}
    50%{transform:rotate(3deg);}
    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 .tit span{font-size:16px; color:#888; letter-spacing:-0.5px; display:block;}
.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:6px; right:-15px;}
.secs .subtit{font-size:18px; letter-spacing:-0.5px; display:block;}
.secs .info{margin-top:30px;}
.secs .info > li img{display:inline-block; width:11px; margin:-3px 3px 0 0;}
.secs .info > li,
.secs .info > li b{font-size:15px; letter-spacing:-0.5px; color:#333; font-weight:normal;line-height:1.7;}
.secs .info > li strong{position:relative;}
.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:180px;}
.sec1 ul{display:flex; flex-wrap:wrap;}
.sec1 ul li{width:50%; padding-top:28px;}
.sec1 ul li label{letter-spacing:-0.5px; position:relative; display:inline-block; font-size:18px; 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:3px; right:-16px;}
.sec1 ul li input{height:45px; width:71%; display:block; font-size:16px; padding:10px 15px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; border:1px solid #888; border-radius:23px;}

.sec1 ul li .select-wrap{position:relative;}
.sec1 ul li .select-wrap select{
height:45px; width:71%; 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 / cover; position:absolute; top:14px; left:calc(71% - 32px);}


.sec2{margin:100px auto 0;}
.sec2 .resumeWrap .subtit{font-size:18px; letter-spacing:-0.5px; display:inline-block; margin-top:40px; 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:-19px;}
.sec2 .resumeWrap .resumebox{font-size:16px; line-height:1.5; 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:16px; line-height:1.2; content:"내용을 입력하세요 (1000byte)"; display:block; color:#888; position:absolute; top:0; left:0; z-index:-1; padding:8px 10px; 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:100px auto 0;}
.sec3 .tit span{display:block; margin-top:10px;}
.sec3 .subtit{margin:32px 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:7px; left:10px; width:32px;}
.sec3 label .btn-upload p{padding:0 60px 0 60px; height:43px; line-height:44px; font-size:15px; letter-spacing:-0.5px; color:#333; border:1px solid #888; border-radius:23px;}
.sec3 label .btn-upload p span{float:right; color:#ffcc01;}
.sec3 label .btn-upload p b{font-weight:normal;}
.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;}
.sec3 input[type=file]{display:none;}
.sec3 ul.info > li:nth-last-child(1) b{opacity:0;}

.sec4{background:#f3f3f3; padding:30px 30px 28px; font-size:18px; line-height:1.5; position:relative; margin-top:100px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.sec4 .agree{position:absolute; top:44px; right:30px; display:flex; flex-wrap:wrap;}
.sec4 .agree span.chk{display:inline-block; width:28px; height:28px; background:url("http://skinfood.img15.kr/data/content/recruit/chk-off.png") no-repeat center / cover; margin-right:4px; cursor:pointer;}
.sec4 .agree span.chk.chkon{background:url("http://skinfood.img15.kr/data/content/recruit/chk-on.png") no-repeat center / cover;}

.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 250px; 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:50px 60px 40px; border:1px solid #333; border-radius:25px;}
.popWrap .pops p{font-size:18px; line-height:1.5; color:#333; text-align:center;}
.popWrap .pops a{display:block; margin:20px auto 0; font-size:20px; width:200px; padding:12px 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:16px; color:red; display:block; font-weight:normal;}

.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:16px; 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 */