@charset "utf-8";

#AppleCookieWrap #container {padding:0;}

.Wrap, .StepInner {width:100%;position:relative;}

/* step01 -------------------------------------------------------------------------------------------------- */
.StepWrap01 {background:url(/image/apple_cookie/step01_w_bg.jpg) 0 0 repeat-x;padding:0 !important;}
.StepWrap01 .StepInner {background-size:contain;text-align:center;}
/* .StepWrap01 .StepInner::before {content:"";display:block;width:100%;height:146px;position:absolute;left:0;bottom:0;background-color:#e1cb9c;} */
.StepWrap01 .StepInner .Title {
    position:absolute;left:50%;transition: all 0.2s ease-in-out 0s;animation:bounce 3s infinite;z-index:10;
    width:100%;max-width:1030px;
}
.StepWrap01 .StepInner > img {margin:auto;}
.StepWrap01 .StepInner::after {
    content:"";display:block;width:100%;height:190px;background:url(/image/apple_cookie/step01_round.png) 0 100% no-repeat;
    background-size:100% auto;position:absolute;left:0;bottom:-1px;z-index:1;
}

@keyframes bounce {
    0% {
        transform:translate(-50%, 100px);
        animation-timing-function: ease-out;
    }
    50% {
        transform:translate(-50%, 50px);
        animation-timing-function: ease-in;
    }
    100% {
        transform:translate(-50%, 100px);
    }   
}

@keyframes bounce1 {
    0% {
        transform:translate(-50%, 50px);
        animation-timing-function: ease-out;
    }
    50% {
        transform:translate(-50%, 30px);
        animation-timing-function: ease-in;
    }
    100% {
        transform:translate(-50%, 50px);
    }   
}

