/* =================================================
  ȨÆäÀÌÁö ȸ¿ø ÀÎÁõ
==================================================== */
.cert-wrap .visual {position:relative; overflow: hidden; height:1099px;background:url('https://russeldata.megastudy.net/campus/images/russel/intro/2022/student_cert/visual_bg.jpg') no-repeat 0 0;}
.cert-wrap .visual .logo {position:absolute;left:0;top:100px;width:100%;text-align:center;opacity:0;}
.cert-wrap .visual .stit {position:absolute;left:0;top:207px;width:100%;text-align:center;opacity:0;}
.cert-wrap .visual .tit {position:absolute;left:0;top:283px;width:100%;text-align:center;opacity:0;transform: perspective(600px) rotateY(90deg);}
.cert-wrap .visual .text01 {position:absolute;left:0;top:555px;width:100%;text-align:center;opacity:0;}
.cert-wrap .visual .text02 {position:absolute;left:0;top:605px;width:100%;text-align:center;opacity:0;}
.cert-wrap .visual .hand {position:absolute;right:-100%;bottom:80px;width:100%;text-align:right;opacity:0;}
.cert-wrap .visual .icon01 {position:absolute;left:269px;bottom:159px;width:100%;text-align:left;opacity:0; animation: icon01 ease-in-out 2s 3s both;}
.cert-wrap .visual .icon02 {position:absolute;left:200px;bottom:250px;width:100%;text-align:left;opacity:0; animation: icon02 ease-in-out 2s 3s both;}
.cert-wrap .visual .icon03 {position:absolute;left:117px;bottom:255px;width:100%;text-align:left;opacity:0; animation: icon02 ease-in-out 2s 3s both;}
.cert-wrap .visual .icon04 {position:absolute;right:354px;bottom:267px;width:100%;text-align:right;opacity:0; animation: icon01 ease-in-out 2s 3s both;}
.cert-wrap .visual .icon05 {position:absolute;right:288px;bottom:152px;width:100%;text-align:right;opacity:0; animation: icon02 ease-in-out 2s 3s both;}
.cert-wrap .visual .icon06 {position:absolute;left:168px;bottom:334px;width:100%;text-align:left;opacity:0; animation: icon01 ease-in-out 2s 3s both;}

.cert-wrap .visual.on .logo {opacity:1;transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.cert-wrap .visual.on .stit {opacity:1;transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) .6s;}
.cert-wrap .visual.on .tit {opacity:1;transition:all .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.2s;transform:perspective(600px) rotateY(0deg);}
.cert-wrap .visual.on .text01 {opacity:1;transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.8s;}
.cert-wrap .visual.on .text02 {opacity:1;transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.8s;}
.cert-wrap .visual.on .hand {opacity:1; right:0; transition:all 1s 1.8s;}
.cert-wrap .visual.on [class*="icon"] { opacity:1; transition:all 1s 2.5s;}

.cert-wrap .cont01 .btn { width:100%;text-align:center; margin-bottom: 111px; }
.cert-wrap .cont03 { position:relative;background:url('https://russeldata.megastudy.net/campus/images/russel/intro/2022/student_cert/cont03_bg.jpg') #163176 no-repeat 0 0; padding: 110px 41px 60px; box-sizing: border-box;}
.cert-wrap .cont03 .list-03 li {color:#fff}
.cert-wrap .cont03 .tit { width:100%;text-align:center;}
.cert-wrap .cont03 .step-wrap { margin-top:57px; }
.cert-wrap .cont03 .step-wrap ul { display: flex; }
.cert-wrap .cont03 .step-wrap ul li { width:318px; border-radius: 27px; background-color: #ffffff; padding: 41px 0 31px;}
.cert-wrap .cont03 .step-wrap ul li.arrow { width: 29px; margin: 0 14px 0 16px; background-color: transparent; padding:0; border: none; background:url('https://russeldata.megastudy.net/campus/images/russel/intro/2022/student_cert/cont03_arrow.png') no-repeat center/ 100% auto;}
.cert-wrap .cont03 .step-wrap ul li .desc { color: #848484; font-size:13.5px; text-align:center; }
.cert-wrap .cont03 .step-wrap ul li .before { text-align:center; width:100%;} 
.cert-wrap .cont03 .step-wrap ul li button { border: 0; background-color: transparent; padding:0; margin-top:16px; margin-left: 14px;}
.cert-wrap .cont03 .step-wrap ul li.step01 .before .text { margin-top:29px; margin-bottom:21px; color: #212121; }
.cert-wrap .cont03 .step-wrap ul li.step01 .before a { display:block; margin-bottom:14px; }
.cert-wrap .cont03 .step-wrap ul li.step01 .before button.step01-btn { margin-left:0; }
.cert-wrap .cont03 .step-wrap ul li.step01 .after .ok { width: 100%; text-align:center; margin-top:29px; margin-bottom:21px;}
.cert-wrap .cont03 .step-wrap ul li.step02 .before a { display:block; margin-top:34px; padding-left: 14px;}
.cert-wrap .cont03 .step-wrap ul li.step02 .img { text-align:center; width:100%; margin-top:29px; margin-bottom:21px; }

.cert-wrap .layer-pop {display:none;opacity:0;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;padding:100px 0;box-sizing:border-box;z-index:20;transition:all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1s;}
.cert-wrap .layer-pop.on {display:flex;opacity:1;}
.cert-wrap .layer-pop::before {content:'';position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.7);}
.cert-wrap .layer-pop .in {position:relative;height:100%;}
.cert-wrap .layer-pop .in p {height:100%;overflow-x:hidden;overflow-y:auto;}
.cert-wrap .layer-pop .btn-close {display:block;position:absolute;right:0;top:-50px;width:40px;height:40px;}
.cert-wrap .layer-pop .btn-close::before, .cert-wrap .layer-pop .btn-close::after {content:'';position:absolute;top:19px;width:40px;height:3px;background:#ffffff;}
.cert-wrap .layer-pop .btn-close::before{left:0;transform:rotate(-45deg);}
.cert-wrap .layer-pop .btn-close::after {right:0;transform:rotate(45deg);}

@keyframes icon01 {
    0%{ transform: translateY(10%);}
    25%{ transform: translateY(-10%);}
    50%{ transform: translateY(10%);}
    75%{ transform: translateY(-10%);}
    100%{transform: translateY(0%);}
}
@keyframes icon02 {
    0%{ transform: translateY(-10%);}
    25%{ transform: translateY(10%);}
    50%{ transform: translateY(-10%);}
    75%{ transform: translateY(10%);}
    100%{transform: translateY(0%);}
}