@charset "UTF-8";
/*-------------------------------------------------
title       : 메인
Author      : jiwon
Create date : 2021-02-04
-------------------------------------------------*/

#header{transform: translateY(-100%); transition: .3s}

#header.start{ transform: translateY(0)}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .step_point{display: none}
}

/* section1 상단 비주얼 및 로그인 영역 */

.section1 { overflow: hidden; position: relative; margin-top: 2rem}

.section1 .visual_wrap { position: absolute; left: 0; top: 0; width: calc(100% - 36rem); height: 100%;  border-radius: 2.4rem; overflow: hidden; }

.section1 .visual_wrap .item { width: 100%; min-height: 47rem; position: relative; background-size: cover; border-radius: 2.4rem; overflow: hidden }

.section1 .visual_wrap .item img { width: 100%; height: 100%; min-height: 47rem}

.section1 .visual_wrap .item .txt_box { position: absolute; left: 5rem; top:45%; transform: translateY(-50%); }

.section1 .visual_wrap .item .txt_box .tit{ font-size: 5.4rem; font-weight: 900; color:#fff; line-height: 5.6rem; }

.section1 .visual_wrap .item .txt_box .s-tit{ font-size: 2.3rem; font-weight: 500; color: #fff; display: block; padding-bottom: 2.5rem; position: relative; }

.section1 .visual_wrap .item .txt_box .s-tit:before{content: ''; position: absolute; left: 0; bottom: 0; width: 3rem; height: 1px; background: #fff; opacity: .7}

.section1 .visual_wrap .item .txt_box .txt{ font-size: 1.8rem; color: #fff; margin-top: 3rem  }

.section1 .controls { position: absolute; left: 0; bottom: 0; background: #fff; border-top-right-radius: 2.4rem; padding: 1.5rem 3rem; }

.section1 .controls > * { display: inline-block; padding: 0 .5rem; color:#222222; }

.section1 .controls .pause img{ margin-top: -5px; }

.section1 .slick-counter span { position: relative; display: inline-block; width:10px; }

.section1 .slick-counter span + span { margin-left: 1.5rem; }

.section1 .slick-counter span + span:before {content: ''; position: absolute; left: -1.35rem; top:50%; transform: translateY(-50%) rotate(-65deg); width:  11px; height: 1px; background: #222222; display: block;}

.section1 .slick-counter .current { color: #4670F4; font-weight: 700}

.section1 .login_wrap { float: right; width: 30rem; }

.section1 .input_login_box .inputID, .section1 .input_login_box .inputPW { border: none; display: block; width: 100%; border-bottom: 1px solid #222222; padding: 1.3rem;}

.section1 .input_login_box .inputPW { margin-top: .75rem}

.section1 .input_login_box .btn_login { display: block; width: 100%; padding: 1.5rem 1rem; border-radius: 2.5rem; border:1px solid #D1D1D1; margin-top: 2rem; font-size:1.6rem; color: #767676; font-weight: 400; position: relative; overflow: hidden; z-index: 1; transition: .4s;}

.section1 .input_login_box .btn_login:after, .section1 .input_login_box .btn_login:before { background: transparent linear-gradient(118deg, #28A2DA 0%, #1C46B9 100%) 0% 0% no-repeat padding-box; content: ' '; display: block; height: 100%; position: absolute; transform: skewX(-45deg); -webkit-transform: skewX(-45deg); width: 0; z-index: -1; -webkit-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; opacity: 0; }

.section1 .input_login_box .btn_login:after { bottom: 0; right: -20%; }

.section1 .input_login_box .btn_login:before { top: 0; left: -20%; }

.section1 .input_login_box .btn_login:hover, .section1 .input_login_box .btn_login:focus { box-shadow: inset 0 1px 2px rgba(0,0,0,.2); color: #fff; font-weight: 700; border:1px solid transparent; }

.section1 .input_login_box .btn_login:hover:after, .section1 .input_login_box .btn_login:hover:before,
.section1 .input_login_box .btn_login:focus:after, .section1 .input_login_box .btn_login:focus:before{ width: 150%; opacity: .8;}

.section1 .login_sugcess_box{padding: 5rem 3rem; background:#E7EFF8; border-radius: 1.5rem; }

.section1 .login_sugcess_box .profile{padding-left: 8rem; padding-bottom: 3rem; margin-bottom:2rem; border-bottom: 1px solid #D9DCEF; position: relative}

.section1 .login_sugcess_box .profile .icon{width: 6.4rem; height: 6.4rem; border-radius: 50%; background: #434962; color:#fff; font-size: 3.3rem; text-align: center; padding-top: .8rem; position: absolute; left: 0; top:35%; transform: translateY(-50%);}

.section1 .login_sugcess_box .btn_login{background: #fff; border: 1px solid transparent}

.section1 .login_sugcess_box .tit{font-size: 2rem; color: #555555; line-height: 3rem}

.section1 .login_sugcess_box .tit strong{ font-weight:700; color: #000;}

.section1 .find_box { overflow: hidden; margin: 1.5rem 0 2.5rem; position: relative; }

.section1 .find_box a{ display: inline-block; padding: 0 1rem; font-size: 1.4rem; font-weight: 400; color: #555555; position: relative; transition: .3s;}

.section1 .find_box a:after{ content: '\e93f'; position: absolute; right: -8px; top: 3px; width: 1.4rem; height: 1.4rem; background: #4D59C7; border-radius: 50%; color: #fff; font-family: xeicon; font-size: .8rem; text-align: center; line-height: 1.4rem; z-index:1; opacity: 0; transition: .3s;}

.section1 .find_box a:hover, .section1 .find_box a:focus{ transform: translateX(-10px)}

.section1 .find_box a:hover:after, .section1 .find_box a:focus:after{opacity: 1}

.section1 .find_box .btn_join { float: left; }

.section1 .find_box ul { float: right; line-height: 2rem; }

.section1 .find_box ul li { display: inline-block; }

.section1 .find_box li + li a:before { content: ''; width: 1px; height: 10px; position: absolute; left: -.25rem; top: 50%; transform: translateY(-50%); background: #D0D0D0; transition: .2s;}

.section1 .find_box li + li a:hover:before, .section1 .find_box li + li a:focus:before  { left: .3rem; }

.section1 .sns_login_box { padding: 2rem 1rem; background: #E7EFF8; border-radius: 1.5rem; text-align: center }

.section1 .sns_login_box > * {display: inline-block;}

.section1 .sns_login_box h3 { font-size: 1.6rem; font-weight: 600; color: #222222; margin-right: 1rem; }

.section1 .sns_login_box li { display: inline-block; margin-left: .5rem; }

.section1 .sns_login_box li a {display: block; box-shadow: 0 0 1px transparent;}
.section1 .sns_login_box li a {
    display: inline-block;
    position: relative;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
    box-shadow: 0 0 1px transparent;
}
.section1 .sns_login_box li a:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
    /* W3C */
    transition-duration: 0.3s;
    transition-property: transform opacity;
}
.section1 .sns_login_box li a:hover {
    transform: translateY(-6px);
    animation-name: hover;
    animation-duration: 1.5s;
    animation-delay: 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.section1 .sns_login_box li a:hover:before {
    opacity: .4;
    transform: translateY(6px);
    animation-name: hover-shadow;
    animation-duration: 1.5s;
    animation-delay: .3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.section1 .sns_login_box li a:hover { transform: translateY(-6px);
    animation-name: hover;
    animation-duration: 1.5s;
    animation-delay: 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;}
/*@keyframes hover {
    50% {
        transform: translateY(-3px);
    }
    100% {
        transform: translateY(-6px);
    }
}*/
.section1 .mentor_box { margin-top: 2rem; overflow: hidden; }

.section1 .mentor_box a { display: block; width: calc(50% - 1rem); float: left; text-align: center; padding: 3rem 1rem; border-radius: 2rem; color: #fff; font-size: 1.7rem; font-weight: 600; max-height: 13rem; position: relative; overflow: hidden; transition: .2s;}

.section1 .mentor_box a:nth-of-type(1){ background: #1BB1B1; }

.section1 .mentor_box a:nth-of-type(2){ background: #4D59C7; margin-left: 2rem; }

.section1 .mentor_box a span { display: block; margin-top: 1rem; z-index: 1; position: relative}

.section1 .mentor_box a img{ position: relative; z-index: 1; transition: .2s}

.section1 .mentor_box a:hover {
    background-color: #3a4fba;
    box-shadow: none;

}

.section1 .mentor_box a:hover img{
    transform: scale(1.05);
    color: white;
}

.section1 .mentor_box a:before {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    background: #596dd4;
    transform: rotate(45deg);
    left: -110%;
    top: 90%;
    transform-origin: 50% 50%;
    border-radius: 50%;
    opacity: 0;

}

.section1 .mentor_box a:hover:before {
    transform: scale(1.2);
    box-shadow: inset 0px 10px 46px -18px #000;
    opacity: .9;
    animation: sweet 0.7s 1;
    top: -10%;
    left: -10%;
}

@keyframes sweet {
    0% {
        left: -110%;
        top: 90%;
    }
    50% {
        left: 10%;
        top: -30%;
    }
    100% {
        top: -10%;
        left: -10%;
    }
}
.section1 .mentor_box a:nth-of-type(1):hover{background: #139B9B}

.section1 .mentor_box a:nth-of-type(1):before{background:#40BFBF }

.section1 .mentor_box a:nth-of-type(1):hover:before{box-shadow: inset 0px 10px 46px -18px #165656;}
/*
.section1 .mentor_box a:before{ content: ''; position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); width: 0%; height: 0%; background: #000; overflow: hidden; visibility: hidden; opacity: .3; transition: all .4s ease-in-out; border-radius: 0;}

.section1 .mentor_box a:hover:before{ width: 45%; height: 45%; opacity: 1; visibility: visible; overflow: visible; z-index: 0; border-radius: 50%}

.section1 .mentor_box a:nth-of-type(1):before { background:#11516A ; opacity: .6}

.section1 .mentor_box a:nth-of-type(2):before { background:#0C1CB8 ;}*/

/* 상단 비주얼 및 로그인 영역 끝 */

/* section2 */

.section2 { margin-top: 7rem; position: relative; padding: 7rem 0 12rem; }

.section2:before{content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 100vw; height: 100%; background: transparent linear-gradient(106deg, #EAF8FF 0%, #DCF4FF 100%) 0% 0% no-repeat padding-box; z-index: -1;}

.section2 .tit{ font-size: 4.9rem; font-weight: 900; color: #000000; line-height: 7rem; }

.section2 .tit .point{ color: #1D53BE; }

.section2 .txt { font-size: 1.8rem; font-weight: 400; color:#777777; line-height: 4rem }

.section2 .btn_manual { padding: 1.25rem 3.5rem; width: 18rem;  border:2px solid #4670F4; font-size: 1.6rem; font-weight:700; color: #4670F4; border-radius: 3.2rem; position: absolute; right: 0; top: 2rem; overflow: hidden; }

.section2 .btn_manual:hover{color:#000; font-weight: 700; }

.section2 .btn_manual:before{ content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 0; height: 0; background: #fff; transition: .5s; z-index: -1; border-radius: 50% }

.section2 .btn_manual:hover:before{width: 200px; height: 200px; }

/*.section2 .btn_manual:after{content: '\e90b'; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-family: xeicon }*/

.section2 .btn_manual{transition: .35s;}

.section2 .btn_manual:hover span{ transform: translateX(-50px)}

.section2 .step_wrap { position: relative; height: 250px; margin-top: 5rem }

.section2 .step_line_bg1, .section2 .step_line_bg2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

.section2 .step_line_bg2{z-index: 2}

.step_line{stroke:#1D53BE;stroke-miterlimit:10;  stroke-dasharray: 2047; stroke-dashoffset: 2047; /*animation: dash 7s linear ; animation-fill-mode: forwards;*/ }

.step_line:before{content: ''; position: absolute; left: 0; top: 0; width: 10px; height: 10px; background: red}

@keyframes dash {
    from {
        stroke-dashoffset: -2047;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.point_wrap{position: absolute; width: 1935px; height: 120px; left: 50%; top: 50%; transform: translate(-50%, -50%)}

.step_point{position: absolute; offset: path('M1930.257,96.616c-90.594-49.142-201.068-62.149-301.065-35.445-31.217,8.336-61.167,20.278-91.915,29.339s-62.88,15.257-94.558,11.789c-39.388-4.312-75.53-23.187-110.843-41.644s-72.165-37.229-112.525-40.714c-30.2-2.607-60.535,3.625-88.83,13.759s-54.839,24.1-81.38,37.649-53.332,26.809-81.762,35.475-58.792,12.606-87.887,7.258c-34.75-6.388-65.71-25.514-94.9-45.612s-58.13-41.856-91.929-54.31C668.071,5.1,641.782,1.383,615.5,1.665A278.87,278.87,0,0,0,579.814,4.4c-37.71,5.29-73.989,17.491-108.986,31.815-69.99,28.645-137.19,66.349-211.608,77.86C167.1,128.325,68.8,98.619,1.12,36.076') auto; /*animation: moveto 7s linear ; animation-direction: reverse; animation-fill-mode: forwards; */}

@keyframes moveto{
    from{
        offset-distance: 0%
    }
    to{
        offset-distance: 100%;
    }
}

.step_icon li { position: absolute; transform: translate(-50%, -50%); z-index: 2; text-align: center; font-size: 2.2rem; font-weight: 700; color: #333333; }

.step_icon li:nth-of-type(1) { left: 10%; top:55%; }
.step_icon li:nth-of-type(2) { left: 30%; top:45%; }
.step_icon li:nth-of-type(3) { left: 50%; top:85%; }
.step_icon li:nth-of-type(4) { left: 70%; top:50%; }
.step_icon li:nth-of-type(5) { left: 90%; top:80%; }

.step_icon li > * { display: block; text-align: center; }

.step_icon li span { width: 10rem; height: 10rem; background: #fff; display: inline-block; box-shadow: 4px 5px 24px #4676AF29; border-radius: 2rem; position: relative; margin-bottom: 1rem; border:3px solid transparent; /*animation: changeto .75s; animation-fill-mode: forwards;*/ }

.step_icon li span img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.step_icon li:nth-of-type(1) span img{ left: 58%; top: 55%; }
.step_icon li:nth-of-type(2) span img{ left: 60%; top: 55%; }
.step_icon li:nth-of-type(4) span img{ top: 55%;}
.step_icon li:nth-of-type(5) span img{ top: 55%; }

.step_icon li em { font-size: 1.6rem; font-weight: 700; color: #496BF3; }

@keyframes changeto{
    0%{
        background: #fff;
    }
    100%{
        background: #4670F4;
    }
}



.step_icon li span:before{content: ''; position: absolute; z-index:-1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 10rem; height: 10rem; border:1px solid #496BF3; border-radius: 2rem; opacity: 0; /*animation: ping .9s linear ; animation-iteration-count: 2; */}



@keyframes ping {
    0%{width: 10rem;  height: 10rem; opacity: .7;}
    100%{width: 12rem;  height: 12rem; opacity: 0;}
}

.section2 .step_wrap.aos-animate .step_line { animation: dash 7s linear ; animation-fill-mode: forwards;}

.section2 .step_wrap.aos-animate .step_point { animation: moveto 7s linear ; animation-direction: reverse; animation-fill-mode: forwards;}

.section2 .step_wrap.aos-animate .step_icon li span:before{ animation: ping .9s linear ; animation-iteration-count: 2; }

.section2 .step_wrap.aos-animate .step_icon li span { animation: changeto .75s; animation-fill-mode: forwards; }

.section2 .step_wrap.aos-animate .step_icon li:nth-of-type(1) span{ animation-delay: 1.5s; }
.section2 .step_wrap.aos-animate .step_icon li:nth-of-type(2) span{ animation-delay: 2.5s; }
.section2 .step_wrap.aos-animate .step_icon li:nth-of-type(3) span{ animation-delay: 3.5s; }
.section2 .step_wrap.aos-animate .step_icon li:nth-of-type(4) span{ animation-delay: 4.5s; }
.section2 .step_wrap.aos-animate .step_icon li:nth-of-type(5) span{ animation-delay: 5.5s; }

.section2 .step_wrap.aos-animate .step_icon li:nth-of-type(1) span:before{ animation-delay: 1.7s; }
.section2 .step_wrap.aos-animate .step_icon li:nth-of-type(2) span:before{ animation-delay: 2.7s; }
.section2 .step_wrap.aos-animate .step_icon li:nth-of-type(3) span:before{ animation-delay: 3.7s; }
.section2 .step_wrap.aos-animate .step_icon li:nth-of-type(4) span:before{ animation-delay: 4.7s; }
.section2 .step_wrap.aos-animate .step_icon li:nth-of-type(5) span:before{ animation-delay: 5.7s; animation-iteration-count: 1;}

/* section3 */

.section3 { padding: 7rem 0 10rem; position: relative; }

.section3:before{content: ''; position: absolute; left: 14rem; top: 9.5rem; width: calc(100% - 25rem); height: 1px; background: #DEDEDE; }

.section3 .tit { font-size: 3.2rem; font-weight: 700; color: #000000; display: inline-block; position: relative; }

.section3 .tit:before { content: ''; position: absolute; right: -8px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: #496BF3; }

.section3 .f_right { float: right; }

.section3 .btn_more{ display: inline-block; width: 3.5rem; height: 3.5rem; background: #fff; box-shadow: 0px 3px 6px #00000029; text-align: center; padding-top: .75rem; margin-top: .75rem; border-radius: 50%; transition: .5s;}

.section3 .btn_more i{transition: .5s;}

.section3 .btn_more:hover{ transform: scale(1.1); box-shadow: 0px 3px 6px rgba(0,0,0,0.3); }

.section3 .btn_more:hover i{transform: rotate(180deg); font-weight: 900}

.section3 .notice_slide{margin-left: -2rem; margin-top: 2rem;}

.section3 .notice_slide .item { padding-left: 2rem;  padding-bottom: 2rem}

.section3 .notice_slide .item .inner{display:block; padding: 4.25rem 2.5rem; border-radius: 2rem; overflow: hidden; transition: .6s; }

.section3 .notice_slide .item .category{display: inline-block; padding: .15rem 1.25rem; border-radius: 1.6rem; color: #8E8E8E; border:1px solid #8E8E8E; transition:.2s; }

.section3 .notice_slide .item .title{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 5.8rem; font-size: 2.1rem; font-weight: 700; color:#222; margin: 2rem 0; line-height: 2.9rem; transition: .2s; background-position: bottom; white-space: normal; overflow: hidden; text-overflow: ellipsis; }

.section3 .notice_slide .item .txt{font-size: 1.6rem; font-weight: 400; color: #777777; line-height: 2.7rem; margin-bottom: 2.5rem; transition: .4s; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; height: 8.1rem; overflow: hidden; text-overflow: ellipsis; white-space: normal;}

.section3 .notice_slide .item .date{ display: block; font-size: 1.5rem; font-weight: 700; color:#333; padding-top: 1.5rem; border-top:1px solid #DEDEDE; transition: .4s; }

.section3 .notice_slide .item .inner:hover, .section3 .notice_slide .item .inner:focus{  box-shadow: 4px 5px 24px #4676AF29; }

.section3 .notice_slide .item.type1 .inner:hover, .section3 .notice_slide .item.type1 .inner:focus{ background: url('../img/main/bg_noticeSlide1.png'); background-size: cover; background-position: center; background-repeat: no-repeat;}

.section3 .notice_slide .item.type2 .inner:hover, .section3 .notice_slide .item.type2 .inner:focus{ background: url('../img/main/bg_noticeSlide2.png'); background-size: cover; background-position: center; background-repeat: no-repeat;}

.section3 .notice_slide .item.type3 .inner:hover, .section3 .notice_slide .item.type3 .inner:focus{ background: url('../img/main/bg_noticeSlide3.png'); background-size: cover; background-position: center; background-repeat: no-repeat;}

.section3 .notice_slide .item.type4 .inner:hover, .section3 .notice_slide .item.type4 .inner:focus{ background: url('../img/main/bg_noticeSlide4.png'); background-size: cover; background-position: center; background-repeat: no-repeat;}

.section3 .notice_slide .item .inner:hover .category, .section3 .notice_slide .item .inner:focus .category{ background: #1BB1B1; color:#fff; border:1px solid transparent; }

.section3 .notice_slide .item .inner:hover .title, .section3 .notice_slide .item .inner:focus .title {color:#fff;}

.section3 .notice_slide .item .inner:hover .txt, .section3 .notice_slide .item .inner:focus .txt {color:#fff;}

.section3 .notice_slide .item .inner:hover .date, .section3 .notice_slide .item .inner:focus .date {opacity: .5; color:#fff;}

.section3 .notice_slide .slick-arrow { display: inline-block; width: 4rem; height: 5rem; font-size: 0; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; }

.section3 .notice_slide .slick-prev { left:-3rem; }

.section3 .notice_slide .slick-next { right: -5rem; }

.section3 .notice_slide .slick-arrow:before { font-family: 'xeicon'; color: #DADADA; font-size: 4rem; transition: .5s }

.section3 .notice_slide .slick-arrow:hover:before, .section3 .notice_slide .slick-arrow:focus:before{ color:#000; }

.section3 .notice_slide .slick-prev:before { content:'\e93d';}

.section3 .notice_slide .slick-next:before { content:'\e940';}

.section3 .slick-counter{display: inline-block; margin-right: 2rem}

.section3 .slick-counter span { position: relative; display: inline-block; width:10px; }

.section3 .slick-counter span + span { margin-left: 1.5rem; }

.section3 .slick-counter span + span:before {content: ''; position: absolute; left: -1.35rem; top:50%; transform: translateY(-50%) rotate(-65deg); width:  11px; height: 1px; background: #222222; display: block;}

.section3 .slick-counter .current { font-weight: 700}

/* section4 */

.section4 { padding: 7rem 0 8rem; position: relative; }

.section4:before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 100vw; height: 100%; background:url('../img/main/bg_banner_sect.png') no-repeat center/cover; z-index: -1}

.section4 .title_wrap{position: relative}

.section4 .title{font-size: 3.2rem; color:#fff; font-weight: 300; line-height: 4.5rem}

.section4 .title strong{ font-weight: 700; display: block;}

.section4 .controls{position: absolute; right: 0; top: 50%; transform: translateY(-50%);}

.section4 .controls button{ width: 4.2rem; height: 4.2rem; border-radius: 50%; border: 1px solid #fff;opacity: .5; text-align: center; line-height: 4.2rem; font-size: 2.4rem; transition: .2s;}

.section4 .controls button + button{margin-left: 1rem}

.section4 .controls button:hover, .section4 .controls button:focus, .section4 .controls button:active{ opacity: 1}

.section4 .banner_slide{margin-left: -2rem; margin-top: 3rem}

.section4 .banner_slide .item{padding-left: 2rem;  }

.section4 .banner_slide .item .banner{ display: block; background: #fff; min-height: 15rem; border-radius: 1rem; position: relative; overflow: hidden}

.section4 .banner_slide .item .banner + .banner { margin-top: 2rem}

.section4 .banner_slide .item .banner img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)}

@media (max-width: 900px) {
    #gnb1{display: none}

    .section1 .visual_wrap{position: static; width: 100%;}

    .section1 .login_wrap{ float: none; width: 100%;}

	.section1 .login_sugcess_box {margin-top: 2rem}

    .section1 .visual_wrap .item{min-height: inherit}

    .step_icon li:nth-of-type(2){top: 60%}
	
}

@media (max-width: 768px) {
    .section1 .visual_wrap .item img{min-height: inherit;}

    .section2{text-align: center}

    .section2 .tit{font-size: 3.5rem; line-height: 4rem; }

    .section2 .txt{display: block; margin-bottom: 3rem; line-height: 3rem; word-break: keep-all}

    .section2 .btn_manual{ position: static; }

    .section2 .step_wrap{height: inherit}

    .step_line_bg1 , .step_line_bg2 , .point_wrap{display: none}

    .step_icon{overflow: hidden; text-align: center}

    .step_icon li{position: static; transform: none; width: 20%; float: left; font-size: 1.8rem}

    .step_icon li span { width: 8rem; height: 8rem}

    .section4 .title{font-size: 2.4rem}


}

@media (max-width: 500px) {
    /*.step_icon{width: 200px; margin: auto; }

    .step_icon li{width: 100%; padding-left: 10rem; position: relative; height: 10rem; float: none; left: inherit !important; top: inherit !important; text-align: left}

    .step_icon li span{ position: absolute; left: 1rem; top: 0;}

    .step_icon li em{ text-align: left; padding-top: 10px}

    .step_icon li span img{ max-width: 80%}

    .step_icon li span:before{display: none !important;}*/

    .step_icon li{width: 33.3333%; margin: 1rem 0;}

    .step_icon li:nth-of-type(1), .step_icon li:nth-of-type(2){width: 40%; margin: 1rem 5%}

    .section3{padding: 7rem 0 5rem;}

    .section4 .banner_slide .item .banner{min-height: 10rem}

    .section4 .banner_slide .item .banner img{max-width: 80%}

    .section4 .controls{ top: 0; transform: none;}

}