/* step02 -------------------------------------------------------------------------------------------------- */
.StepWrap02 {padding:100px 0;}
.StepWrap02 .GirlObj {text-align:center;margin-bottom:30px;width:100%;padding:0 16%;}
.StepWrap02 .GirlObj img {margin:auto;}
.StepWrap02 .StepWrap02Group .Title {
    font-size:36px;font-family: sbfont;font-weight: 600;color:#000;word-wrap: break-word;word-break:keep-all;
    overflow-wrap:break-word;text-align:center;line-height:140%;letter-spacing:-1px;
}
.StepWrap02 .StepWrap02Group .Title strong {display:block;color:#193586;font-weight: 700;}


/* step03 -------------------------------------------------------------------------------------------------- */
.StepWrap03 {background:url(/image/apple_cookie/step03_bg.jpg) 50% 0 no-repeat;background-size:cover;background-attachment:fixed;}
.StepWrap03::before, .StepWrap03::after {content:"";display:block;position:absolute;top:0;left:0;width:100%;}
.StepWrap03::before {background:url(/image/apple_cookie/step01_round01.png) 0 0 no-repeat;background-size:100% auto;z-index:2;height:190px;}
.StepWrap03::after {background-color:rgba(25,53,134,0.8);height:100%;z-index:1;}
.StepWrap03 .Title {
    padding:30% 0 20%;position:relative;z-index:10;text-align:center;color:#f3b718;font-size:43px;font-family: sbfont;font-weight: 600;
    letter-spacing:-1px;line-height:140%;word-wrap:break-word;word-break:keep-all;overflow-wrap:break-word;
}
.StepWrap03 .Title span {font-size:34px;font-weight: 500;}
.StepWrap03 .Title strong {color:#f178af;}
.StepWrap03 section.center {z-index:10;top:1px;}
.StepWrap03 section.center .slick-dots, .StepWrap03 section.center .slick-prev, .StepWrap03 section.center .slick-next {display:none !important;}
.StepWrap03 section.center .slick-slide > div {margin:0 10px;}
.StepWrap03 section.center .slick-slide a {
    font-size:0;display:block;line-height:normal;border-top-left-radius:10px;border-top-right-radius:10px;overflow:hidden;
    -webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.5);-moz-box-shadow:0px 0px 8px rgba(0,0,0,0.5);box-shadow:0px 0px 8px rgba(0,0,0,0.5);
}

/* step04 -------------------------------------------------------------------------------------------------- */
.StepWrap04 {background:#fff7cc;}
.StepWrap04 .Step04Group {display:flex;column-gap:30px;}
.StepWrap04 .Left {padding-top:110px;flex-shrink:0;flex-basis:450px;}
.StepWrap04 .Left .NumSixtySeven {position:relative;}
.StepWrap04 .Left .NumSixtySeven .Six, .StepWrap04 .Left .NumSixtySeven .Seven {position:absolute;}
.StepWrap04 .Left .NumSixtySeven .Six {top:26%;left:26%;transform: translate(-50%, -50%);animation:balloon 2s infinite;}
.StepWrap04 .Left .NumSixtySeven .Seven {top:9%;left:60%;transform: translate(-50%, -50%);animation:balloon 3s infinite;}
.StepWrap04 .Left .NumSixtySeven .Girl {font-size:0;line-height:normal;}
.StepWrap04 .Left .Title {
    font-size:24px;line-height:140%;font-family: sbfont;font-weight: 500;text-align:center;color:#000;
    word-wrap:break-word;word-break:keep-all;overflow-wrap:break-word;
}
.StepWrap04 .Left .Title strong {color:#f178af;}
.StepWrap04 .Left .Title span {font-weight:600;}
.StepWrap04 .Right {padding-top:100px;flex-basis:679px;}
.StepWrap04 .Right .Box {
    border-radius:40px;padding:0 45px 45px;background:#fff url(/image/apple_cookie/title_bg.png) 50% 0 no-repeat;text-align:center;
    -webkit-box-shadow:0px 0px 12px rgba(0,0,0,0.1);-moz-box-shadow:0px 0px 12px rgba(0,0,0,0.1);box-shadow:0px 0px 12px rgba(0,0,0,0.1);
}
.StepWrap04 .Right .Box h3 {
    color:#f178af;font-family: sbfont;font-weight: 700;font-size:40px;-webkit-text-stroke:2px #193586;text-align:center;
    padding:17px 0 40px;
}
.StepWrap04 .Right .Box .BookInfo {
    text-align:center;line-height:140%;word-wrap:break-word;word-break:keep-all;overflow-wrap:break-word;margin-bottom:30px;
    color:#000;
}
.StepWrap04 .Right .Box .BookInfo strong {font-weight:600;}

@keyframes balloon {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(7deg);}
    100% {transform: rotate(0deg);}
}

/* step05 -------------------------------------------------------------------------------------------------- */
.StepWrap05 .AppleLeft, .StepWrap05 .CookieRight {height:50vh;min-height:900px;max-height:1000px;}
/* .StepWrap05 .AppleLeft, .StepWrap05 .CookieRight div {background-size:auto calc(100% - 100px) !important;} */
.StepWrap05 .AppleLeft {
    background:#f178af url(/image/apple_cookie/step04_girl.png) 50% 100% no-repeat;position:sticky;top:168px;left:0;z-index:0;background-size:contain;
}
.StepWrap05 .AppleLeft::before, .StepWrap05 .CookieRight div::before {content:"";display:block;position:absolute;bottom:0;}
.StepWrap05 .CookieRight div {
    background:#f3b718 url(/image/apple_cookie/step04_boy.png) 0 100% no-repeat;width:50%;position:absolute;right:0;top:0;height:100%;background-size:contain;
}


/* step06 -------------------------------------------------------------------------------------------------- */
.StepWrap06 .Title {
    font-size:31px;font-family: sbfont;font-weight: 500;color:#000;letter-spacing:-1px;width:100%;margin-bottom:70px;
    word-wrap: break-word;word-break:keep-all;overflow-wrap:break-word;line-height:140%;padding:0 20px;
}
.StepWrap06 .Title strong {font-size:37px;}
.StepWrap06 .StepInner {padding:100px 0;text-align:center;}
.StepWrap06 .StepInner img {margin:auto;}
.StepWrap06 .StepInner .BtnSample {width:100%;text-align:center;padding-top:50px;}
.StepWrap06 .StepInner .BtnSample a {
    line-height:80px;display:inline-block;border-radius:50px;background: linear-gradient(to bottom,  #204ac2 0%,#193586 100%);
    font-size:22px;color:#fff;font-weight:500;padding:0 40px;
    -webkit-box-shadow:0px 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0px 5px 10px rgba(0,0,0,0.2);box-shadow:0px 5px 10px rgba(0,0,0,0.2);
}
.StepWrap06 .StepInner .BtnSample a:hover {background: linear-gradient(to bottom,  #4774f0 0%,#2448b4 100%);}
.StepWrap06 .StepInner .BtnSample.mb {display:none;}

/* 모바일 ------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1620px){
    .StepWrap01 .StepInner .Title {max-width: 950px;}
}

@media screen and (max-width: 1460px){
}

@media screen and (max-width: 1360px){
    .StepWrap01 .StepInner .Title {max-width: 820px;}
}

@media screen and (max-width: 1210px){
    .StepWrap01 .StepInner .Title {max-width:100%;padding:0 15%;}
    .StepWrap05 .AppleLeft, .StepWrap05 .CookieRight {min-height: 600px;}
}

@media screen and (max-width: 1000px){
    .StepWrap04 .Step04Group {flex-direction: column-reverse;flex-wrap:wrap;}
    .StepWrap04 .Left {padding-top:50px;display:flex;flex-direction:row-reverse;column-gap:30px;}
    .StepWrap04 .Left .Title {flex-basis:450px;flex-shrink:1;}
    .StepWrap04 .Right .Box .BookInfo {font-size:20px;}
    .StepWrap04 .Left .NumSixtySeven {flex-shrink:0;}
}

@media screen and (max-width: 900px){
    .StepWrap05 .AppleLeft, .StepWrap05 .CookieRight {min-height: 550px;}
}

@media screen and (max-width: 800px){
    .StepWrap04 .Left {padding-top: 40px;flex-direction: column;align-items: flex-start;}
    .StepWrap04 .Left .Title {flex-basis: auto;}

}

@media screen and (max-width: 768px){
    .StepWrap01 .StepInner .Title {padding:0 7%;}
    .StepWrap01 .StepInner {padding-bottom:120px;background-color:#e1cb9c;}
    .StepWrap01 {background-image:none;}

    .StepWrap02 .GirlObj {padding: 0 12%;}
    .StepWrap02 .StepWrap02Group .Title {font-size: 32px;}

    .StepWrap03 .Title {font-size: 40px;}
    .StepWrap03 .Title span {font-size: 31px;}

    .StepWrap05 .AppleLeft, .StepWrap05 .CookieRight {height: 40vh;min-height: 440px;}

    .StepWrap06 .StepInner .BtnSample.mb {display:block;}
    .StepWrap06 .StepInner .BtnSample {display:none;}
    
}

@media screen and (max-width: 640px){
    .Wrap {padding: 80px 0;}
    .StepWrap02 .StepWrap02Group .Title {font-size: 30px;line-height: 130%;}

    .StepWrap03 {background-size:auto 100%;}
    .StepWrap03.Wrap {padding-bottom:0;}
    .StepWrap03 .Title {font-size: 35px;}

    .StepWrap04.Wrap {padding-bottom:0;padding-top:0;}
    .StepWrap04 .Right {flex-basis:auto;}

    .StepWrap05.Wrap {padding:0;}
    .StepWrap05 .AppleLeft {
        background:#f178af url(/image/apple_cookie/step04_01girl.png) 50% 100% no-repeat;background-size:contain !important;
        position:relative;top:0;
    }
    .StepWrap05 .CookieRight div {width:100%;background:#f3b718 url(/image/apple_cookie/step04_01boy.png) 0 100% no-repeat;background-size:contain !important;}
    .StepWrap05 .AppleLeft, .StepWrap05 .CookieRight {height:50vh;min-height:auto;}

    .StepWrap06.Wrap {padding:0;}
    .StepWrap06 .Title {font-size: 35px;}
}



@media screen and (max-width: 480px){
    .StepWrap02 .StepWrap02Group .Title {font-size: 25px;}
    .StepWrap01 .StepInner .Title {animation:bounce1 3s infinite;padding:0 20px;}
    .StepWrap01 .StepInner {padding-bottom: 60px;}
    .StepWrap02 .GirlObj {padding: 0;}

    .StepWrap03 .Title {font-size: 30px;}
    .StepWrap03 .Title span {font-size: 21px;}
    .StepWrap04 .Left .NumSixtySeven .Six {max-width:120px;top: 29%;left: 30%;}
    .StepWrap04 .Left .NumSixtySeven .Seven {max-width:140px;top: 11%;}
    .StepWrap04 .Right .Box h3 {padding-bottom:20px;}
    .StepWrap04 .Right .Box {padding: 0 30px 30px;}
    .StepWrap04 .Right .Box .BookInfo {font-size: 18px;}
    .StepWrap04 .Left .Title {font-size: 23px;}

    .StepWrap05 .AppleLeft, .StepWrap05 .CookieRight {height: 36vh;}
    
    .StepWrap06 .Title {font-size: 30px;}
    .StepWrap06 .Title strong {font-size: 32px;}
    .StepWrap06 .StepInner .BtnSample a {font-size: 20px;letter-spacing:-1px;}
}


@media screen and (max-width: 400px){
    .Wrap {padding:60px 0;}
    .StepWrap02 .StepWrap02Group .Title {font-size: 23px;}

    .StepWrap04 .Left .NumSixtySeven .Six {max-width:100px;top: 29%;left: 30%;}
    .StepWrap04 .Left .NumSixtySeven .Seven {max-width:120px;top: 12%;}
    
}

@media screen and (max-width: 360px){
    .StepWrap04 .Left .NumSixtySeven .Six {max-width:80px;top:32%;left:32%;}
    .StepWrap04 .Left .NumSixtySeven .Seven {max-width:100px;top: 13%;}

    .StepWrap06 .StepInner .BtnSample a {font-size: 17px;line-height: 68px;padding: 0 30px;}
}

@media screen and (max-width: 320px){
    .StepWrap01 .StepInner {padding-bottom: 70px;}
    .StepWrap02 .StepWrap02Group .Title {font-size:21px;}
    .Wrap {padding: 50px 0;}

    .StepWrap03 .Title {font-size: 23px;}
    .StepWrap03 .Title span {font-size: 18px;}

    .StepWrap04 .Right .Box {padding: 0 20px 30px;}
    .StepWrap04 .Right .Box .BookInfo {font-size: 16px;}
    .StepWrap04 .Left .Title {font-size: 21px;}

    .StepWrap05 .AppleLeft, .StepWrap05 .CookieRight {height: 25vh;}

    .StepWrap06 .Title {font-size: 23px;}
    .StepWrap06 .Title strong {font-size: 25px;}
}