/* layout */
* {font-family: 'Noto Sans KR', sans-serif;}
body{width: 100%;color: #333;background-color: #fff;font-size: 62.5%;overflow: auto;}
a{color: #333;text-decoration: none;}

#wrap{width: 100%;}
#header{width: 100%;}
#header .header-inner{max-width: 1000px;margin: 0 auto;position: relative;z-index: 37;padding: 20px;}
#header .header-inner::after{content: '';display: block;clear: both;}
#container{width: 100%;position: relative;}
#container .content{max-width: 1000px;margin: 0 auto;padding: 0 20px;}
.bg{width: 100%;position: relative;background-image: linear-gradient(-225deg, #B7F8DB -20%, #50A7C2 100%);}
.bg .bg-inner{max-width: 1000px;height: 240px;margin: 0 auto;color: #fff;}
#footer{width: 100%;background-color: #fff;}
#footer > .footer-inner{max-width: 1000px;margin: 0 auto;padding: 0 20px;}

/* header */
#header h1{float: left;background: url(../images/logo.png) no-repeat 0 0;background-size: 100%;width: 170px;height: 20px;margin-top: 10px;transition: all 0.3s 0s ease;}
#header h1 a{display: block;text-indent: -9999px;overflow: hidden;width: 170px;}

/* code 팝업 */
#wrap .popup-code{display: block;width: 350px;background-color: transparent;text-align: center;}
.popup-code .code{color: #fff;text-align: center;width: 350px;height: 300px;margin: 0 auto;position: relative;}
.popup-code .code > form label{font-size: 1.1rem;}
.popup-code .code > form .txt{font-family: 'Montserrat', sans-serif;font-weight: 600;font-size: 0.9rem;text-align: left;margin-bottom: 10px;}

.popup-code .code > form .codeCont{-webkit-appearance: none;-moz-appearance: none;appearance: none;border: 0;outline: 0;background: transparent;display: block;padding: 0;color: #fff;padding-bottom: 5px;
background: repeating-linear-gradient(90deg, rgba(255,255,255,0.2) 0, rgba(255,255,255,0.2) 1.5ch, transparent 0, transparent 3ch) 0 100%/ 18ch 2px no-repeat;font-size: 1.6rem;letter-spacing: 1.75rem;
width: 270px;text-indent: 5px;margin-bottom: 10px;}
.popup-code .code > form .codeCont:focus{outline: none;color: #50A7C2;}
.popup-code .code > form .passCont{-webkit-appearance: none;-moz-appearance: none;appearance: none;border: 0;outline: 0;background: transparent;display: block;color: #fff;font-size: 1.2rem;
border-bottom: 2px solid rgba(255,255,255,0.2);padding: 10px 0 5px 0;width: 233px;float: left;}
.popup-code .code > form .passCont:focus{outline: none;}
.popup-code .code > form .passCont::placeholder{font-size: 0.8rem;}
.popup-code .code > form .img2{padding-top: 20px;}

.popup-code .code > form input:focus{outline: none;}
.popup-code .code > form input::placeholder{color: #d1d1d1;}
.popup-code .code > form .img1{top: 35px;width: 25px;position: absolute;right: 10px;margin-top: 8px;}
.popup-code .code > form .img2{top: 77px;display: none;width: 25px;position: absolute;right: 10px;margin-top: 8px;}
.popup-code .code #code2{display: none;}

/* code 팝업 base */
.popup-base{display: block;z-index: 38;position: absolute;left: 0;top: 0;background-color: rgba(0,0,0,0.8);width: 100%;height: 100%;}
#wrap .popup-code-txt{color: #fff;text-align: center;font-weight: 400;width: 95%;}
#wrap .popup-code-txt span{display: block;font-family: 'Montserrat', sans-serif;font-weight: 400;margin-top: 10px;}
#wrap .popup-code-delete{position: absolute;right: 20px;top: 20px;}
#wrap .popup-code-delete a{display: block;padding: 10px;}
#wrap .popup-code-delete a:hover{opacity: 0.7;}

/* container */
/* content1-wrap 첫번째 화면*/
.content1-wrap{color: #fff;text-shadow: 0 1px 3px rgba(0,0,0,0.4);overflow: hidden;background-image: linear-gradient(-225deg, #B7F8DB -20%, #50A7C2 100%);}
.content1-wrap .content-banner{width: 330px;}
.content1-wrap .content-banner::after{content: '';display: block;clear: both;}
.content1-wrap .content-banner .txt-inner{width: 100%;float: left;animation: txt 1.5s 0s cubic-bezier(0.24,.89,0,1.8) forwards;-ms-animation: txt 1.5s 0s cubic-bezier(0.24,.89,0,1.8) forwards;-webkit-animation: txt 1.5s 0s cubic-bezier(0.24,.89,0,1.8) forwards;opacity: 0;}
.content1-wrap .content-banner .txt-inner h2{font-size: 2.5rem !important;margin-bottom: 20px;}
.content1-wrap .content-banner .txt-inner h2 span{font-family: 'Montserrat', sans-serif;font-weight: 600;font-size: 3.5rem;}
.content1-wrap .content-banner .txt-inner p.txt{font-weight: 100;}
.content1-wrap .content-banner .txt-inner p.start a{display: inline-block;color: #50a7c2;font-family: 'Montserrat', sans-serif;font-weight: 600;border-radius: 50px;background-color: #fff;text-shadow: none;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);padding: 15px 35px;font-size: 1.5rem;transition: all 0.3s 0s ease;}
.content1-wrap .content-banner .txt-inner p.start a:hover{box-shadow: none;text-shadow: none;transform: translateY(5px);}

/* .content1-wrap .visual{animation: txt 1.5s 0.5s cubic-bezier(0.24,.89,0,2) forwards;-ms-animation: txt 1.5s 0.5s cubic-bezier(0.24,.89,0,2) forwards;-webkit-animation: txt 1.5s 0.5s cubic-bezier(0.24,.89,0,2) forwards;opacity: 0;} */

@keyframes txt{
    0%{opacity: 0;transform: translateY(50px);}
    100%{opacity: 1;transform: translateY(0px);}
}
@-ms-keyframes txt{
    0%{opacity: 0;transform: translateY(50px);}
    100%{opacity: 1;transform: translateY(0px);}
}
@-webkit-keyframes txt{
    0%{opacity: 0;transform: translateY(50px);}
    100%{opacity: 1;transform: translateY(0px);}
}

/* video */
.video{position: relative;cursor: pointer;}
.video #myVideo{border-radius: 10px;max-width: 100%;height: auto;}
.video #myBtn{display: block;position: absolute;left: 50%;top: 58%;transform: translate3d(-50%,-50%,0);padding: 10px;box-shadow: 0px 0px 10px rgba(255,255,255,0.5);background: transparent;border-radius: 50%;cursor: pointer;
transition: all 0.3s linear;border: none;opacity: 0;}
.video #myBtn:focus{outline: none;}
.video:hover #myBtn{opacity: 1;}

/* intro */
.intro{max-width: 1000px;margin: 0 auto;}
.intro h2{font-weight: 100;text-align: center;transform: translateY(100px);opacity: 0;transition: all 1.5s 0.2s cubic-bezier(0.82, 0.01, 0.43, 1.01);}
.intro .slider{transform: translateY(100px);opacity: 0;transition: all 1.5s 0.5s cubic-bezier(0.82, 0.01, 0.43, 1.01);}
.intro .slider-nav{width: 100%;text-align: center;cursor: pointer;}
.intro .slider-nav > div img{margin: 0 auto;text-align: center;}
.intro .slider-nav div img{opacity: 0.2;}
.intro .slider-nav div img:hover{opacity: 1;}
.intro .slider-nav .slick-current img{opacity: 1;}

.intro .slider-for img{border-radius: 20px;}
.intro .slider-for .tab-title{font-weight: 100;text-align: center;margin: 20px 0;}

.intro.active h2{transform: translateY(0px);opacity: 1;}
.intro.active .slider{transform: translateY(0px);opacity: 1;}

/* content2-wrap 두번째 화면 */

/* content2-wrap 두번째 화면 active */
.content2-wrap.active .content .txt-inner{transform: translateY(0px);opacity: 1;}
.content2-wrap.active .content .img{transform: translateY(0px);opacity: 1;}

/* content3-wrap 세번째 화면 */

/* content3-wrap 세번째 화면 active */
.content3-wrap.active .content .txt-inner{transform: translateY(0px);opacity: 1;}
.content3-wrap.active .content .img{transform: translateY(0px);opacity: 1;}

/* content2-wrap tab & content3 - wrap tab 두번째 화면과 세번째 화면 탭메뉴 */
.tabMenu .tab-wrap a{display: inline-block;color: #d1d1d1;font-weight: 100;line-height: 3;margin-right: 10px;}
.tabMenu .tab-wrap a:hover{color: #50A7C2;}
.tabMenu .tab-wrap a.active{color: #50A7C2;border-bottom: 1px solid #50A7C2;}
.tabMenu .tab-content{display: none;font-weight: 100;line-height: 1.5;font-size: 1rem;}
.tabMenu .tab-content.active{display: block;}

/* content4-wrap 네번째 화면 */
.content4-wrap{justify-content: center;background-color: #fafafa;}
.content4-wrap .content .txt-inner{text-align: center;transform: translateY(50px);opacity: 0;transition: all 1.5s 0s ease-in-out;}
.content4-wrap .content .txt-inner .txt{font-weight: 100;margin: 50px 0 80px 0;}
.content4-wrap .content .img{width: 350px;margin: 0 auto;transform: translateY(50px);opacity: 0;transition: all 2s 0.5s ease-in-out;position: relative;}

/* content4-wrap 네번째 화면 active */
.content4-wrap.active .content .txt-inner{transform: translateY(0px);opacity: 1;}
.content4-wrap.active .content .img{transform: translateY(0px);opacity: 1;}

/* content5-wrap 요금제 */
.content5-wrap h2{font-weight: 100;text-align: center;
    transform: translateY(100px);opacity: 0;transition: all 1.5s 0.2s cubic-bezier(0.82, 0.01, 0.43, 1.01);}
.content5-wrap .content{
    display: flex;
    /* flex-wrap: wrap; */
    transform: translateY(100px);opacity: 0;transition: all 1.5s 0.5s cubic-bezier(0.82, 0.01, 0.43, 1.01);}
.content5-wrap .content::after{content: '';display: block;clear: both;}
.content5-wrap .content .column{width: 200px;height: 610px;margin: 20px auto;padding: 40px;border: 1px solid rgb(226, 226, 226);box-sizing: border-box;font-size: 0.8rem;text-align: center;}
.content5-wrap .content .column a{font-size: 0.8rem;}
.content5-wrap .content .column .main-title{font-size: 1.4rem;padding-bottom: 20px;}
.content5-wrap .content .column .sub-title{color: rgb(185, 185, 185);}
.content5-wrap .content .column .original{padding-top: 40px;text-decoration: line-through;}
.content5-wrap .content .column .price{padding-bottom: 40px;}
.content5-wrap .content .column .price span{font-size: 1.8rem;}
.content5-wrap .content .column > ul li{line-height: 2.2;}
.content5-wrap .content .column .column-btn{padding-bottom: 20px;}
.content5-wrap .content .column .column-btn a{display: inline-block;width: 100%;color: #fff;font-size: 1rem;border-radius: 50px;padding: 8px 0;cursor: pointer;}
.content5-wrap .content .column .column-btn a:hover{opacity: 0.9;}

.content5-wrap .content .free .main-title{color: rgb(185, 185, 185);}
.content5-wrap .content .free .price{color: rgb(185, 185, 185);}
.content5-wrap .content .free .column-btn a{background-color: rgb(185, 185, 185);}
.content5-wrap .content .free > ul li span{display: inline-block;background: url(../images/tick.png) no-repeat 0 0;width: 10px;height: 10px;background-size: 100%;margin-right: 3px;}

.content5-wrap .content .common .main-title{color: #074270;}
.content5-wrap .content .common .price{color: #074270;}
.content5-wrap .content .common .column-btn a{background-color: #074270;}
.content5-wrap .content .common > ul li span{display: inline-block;background: url(../images/tick2.png) no-repeat 0 0;width: 10px;height: 10px;background-size: 100%;margin-right: 3px;}
.content5-wrap .content .common > ul li:first-of-type{color: #074270;}

.content5-wrap .content .enterprise{position: relative;border: 1px solid #50a7c2;}
.content5-wrap .content .enterprise .recommend{position: absolute;left: 0;top: 0px;color: #fff;font-size: 0.5rem;line-height: 2.3;}
.content5-wrap .content .enterprise .recommend{content: '';display: block;clear: both;background: url(../images/recommend.png) no-repeat 0 0;width: 100px;height: 100px;background-size: 100%;
position: absolute;left: -4px;top: -4px;transform: rotate(-45deg);}
.content5-wrap .content .enterprise .main-title{color: #50A7C2;}
.content5-wrap .content .enterprise .price{color: #50A7C2;}
.content5-wrap .content .enterprise .column-btn a{background-color: #50A7C2;}
.content5-wrap .content .enterprise > ul li span{display: inline-block;background: url(../images/tick3.png) no-repeat 0 0;width: 10px;height: 10px;background-size: 100%;margin-right: 3px;}
.content5-wrap .content .enterprise > ul li:first-of-type{color: #50A7C2;}

.content5-wrap.active h2{transform: translateY(0px);opacity: 1;}
.content5-wrap.active .content{transform: translateY(0px);opacity: 1;}

.slick-prev,.slick-next{position: absolute;display: block;height: 20px;width: 20px;line-height: 0;font-size: 0;cursor: pointer;background: transparent;color: transparent;top: 50%;margin-top: -10px;padding: 0;border: none;outline: none;}
.slick-prev:focus,.slick-next:focus{outline: none;}

/* project delete 팝업 커스텀 */
.swal2-styled:focus{overflow: hidden !important;box-shadow: none !important;}

/* bg 하단 온랩 문구 */
.bg .bg-inner{position: relative;}
.bg .bg-inner > p{text-align: center;text-shadow: 0 1px 3px rgba(0,0,0,0.4);}
.bg .bg-inner .bg-txt{font-family: 'Noto Sans KR', sans-serif;font-weight: 400;position: absolute;left: 50%;top: 50%;transform: translate3d(-50%,-50%,0);}
.bg .bg-inner .bg-txt span{font-family: 'Montserrat', sans-serif;font-weight: 600;}
.bg .bg-inner .bg-start a{display: inline-block;color: #fff;font-family: 'Montserrat', sans-serif;font-weight: 600;border: 2px solid #fff;border-radius: 50px;box-shadow: 0 10px 15px rgba(0,0,0,0.1);padding: 10px 30px;margin-top: 40px;transition: all 0.3s 0s ease;}
.bg .bg-inner .bg-start a:hover{box-shadow: none;text-shadow: none;transform: translateY(5px);}

/* topBtn 위로 이동*/
.topBtn{display: none;font-size: 50px;text-align: center;width: 60px;height: 60px;line-height: 60px;border-radius: 50%;position: fixed;right: 20px;bottom: 20px;cursor: pointer;
    background-image: linear-gradient(-225deg, #B7F8DB -20%, #50A7C2 100%);}

/* footer */
#footer .footer-inner ul li{font-weight: 100;font-size: 0.9rem;padding: 10px 0;}
#footer .footer-inner ul li.first{padding-top: 40px;}
#footer .footer-inner ul li.last{padding-bottom: 100px;}


/* pc */
@media (min-width: 1024px) {
    /* layout */
    #wrap{font-size: 1.2rem;}
    #container .content h2{font-size: 2.5rem;font-weight: 100;}

    /* header - 탑메뉴 */
    #header .topMenu{float: right;color: #fff;display: flex;box-sizing: border-box;}
    #header .topMenu dd{margin-left: 30px;}
    #header .topMenu dd a{display: block;color: #333;font-size: 0.8rem;text-align: center;font-weight: 600;transition: all 0.3s 0s ease;}
    #header .topMenu dd.common a{color: #50a7c2;border: 1px solid #50a7c2;border-radius: 50px;padding: 10px 20px;}
    #header .topMenu dd a:hover{opacity: 0.7;transform: translateY(5px);}
    #header .topMenu dd.self a{padding: 0 !important;background-color: transparent !important;border: none !important;width: 40px;}
    #header .topMenu dd.self img{width: 20px;vertical-align: middle;padding-top: 8px;}
    #header .topMenu dd.join a{color: #fff;background-color: #50a7c2;}
    #header .topMenu dd.first{padding: 10px 0;}

    #header .topMenu dd.qna a,#header .topMenu dd.payment a{border: 1px solid transparent;padding: 10px 0;}

    /* 모바일 메뉴 */
    .button_container{display: none;}
    .overlay{display: none;}

    /* code 팝업 */
    #wrap .popup-code{z-index: 39;position: fixed;left: 50%;top: 60%;transform: translate3d(-50%,-50%,0);}

    /* code 팝업 base */
    #wrap .popup-code-txt{font-size: 2.5rem;position: fixed;left: 50%;top: 20%;transform: translate3d(-50%,-50%,0);}
    #wrap .popup-code-txt span{font-size: 1.5rem;}

    /* container */
    /* content1-wrap 첫번째 화면*/
    .content1-wrap{padding: 150px 0;display: flex;justify-content: center;}
    .content1-wrap .content-banner .txt-inner p.txt{margin-bottom: 55px;}
    .content1-wrap .content-banner .txt-inner p.txt::before{content: '';display: block;width: 50px;height: 50px;background-color: #fff;opacity: 0.5;border-radius: 50%;position: absolute;transform: translate3d(1150px, -100px, 0);}
    .content1-wrap .content-banner .txt-inner h2::before{content: '';display: block;width: 170px;height: 170px;background-color: #fff;opacity: 0.5;border-radius: 50%;position: absolute;transform: translate3d(950px, -100px, 0);}
    .content1-wrap .content-banner .txt-inner h2::after{content: '';display: block;width: 80px;height: 80px;background-color: #fff;opacity: 0.5;border-radius: 50%;position: absolute;transform: translate3d(290px, 80px, 0);}

    /* video */
    .video{width: 670px;height: 290px;}

    /* intro */
    .intro{padding: 100px 20px;}
    .intro h2{font-size: 2.5rem;}
    .intro .slider-nav{margin: 70px 0 30px 0;}
    .intro .slider-nav > div img{width: 30px;}

    .intro .slider-for .tab-title{font-size: 1.8rem;}

    /* scroll down */
    .scrollDown{position: absolute;left: 50%;top: 34%;transform: translateX(-50%);width: 20px;height: 30px;margin-left: -15px;border: 2px solid #fff;opacity: 0.7;border-radius: 50px;box-sizing: border-box;}
    .scrollDown::before{content: '';position: absolute;left: 50%;bottom: 20px;width: 6px;height: 6px;margin-left: -3px;background-color: #fff;opacity: 0.5;border-radius: 100%;box-sizing: border-box;animation: 2s infinite scrollDown;-webkit-animation: 2s infinite scrollDown;-ms-animation: 2s infinite scrollDown;}

    @keyframes scrollDown{
        0%{opacity: 0;}
        40%{opacity: 1;}
        80%{transform: translate(0, 20px);opacity: 0;}
        100%{opacity: 0;}
    }
    @-webkit-keyframes scrollDown{
        0%{opacity: 0;}
        40%{opacity: 1;}
        80%{transform: translate(0, 20px);opacity: 0;}
        100%{opacity: 0;}
    }
    @-ms-keyframes scrollDown{
        0%{opacity: 0;}
        40%{opacity: 1;}
        80%{transform: translate(0, 20px);opacity: 0;}
        100%{opacity: 0;}
    }

    /* content2-wrap 두번째 화면 */
    .content2-wrap{width: 100%;background-color: #fafafa;padding: 200px 0;justify-content: center;}
    .content2-wrap .content{display: flex;justify-content: space-around;}
    .content2-wrap .content .txt-inner{width: 350px;margin: 0 auto;transform: translateY(-30px);opacity: 0;transition: all 2s 0s ease-in-out;}

    .content2-wrap .content .img{display: flex;flex-grow: 1;margin-right: 100px;opacity: 0;transform: translateY(50px);transition: all 2s 0s ease-in-out;}
    .content2-wrap .content .img .web1{text-indent: -9999px;overflow: hidden;background: url(../images/laptop.png) 50% 50% / cover no-repeat;width: 500px;height: 400px;}

    .content2-wrap .content .slide1{position: absolute;left: 25px;top: 29px;width: 447px;height: 280px;overflow: hidden;}
    .content2-wrap .content .slide1 .slide_frame1{position: relative;width: 894px;}
    .content2-wrap .content .slide1 .slide_frame1 > section{float: left;}
    .content2-wrap .content .slide1 .slide_frame1 > section .slide-box1-1{text-indent: -9999px;overflow: hidden;background: url(../images/pic1-1.png) 50% 50% / cover no-repeat;width: 447px;height: 280px;}
    .content2-wrap .content .slide1 .slide_frame1 > section .slide-box1-2{text-indent: -9999px;overflow: hidden;background: url(../images/pic1-2.png) 50% 50% / cover no-repeat;width: 447px;height: 280px;}

    /* content2-wrap 두번째 화면 active */
    .content2-wrap.active .content .txt-inner{transform: translateY(0px);opacity: 1;}
    .content2-wrap.active .content .img{transform: translateY(0px);opacity: 1;}

    /* content3-wrap 세번째 화면 */
    .content3-wrap{width: 100%;background-color: #fff;padding: 200px 0;justify-content: center;}
    .content3-wrap .content{display: flex;justify-content: space-around;}
    .content3-wrap .content .txt-inner{display: flex;flex-direction: column;justify-content: center;flex-grow: 1;margin-right: 100px;width: 350px;transform: translateY(30px);opacity: 0;transition: all 2s 0s ease-in-out;}

    .content3-wrap .content .img{display: flex;flex-grow: 1;width: 450px;height: 300px;box-shadow: 0 15px 30px 0 rgba(0,0,0,0.5);transform: translateY(-50px);opacity: 0;transition: all 2s 0s ease-in-out;}

    .content3-wrap .content .slide2{width: 500px;height: 300px;overflow: hidden;}
    .content3-wrap .content .slide2 .slide_frame2{position: relative;width: 1000px;}
    .content3-wrap .content .slide2 .slide_frame2 > section{float: left;}
    .content3-wrap .content .slide2 .slide_frame2 > section .slide-box2-1{text-indent: -9999px;overflow: hidden;background: url(../images/pic2-1.png) 100% 0% / cover no-repeat;width: 500px;height: 300px;}
    .content3-wrap .content .slide2 .slide_frame2 > section .slide-box2-2{text-indent: -9999px;overflow: hidden;background: url(../images/pic2-2.png) 100% 0% / cover no-repeat;width: 500px;height: 300px;}

    /* content2-wrap tab & content3 - wrap tab 두번째 화면과 세번째 화면 탭메뉴 */
    .tabMenu .tab-wrap{margin: 80px 0 50px 0;}

    /* content4-wrap 네번째 화면 */
    .content4-wrap{padding: 200px 0;}

    /* content5-wrap 요금제 */
    .content5-wrap .content{padding: 70px 20px !important;}
    .content5-wrap h2{font-size: 2.5rem;}

    /* bg 하단 온랩 문구 */
    .bg .side1{width: 200px;height: 200px;border-radius: 50%;background-color: #fff;opacity: 0.5;position: absolute;right: 15%;bottom: -50%;}
    .bg .side1::after{content: '';display: block;width: 80px;height: 80px;border-radius: 50%;background-color: #fff;opacity: 0.5;position: absolute;right: 90%;top: -20%;}
    .bg .side2{width: 50px;height: 50px;border-radius: 50%;background-color: #fff;opacity: 0.5;position: absolute;left: 20%;top: 20%;}

    .bg .bg-inner .bg-txt{font-size: 1.8rem;}
    .bg .bg-inner .bg-txt span{font-size: 2.2rem;}
    .bg .bg-inner .bg-start a{font-size: 1.2rem;}

}

/* tablet */
@media (max-width: 1023px) {
    /* layout */
    #wrap{font-size: 1rem;}
    #container .content h2{font-size: 1.5rem;font-weight: 100;}

    /* header - 탑메뉴 */
    #header .topMenu{display: none;}

    /* 모바일 메뉴 */
    .button_container{z-index: 42;position: fixed;right: 20px;top: 25px;width: 28px;height: 27px;cursor: pointer;transition: opacity .25s ease;}
    .button_container:hover{opacity: .7;}
    .button_container.active .top{transform: translateY(11px) translateX(0) rotate(45deg);background: #fff;}
    .button_container.active .middle{opacity: 0;background: #fff;}
    .button_container.active .bottom{transform: translateY(-11px) translateX(0) rotate(-45deg);background: #fff;}
    .button_container span{position: absolute;left: 0;top: 0;background: #333;width: 100%;height: 5px;border: none;cursor: pointer;border-radius: 30px;transition: all .35s ease;}
    .button_container span:nth-of-type(2){top: 11px;}
    .button_container span:nth-of-type(3){top: 22px;}

    .overlay{opacity: 0;z-index: 41;position: fixed;left: 0;top: 0;width: 100%;height: 0%;background: #50A7C2;visibility: hidden;overflow: hidden;transition: opacity .35s, visibility .35s, height .35s;display: block;}
    .overlay.open{opacity: .9;height: 100%;visibility: visible;}
    .overlay.open li{animation: fadeInRight .5s ease forwards;animation-delay: .35s;}
    .overlay.open li:nth-of-type(2){animation-delay: .4s;}
    .overlay.open li:nth-of-type(3){animation-delay: .45s;}
    .overlay.open li:nth-of-type(4){animation-delay: .50s;}
    .overlay.open li:nth-of-type(5){animation-delay: .55s;}
    .overlay.open li:nth-of-type(6){animation-delay: .60s;}
    .overlay .overlay-menu{position: relative;top: 50%;transform: translateY(-50%);height: 70%;font-family: 'Noto Sans KR', sans-serif;font-weight: 400;font-size: 2rem;text-align: center;}
    .overlay .overlay-menu ul{display: inline-block;position: relative;height: 100%;margin: 0 auto;}
    .overlay .overlay-menu ul li{opacity: 0;display: block;position: relative;height: 25%;height: calc(100% / 5);min-height: 40px;}
    .overlay .overlay-menu ul li a{display: block;position: relative;color: #fff;text-decoration: none;overflow: hidden;}
    .overlay .overlay-menu ul li a:hover:after, .overlay .overlay-menu > ul li a:focus:after, .overlay .overlay-menu > ul li a:after{width: 100%;}
    .overlay .overlay-menu ul li a:after{content: '';position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);width: 0%;height: 3px;background: #fff;transition: .35s;}
    @keyframes fadeInRight{
        0%{
            opacity: 0;
            left: 20%;
        }
        100%{
            opacity: 1;
            left: 0;
        }
    }

    /* code 팝업 */
    #wrap .popup-code{z-index: 39;position: fixed;left: 50%;top: 65%;transform: translate3d(-50%,-50%,0);}

    /* code 팝업 base */
    #wrap .popup-code-txt{font-size: 1.5rem;position: fixed;left: 50%;top: 20%;transform: translate3d(-50%,-50%,0);}
    #wrap .popup-code-txt span{font-size: 1rem;}

    /* container */
    /* content1-wrap 첫번째 화면 */
    .content1-wrap{padding: 100px 20px;display: flex;flex-direction: column;}
    .content1-wrap .content-banner{text-align: center;margin: 0 auto;}
    .content1-wrap .content-banner .txt-inner h2{font-size: 1.5rem !important;}
    .content1-wrap .content-banner .txt-inner h2 span{font-family: 'Montserrat', sans-serif;font-weight: 600;font-size: 3rem;}
    .content1-wrap .content-banner .txt-inner p.txt{margin-bottom: 50px;}
    .content1-wrap .content-banner .txt-inner p.start{margin-bottom: 50px;}

    /* video */
    .video{width: 100%;}

    /* intro */
    .intro{padding: 50px 20px;}
    .intro h2{font-size: 1.5rem;}
    .intro .slider-nav{margin: 40px 0 20px 0;}
    .intro .slider-nav > div img{width: 25px;}

    .intro .slider-for .tab-title{font-size: 1.3rem;}

    /* scroll down */
    .scrollDown{display: none;}

    /* content2-wrap 두번째 화면 */
    .content2-wrap{width: 100%;background-color: #fff;padding: 100px 0;display: flex;}
    .content2-wrap .content h2{padding-top: 70px;}
    .content2-wrap .content .txt-inner{width: 335px;margin: 0 auto;transform: translateY(-30px);opacity: 0;transition: all 2s 0s ease-in-out;}

    .content2-wrap .content .img{display: flex;flex-grow: 1;opacity: 0;transform: translateY(50px);transition: all 2s 0s ease-in-out;}
    .content2-wrap .content .img .web1{text-indent: -9999px;overflow: hidden;background: url(../images/laptop.png) 50% 50% / cover no-repeat;width: 335px;height: 260px;margin: 0 auto;}

    .content2-wrap .content .slide1{position: absolute;left: 19px;top: 17px;width: 295px;height: 190px;overflow: hidden;}
    .content2-wrap .content .slide1 .slide_frame1{position: relative;width: 590px;}
    .content2-wrap .content .slide1 .slide_frame1 > section{float: left;}
    .content2-wrap .content .slide1 .slide_frame1 > section .slide-box1-1{text-indent: -9999px;overflow: hidden;background: url(../images/pic1-1.png) 50% 50% / cover no-repeat;width: 295px;height: 190px;}
    .content2-wrap .content .slide1 .slide_frame1 > section .slide-box1-2{text-indent: -9999px;overflow: hidden;background: url(../images/pic1-2.png) 50% 50% / cover no-repeat;width: 295px;height: 190px;}

    /* content3-wrap 세번째 화면 */
    .content3-wrap{width: 100%;background-color: #fafafa;padding: 100px 0;justify-content: center;}
    .content3-wrap .content .txt-inner{width: 335px;margin: 0 auto;transform: translateY(30px);opacity: 0;transition: all 2s 0s ease-in-out;}

    .content3-wrap .content .img{display: flex;flex-grow: 1;width: 335px;height: 200px;box-shadow: 0 15px 30px 0 rgba(0,0,0,0.5);margin: 0 auto;transform: translateY(-50px);opacity: 0;transition: all 2s 0s ease-in-out;}

    .content3-wrap .content .slide2{width: 335px;height: 200px;overflow: hidden;}
    .content3-wrap .content .slide2 .slide_frame2{position: relative;width: 670px;}
    .content3-wrap .content .slide2 .slide_frame2 > section{float: left;}
    .content3-wrap .content .slide2 .slide_frame2 > section .slide-box2-1{text-indent: -9999px;overflow: hidden;background: url(../images/pic2-1.png) 100% 0% / cover no-repeat;width: 335px;height: 200px;}
    .content3-wrap .content .slide2 .slide_frame2 > section .slide-box2-2{text-indent: -9999px;overflow: hidden;background: url(../images/pic2-2.png) 100% 0% / cover no-repeat;width: 335px;height: 200px;}

    .tabMenu2{margin-bottom: 70px;}

    /* content2-wrap tab & content3 - wrap tab 두번째 화면과 세번째 화면 탭메뉴 */
    .tabMenu .tab-wrap{margin: 40px 0 30px 0;}

    /* content4-wrap 네번째 화면 */
    .content4-wrap{padding: 100px 0;}

    /* content5-wrap 요금제 */
    .content5-wrap .content{padding: 40px 20px !important;}
    .content5-wrap h2{font-size: 1.5rem;}

    /* bg 하단 온랩 문구 */
    .bg .side1{display: none;}
    .bg .side2{display: none;}

    .bg .bg-inner .bg-txt{font-size: 1.5rem;}
    .bg .bg-inner .bg-txt span{font-size: 1.8rem;}
    .bg .bg-inner .bg-start a{font-size: 1rem;}

}