@charset "utf-8";
@import url("./fonts.css");
@import url("./reset.css");
@import url("./common.css");
@import url("./jquery.fullpage.css");

body{min-width: 320px}
/* section0 */

#section0 {background: url("../images/bg_section_main.png") no-repeat center top;background-size: 100% 100%}
/*
#section0 .wrapper{min-height:920px;justify-content: center;}
*/
#section0 .wrapper{justify-content: center;}
#section0 .main-text{position:relative;margin:0 auto;z-index: 10}
#section0 div.visual{position:absolute;top: 44%;display: flex;justify-content: space-between;width:78%;z-index:100}
#section0 div.visual a:hover {background-color: #9e5aff;transition: background-color 0.5s ease-in-out;color:#fff}
#section0 div.visual a:hover i {background: url("../images/icon_arrow_over.png") no-repeat right center;background-size: 20px 6px;margin-left:10px}
#section0 div.visual a{display: block;padding:12px 20px;background: #fff;border-radius: 9999px;color: #450678;font-size: 13px;font-weight: 700;text-decoration: none;}
#section0 div.visual a i{display: inline-block;width:20px;height:6px;background: url("../images/icon_arrow.png") no-repeat right center;background-size: 20px 6px;margin-left:10px}
#section0 div .gif{position:relative;width: 40%;padding-bottom: 50px;background: url("../images/bg_mainphone_shadow.png") no-repeat center bottom;background-size: 100%}
#section0 div .gif img{width: 100%;max-width: 100%}
#section0 div .gif .keypad {
    position: absolute;
    bottom:310px;
    width:100%;
    height:122px;
    background:url("../images/img_phone_cover.png") no-repeat;
    background-size:100%;
    text-align: center;
    animation-name: keypad;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

#section0 div .gif .keypad > .test1 {
    position: relative;
    left:20px;
    display:inline-block;
    width:71px;
    height:19px;
    background:url("../images/img_phone_openbtn.png") no-repeat;
    /* animation-name: keypadBtnOpen;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    transition-timing-function: ease-out;
    animation-delay: 3s; */

}

#section0 div .gif .keypad > .test2 {
    position: relative;
    left:60px;
    display:inline-block;
    width:40px;
    height:12px;
    background:url("../images/img_phone_denybtn.png") no-repeat;
}

@keyframes keypad {
    0% {
        height:122px
    }
    100% {
        transition: height 2s;
        height:0;
    }
}

@keyframes keypadBtnOpen {
    100% {
        background:url("../images/img_phone_closebtn.png") no-repeat;
    }
}

#section0 .main-text img {width:100%; max-width:100%}
.banner{display: none}

/* section1 */
/* v링고소식 vNews-type2 오픈시 주석해제
#section1{background-color: #fff}
*/
#section1{background:url("../images/section1_bg.png") no-repeat center 0;background-size:cover;}

#section1:after {display:none}
#section1 .wrapper{min-height: 0;text-align: center;}
#section1 .line-wrap{overflow: hidden;margin:0 0 80px;}
#section1 .line-wrap .img{max-width: 150px;margin:0 auto 15px}
#section1 .line-wrap .img img{width: 100%;max-width: 100%}
#section1 ul {white-space: nowrap;overflow-x: auto;overflow-y:hidden;padding: 0 0 0 30px}
#section1 ul li{display:inline-block;width:36%;min-width: 254px;height: 358px;border-radius: 16px;margin-right: 8%;overflow: hidden}
#section1 ul li a{display: block;height:100%;background: #9165fb;border:8px solid #9165fb;text-align: center;padding: 25px 0 45px;box-sizing: border-box}
#section1 ul li a .title{margin-bottom: 20px}
#section1 ul li a .title strong{display:inline-block;padding-bottom: 10px;border-bottom: 1px solid #fff;font-size: 21px;color: #fff;}
#section1 ul li a .small-contents{color: #fff;font-weight: 400;font-size: 15px;line-height: 21px}
#section1 ul li a.center{background-color: #fff;border:8px solid #9165fb;border-radius: 16px}
#section1 ul li a.center .title strong{color: #444444;border-color: #444444}
#section1 ul li a.center .small-contents{color: #282828}
#section1 ul li:first-child a {background: #9165fb url("../images/img_cnt_logo.png") no-repeat;background-position:center bottom 3%}
#section1 ul li:last-child a {background-color: #6d8af4;border:8px solid #6d8af4;}
#section1 .swiper .swiper-slide img{width: 100%;max-width: 100%}
#section1 .swiper .swiper-slide{margin-top: 12px;}
#section1 .swiper .swiper-slide .btn-play{position: absolute;left: 0;top:0;width: 100%;height: 100%;background-image: url("../images/btn_play_common.png");background-repeat:  no-repeat;background-position:  center center;background-size: 30px 30px;text-indent: -9999px;z-index: 100}
#section1 .swiper .swiper-slide .active + .btn-play{background-image: url("../images/stop02.png")}
#section1:after{content:'';position: absolute;top: 50%;height: 50%;width: 100%;background-color: #d2d6fb;z-index: 10}
#section1-video{border:10px solid #d2d6fb}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{display: none}

.popupMobile {display:none}

/* section2 */
#section2{background: url("../images/bg_section2.png") no-repeat center top;background-size: 100% 100%}
#section2 .wrapper{padding: 35px 30px 30px}
#section2 .txt1{font-size: 14px;color: #fff}
#section2 .txt2{margin-top: 25px}
#section2 .txt2 strong, #section2 .txt2 strong em{font-size: 34px;color: #fff;font-weight: 700}
#section2 .txt2 strong em{color: #86ecfb}
#section2 .txt2 span{display: inline-block;font-size: 14px;color: #fff;padding: 6px 0;border-top: 1px solid #fff;border-bottom: 1px solid #fff;margin-top: 30px;white-space: nowrap}
.t-box{position:relative;background-color: rgba(0,0,0,0.3);margin-top: 20px;padding:10px 20px 10px 80px;    display: flex;align-items: center;}
.t-box em{display: inline-block;position: absolute;left:20px;top:13px;font-size: 10px;font-weight: 700;color: #86ecfb;border-right: 1px solid #fff;padding-right: 30px;margin-right: 30px}
.t-box span{display: inline-block;font-size: 10px;color: #fff;line-height: 16px}
.b-list ul li{margin-top: 70px}
.b-list ul li span{display:inline-block;color: #fff;font-size:20px;font-weight: 700;padding-bottom: 10px;border-bottom: 1px solid #fff;white-space: nowrap}
.b-list ul li div{background-color: #fff;border-radius: 5px;text-align: center;padding: 30px 0;margin-top: 20px}
.b-list ul li div strong{font-size: 28px;color:#444444}
.b-list ul li div p{margin-top: 25px;line-height: 23px;font-size: 16px}
.b-list ul li div strong em{font-size: 28px;font-weight: 700;color: #8564dd}
.b-list ul li i {display: block;margin:0 auto 30px;background-image: url("../images/icon_group_mobile.png");background-size: 250px 250px;background-repeat: no-repeat}
.b-list ul li i.ico01{width: 65px;height: 103px;background-position: 0 -147px}
.b-list ul li i.ico02{width: 85px;height: 95px;background-position: -80px -147px}
.b-list ul li i.ico03{width: 125px;height: 50px;background-position: 0 -80px}
/* section3 */
#section3 .wrapper{padding-bottom: 0}
#section3 h2{text-align: center;font-size: 21px;color: #444;margin-bottom: 15px}
#section3 h2 + p{text-align: center;font-size: 10px;color: #444;margin-bottom: 10px;font-weight: 500}
#section3:before{content:'';position: absolute;top:0;left:50%;transform: translateX(-50%);width: 30%;height: 100%;background: #f5f5f5}
#section3 .button-group{display: flex;flex-wrap: wrap;width: 70%;justify-content: space-between;margin:0 auto}
#section3 .button-group button{width:30%;margin-top:2.3vh;cursor:pointer;}
#section3 .button-group button span{display: none}
#section3 .button-group button img{width: 100%;height: 100%}
#section3 .samp-phone{position:relative;width: 85%;margin: 3vh auto 0;}
#section3 .samp-phone img{max-width: 100%;width: 100%}
#section3 .samp-phone .video{position: absolute;padding-bottom: 74.3%;height: 0;width:95.5%;left:2%;top:10%;}
#section3 .samp-phone .video video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover}
#section3 .samp-phone .video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
#section3 .samp-phone .panel{position:absolute;width:100%;background: #1d2b42;top:99.9%;left:50%;transform: translateX(-50%);padding-bottom: 10px}
#section3 .samp-phone .panel .title{text-align: center;color:#fff;font-size: 15px;padding: 9px 0}
#section3 .samp-phone .panel .info{background-color: #fff;border-radius: 3px;padding: 9px 13px;display: flex;margin:0 10px 0 15px;align-items:center}
#section3 .samp-phone .panel .info img{flex: 0 0 50px;max-width: 80px;max-height: 80px}
#section3 .samp-phone .panel .info ul{margin-left: 15px}
#section3 .samp-phone .panel .info ul li {color: #444444;font-size: 8px;margin-top: 5px;display: flex;align-items: center}
#section3 .samp-phone .panel .info ul li .ico{width:25px;padding-right:8px}
#section3 .samp-phone .panel .toggle-btn{position: absolute;width:69px;height:18px;left: 50%;bottom:-18px;transform: translateX(-50%);background: url("../images/btn_toggle_fold.png") no-repeat;background-size: 100% auto;text-indent: -9999px}
#section3 .samp-phone .panel .contents{transition: all 0.3s;overflow: visible}
#section3 .samp-phone .panel.active{padding-bottom: 0px}
#section3 .samp-phone .panel.active .contents{max-height: 0;transition: all 0.3s;overflow: hidden}
#section3 .samp-phone .panel.active .toggle-btn{background-image: url("../images/btn_toggle_unfold.png")}
.phoneBannerPart {position: relative;}

/* section4 */
#section4{background:#f5f5f5}
#section4:before{content:'';position: absolute;right:0;top:0;background: url("../images/bg_ellipse01.png") no-repeat;background-size: auto 90px;width:120px;height: 90px }
#section4:after{content:'';position: absolute;left:0;bottom:0;background: url("../images/bg_ellipse02.png") no-repeat;background-size: auto 98px;width:100px;height: 98px }
#section4 h3{position: relative;top:147px;white-space: nowrap}
#section4 h3 span{font-size: 33px;font-weight: 300;color: #444}
#section4 h3 em{position: relative;display: inline-block;font-weight: 700;color:#444;font-size: 33px;margin-top: 7px}
#section4 h3 em:before{content: '';position: absolute;left:-5px;bottom:-5px;width: 100%;height: 55%;background: #86ecfb;z-index: -1;padding:0 5px}
#section4 h3 span.ellipsis{display:none;border-radius: 9999px;background: #7f69f5;color: #fff;font-size: 10px;font-weight: 700;padding:10px 20px;line-height: 15px;margin-left: 20px;vertical-align: top;text-align: center}
#section4 .experience{position: relative;width: 418px;margin: 0 auto 45px}
#section4 .experience:before{position: absolute;content:'';width: 260px;height: 140px;background: url("../images/bg_left_pc.png") no-repeat 0 0;background-size:100%;left:-265px;top:320px}
#section4 .experience:after{position: absolute;content:'';width: 260px;height: 140px;background: url("../images/bg_right_pc.png") no-repeat 0 0;background-size:100%;top:130px}
#section4 .experience img{max-width: 100%}
#section4 .experience .video {position: absolute;padding-bottom: 54%;height: 0;width:93.6%;left:3%;top:7%;}
#section4 .experience .video .btn-play3{width:40px;height: 40px;background: url("../images/btn_play3.png") no-repeat;background-size: 100% auto;position: absolute;left:50%;transform: translateX(-50%);text-indent: -9999px;top:50%;margin-top: -20px}
#section4 .experience .video .active +.btn-play3{background-image: url("../images/stop03.png")}
#section4 .experience .video video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover}
#section4 .experience .video .video-text {width: 60%;position: absolute;left:50%;bottom: 10px;z-index: 100;padding:5px 0;border-radius:20px;text-align: center;font-size: 0.7em;line-height: 16px;background-color: rgba(0,0,0,0.6);color: #fff;transform: translateX(-50%);}
#section4 .experience .panel{position:absolute;width:100%;background: #1d2b42;top:99.9%}
#section4 .experience .panel .title{text-align: center;color:#fff;font-size: 15px;padding: 9px 0}
#section4 .experience .panel .title b {display:block;padding: 10px 0;color:#fff}
#section4 .experience .panel .info{background:none;background-color: #fff;margin:0 10px 15px}
#section4 .experience .panel .info img {width:100%;border-radius:3px;}
#section4 .experience .panel .toggle-btn{position: absolute;width:69px;height:18px;left: 50%;bottom:-18px;transform: translateX(-50%);background: url("../images/btn_toggle_fold.png") no-repeat;background-size: 100% auto;text-indent: -9999px}
#section4 .experience .panel .contents{transition: all 0.3s;overflow: visible}
#section4 .experience .panel.active{padding-bottom: 0px}
#section4 .experience .panel.active .contents{max-height: 0;transition: all 0.3s;overflow: hidden}
#section4 .experience .panel.active .toggle-btn{background-image: url("../images/btn_toggle_unfold.png")}
.bannerSwiper {overflow: hidden;}
.bannerSwiper > .swiper-wrapper {display:flex}
.bannerNextBtn {position:absolute;right:20px;top:47%;display:block;width:40px;height:40px;z-index:100;background-image: url("../images/info_arrow.png");background-repeat:no-repeat;background-position:center;background-size: 33px 33px;cursor: pointer;}
.bannerNextBtn:hover {background: url("../images/info_arrow_on.png") no-repeat;background-position:center;background-size: 33px 33px;}
.bannerPrevBtn {position:absolute;left:20px;top:47%;display:block;width:40px;height:40px;z-index:100;background-image: url("../images/info_arrow.png");background-repeat:no-repeat;background-position:center;background-size: 33px 33px;cursor: pointer;transform:rotate(180deg)}
.bannerPrevBtn:hover {background: url("../images/info_arrow_on.png") no-repeat;background-position:center;background-size: 33px 33px;}
.bhide {display:none}
.hideVT {animation: fadeout 2s;animation-fill-mode: forwards;}

.callCenter {width:310px;padding:65px 0 35px;position: absolute;right:-333px;bottom:50px;background: url("../images/bg_phone3.png") center no-repeat;text-align: center;font-size:1.5em;font-weight:600}
.callCenter i {margin-right:5px;font-size:0.9em;color:#fff}
.callCenter a {color:#fff}

/*s */
.modal-Slider {padding:0}
.modal-Slider .sliderSwiper .swiper-wrapper {display:flex}
.modal-Slider .sliderSwiper .swiper-wrapper .swiper-slide {line-height: 100px;text-align: center;}
/*e */

/* section5 */
#section5{background: #3e1161 url("../images/bg_section_last.png") no-repeat;background-size: 100% 100%}
.video-wrap .swiper .swiper-slide{margin-top: 30px;position: relative;cursor: pointer;}
.video-wrap .swiper img{width: 100%;max-width: 100%;box-shadow: 5px 8px 8px rgba(0,0,0,0.5)}
.video-wrap .swiper .btn-play{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:56px;height:56px;border-radius:50%;background: url("../images/icon_group_mobile.png") no-repeat -129px 0; background-size: 250px 250px;overflow: hidden;text-indent: -9999px}
.video-wrap .swiper .active + .btn-play{background-image: url("../images/stop01.png");background-size: 100% 100%;background-position: 0 0;}
.video-type1 {padding-bottom:10%}
#fp-nav{display: none}
.controls{display: none}

.check-wrap{text-align: right;margin: 20px 0}
.check-wrap input{padding: 0}
.check-wrap label{text-align: left;color: #fff;font-size: 16px;padding-left:35px;position: relative}
.check-wrap label:before{background: #fff;width: 20px;height: 20px;content: '';position: absolute;left: 0;top:50%;transform: translateY(-50%)}
.check-wrap input:checked + label:after{content: '';width: 15px;height: 15px;position: absolute;left: 10px;top:50%;transform: translate(-50%, -50%);background:url("../images/ico_check.png") no-repeat;background-size: cover}
.btn-close{position: absolute;right: 10px;top:10px;width: 34px;height: 34px;background: url("../images/btn-close.png") no-repeat;background-size: 100% auto;text-indent: -9999px;cursor:pointer;transition:all ease 0.3s}
.btn-close:hover {transform:rotate(90deg)}
.vs-wrap .controls{display: none}
.register {width:1160px !important;margin-left:-580px;left:50% !important}

.layer-tel{position: fixed;bottom: 0;left:50%;transform: translateX(-50%);background: rgba(40,38,109,1);border-radius: 25px 25px 0 0;padding: 20px 0;min-width: 400px;z-index:100}
.layer-tel ul{display: flex}
.layer-tel ul li{padding: 0 30px;position: relative}
.layer-tel ul li i {padding-right:20px;font-size:24px;color:#fff}
.layer-tel ul li:first-child:after{content: '';position: absolute;right:-2px;width: 1px;height: 24px;background: #fff}
.layer-tel ul li,
.layer-tel ul li a {font-size: 24px;font-weight: 700;color: #fff}

.space-between-pc {display:flex;flex-flow:row wrap}
.space-between-pc.popup-part1 > div:first-child {width:50%}
.space-between-pc.popup-part1 > div:first-child > span.title {width:150px;margin-right:10px}
.space-between-pc.popup-part1 > div:last-child {width:50%}
.space-between-pc.popup-part1 > div:last-child > span.title {width:250px;margin-right:10px}
.space-between-pc.popup-part2 > div:first-child {width:50%}
.space-between-pc.popup-part2 > div:first-child > span.title {width:150px;margin-right:10px}
.space-between-pc.popup-part2 > div:last-child {width:50%}
.space-between-pc.popup-part2 > div:last-child > span.title {width:250px;margin-right:10px}
.space-between-pc .form-item {display:flex}

.space-between-pc.popup-part1 .form-item div > select,
.space-between-pc.popup-part2 .form-item div > select {width:15%;border-radius:10px}
.space-between-pc.popup-part1 .form-item div > input[type=text],
.space-between-pc.popup-part2 .form-item div > input[type=text] {border-radius:10px}

.bannerShow1,
.bannerShow2,
.bannerShow3,
.bannerShow4,
.bannerShow5,
.bannerShow6 {display:none}
.clicked {display:block}
.bannerChange {display:block; animation: fadein 2s;}

.banner{display: block;position: absolute;width: 160px;right: 150px}
.banner img{width: 100%;max-width: 100%}
.banner ul{position: fixed;top:50%;transform: translateY(-50%)}
.banner li{width:100%;margin-top: 6px;margin-top: 15px}
.banner li:first-child{margin-top: 0}
.banner li:last-child{border-radius: 10px}
.banner li:last-child a{display: block;border:2px solid #89d7e1;background: #2b266d;color: #9bffe1;text-align: center;border-radius: 9px;padding:15px 0;font-weight: 700;font-size: 18px;text-decoration: none;}
.banner li:last-child a:hover {transition:0.5s all;border:2px solid #fff;background:#6d8af4;color:#fff}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* pc */

@keyframes flash{
	0%{opacity:1;}
	50%{opacity:.5;}
	100%{opacity: 1;}
}

@media (min-width: 320px) and (max-width: 639px) {
    .header .top .logo a {width:80px;height:32px;background-size: 80px auto;}    
    #section0 .wrapper {padding:100px 0 15vh 40px}
    #section0 div.visual {top:45%}
    #section0 div.visual a {padding:12px 10px}
    #section0 div.visual .btn {padding:0}
    #section0 div .gif {width:45%;}
    #section1{background:url("../images/section1_bg_mo.png") no-repeat center 0;background-size:cover;}
	#section2 .txt2 strong em {display:block; padding:20px 0 10px;font-size: 10.656vw}	
    #section3 .samp-phone .panel .title {font-size:12px}
    #section3 .samp-phone .panel.active .bg-deny{display: block}
    #section3 .samp-phone .panel .bg-deny{background: url("../images/bg_restrick.png") no-repeat 0 0;width: 44px;height: 13px;position: absolute;right:20px;bottom: -15px;background-size: 100% auto}
    #section4 .experience .panel.active .bg-deny{display: block}
    #section4 .experience .panel .bg-deny{background: url("../images/bg_restrick.png") no-repeat 0 0;width: 44px;height: 13px;position: absolute;right:20px;bottom: -15px;background-size: 100% auto}    
    #section3 .samp-phone .panel .info img {max-width: 50px;max-height: 50px;}
    #section3 .samp-phone .panel .info ul li {margin-top:2px}
    #section3 .samp-phone .panel .info ul li .ico > img {max-width:13px;max-height:13px;}
    #section4 h3{top:10px}
    #section4 h3 span{font-size:25px}
    #section4 h3 em{font-size:25px}    
    #section4 h3 span.ellipsis {font-size:8px;font-weight:400;padding:5px 30px;line-height: 16px;}
    #section4 .experience {width:80%;margin:40px auto}
    #section4 .experience .panel .title b {padding: 5px 0}
    .layer-tel {width: 80%;min-width: 80%;}
    .layer-tel ul {justify-content: center;}
    .layer-tel ul li {padding:0 20px}
    .layer-tel ul li i {font-size:18px}
    .layer-tel ul li, 
    .layer-tel ul li a {font-size:18px}    
    .t-box em {padding-right:10px}
	.register {width:400px !important;margin-left:-200px;left:50% !important}    
    .space-between-pc .form-item {flex-flow:wrap}
    .space-between-pc.popup-part1 > div.form-item,
    .space-between-pc.popup-part2 > div.form-item {width:100%}
    .space-between-pc.popup-part1 > div.form-item > span,
    .space-between-pc.popup-part2 > div.form-item > span {border-radius: 5px;}
    .space-between-pc.popup-part1 > div.form-item > span.title,
    .space-between-pc.popup-part2 > div.form-item > span.title {width:initial;line-height: 30px;padding:0 15px;margin-bottom:10px}
    .space-between-pc.popup-part1 .form-item div > select, .space-between-pc.popup-part2 .form-item div > select,
    .space-between-pc.popup-part2 .form-item div > select, .space-between-pc.popup-part2 .form-item div > select {height:30px;line-height: 30px;border-radius: 5px;font-size:10px}
    .space-between-pc.popup-part1 .form-item div > input[type=text], 
    .space-between-pc.popup-part2 .form-item div > input[type=text] {height:30px;line-height: 30px;border-radius: 5px;}
    #section1 .fp-tableCell:after {content: '';position: absolute;top: 50%;height: 50%;width: 100%;background-color: #d2d6fb;z-index: 10;}
    #section1 .wrapper {padding:0}
    #section4:before{width: 70px;height: 70px;background-size: auto 100%}
    #section4 .experience .panel .title {font-size:12px}
    #section4 .experience .panel .info {padding:0 5px;margin:0 5px 10px}
    .bannerNextBtn {right:10px;top:45%;width:30px;height:30px;background-size: 25px;}
    .bannerNextBtn:hover {background-size: 25px}
    .bannerPrevBtn {left:10px;top:45%;width:30px;height:30px;background-size: 25px;}
    .bannerPrevBtn:hover {background-size: 25px}    
    .video-type2 {padding:15% 0}
    /*
    .vs-wrap {padding:0 0 40px}
    */
}


@media (min-width: 640px) {

    .call-center{display: block}
    .vs-wrap{position: relative}
    .controls{position: absolute;left:50%;height:20px;top:50%;transform:translate(-50%, -50%);width: 100%;z-index: 10;display: block}
    .vs-wrap .controls{display: block}
    .swiper-button-prev{display:flex;position:absolute;left:10px;width: 25px;height: 25px;background: url("../images/slide_prev.png") no-repeat 0 0;background-size: 100% 100%;z-index: 100}
    .swiper-button-next{display:flex;position:absolute;right:10px;width: 25px;height: 25px;background: url("../images/slide_next.png") no-repeat 0 0;background-size: 100% 100%;z-index: 100}
    .swiper-button-next.swiper-button-disabled:after,
    .swiper-button-prev.swiper-button-disabled:after{display: none}
    .swiper-button-prev:after{display: none}
    #section0 .wrapper{display: flex;align-items: center;}
    #section0 .main-text{max-width: 100%;margin:0 }
    #section0 div.visual{top: 40%;width:100%;transform: translateY(-40%);}
    #section0 .s100{position: relative}
    #section0 div .btn{display: inline-flex;align-items: center;margin-top:5%;position: relative;left:33%}
    #section0 div .gif{width: 25%}
    #section0 .tel ul li, #section0 .tel ul li a{font-size: 13px}
    #section0{background-image: url("../images/bg_section_main_tab.png")}
    #section1{padding:0}
    #section1 .wrapper {padding-top: 80px;}
    #section1 .fp-tableCell:after{content:'';position: absolute;top: 50%;height: 50%;width: 100%;background-color: #d2d6fb;z-index: 10}
    #section1 .line-wrap{margin: 0 auto 60px;max-width: 85%;}
    #section1 ul{padding:0;display: flex;justify-content: space-between}
    #section1 ul li{min-width: 0;width: 29%;height: auto;margin:0;border-radius: 9px;min-height: 180px}
    #section1 ul li a.center{border-radius: 9px;border-width: 7px}
    #section1 ul li a{border-width: 4px;height: 100%;}
    #section1 ul li a .title strong{font-size: 1.100vw}
    #section1 ul li a .small-contents{font-size: 0.8vw;line-height: 150%}
    #section1 .swiper{max-width: 85%;box-sizing: border-box;margin:0 auto;position: relative;overflow: hidden;z-index: 100}
    #section1 .swiper .swiper-wrapper{display: flex;position: relative;z-index: 50}
    #section1 .swiper .swiper-wrapper .swiper-slide{flex:0 0 24%;margin:0}
    #section1 .swiper .swiper-slide .btn-play{background-size:30px 30px;}
    #section1 ul li a .title{margin-bottom: 20px}
    #section1 .line-wrap .img{max-width: 70%}
    .swiper-gr1{position: relative}

    #section2{background-image: url("../images/bg_section2_tab.png")}
    #section2 .wrapper{padding: 100px 30px 30px}
    #section2 .txt2 strong, #section2 .txt2 strong em{font-size: 5.469vw}
    #section2 .b-list ul{display: flex;justify-content: space-between}
    #section2 .b-list ul li{width: 380px;text-align: center}
    #section2 .b-list ul li > span{font-size: 2.031vw}
    #section2 .txt1{font-size: 2.344vw;}
    #section2 .txt2{display: flex;align-items: center;margin-top:2.906vw}
    #section2 .txt2 span{margin-top: 0;font-size: 2.344vw;margin-left: 4.125vw;padding: 0.938vw 0}
    #section2 .b-list ul li{width: 31%;margin-top:35px}
    #section2 .b-list ul li div{margin-top: 25px;padding: 25px 0 15px;}
    .t-box{padding: 20px 35px}
    .t-box em, .t-box span{position:static;font-size: 1.719vw;}
    .b-list ul li div strong{font-size: 2.656vw}
    .b-list ul li div p{font-size: 1.719vw;line-height: 14px;margin-top: 2.031vw;line-height: 150%}
    .b-list ul li i{background-size: 150px 150px;margin-bottom: 18px}
    .b-list ul li i.ico01{width: 41px;height: 62px;background-position: 0 -88px}
    .b-list ul li i.ico02{width: 55px;height: 62px;background-position: -49px -88px}
    .b-list ul li i.ico03{width: 74px;height: 30px;background-position: 0 -48px;margin: 17px auto 33px}

    #section3 .wrapper{padding-top: 80px}
    #section3 h2, #section3 h2+p{display: none}
    #section3 .samp-phone{margin-top: 0;width: 45%;}
    #section3 .button-group{position: relative;width: 95%;margin-top: 50px}
    #section3 .button-group button{width: 107px;height: 108px;position: absolute;}
    #section3 .button-group button span{display:inline-block;padding-top: 25px;margin-top: 5px}
    #section3 .button-group button span:after {content:'';display: inline-block;display: inline-block;position: absolute;top: 6px;left: 0;}
    #section3 .button-group button.samp-btn02{left:0;top:0}
    #section3 .button-group button.samp-btn04{right:0;top:0}
    #section3 .button-group button.samp-btn01{left:0;top:102px}
    #section3 .button-group button.samp-btn05{right:0;top:102px}
    #section3 .button-group button.samp-btn03{left:0;top:204px}
    #section3 .button-group button.samp-btn06{right:0;top:204px}
    #section3 .button-group button.samp-btn01 span,
    #section3 .button-group button.samp-btn02 span,
    #section3 .button-group button.samp-btn03 span{position: absolute;left:105px;text-align: left;font-size: 10px;font-weight:600}
    #section3 .button-group button.samp-btn01 span:after,
    #section3 .button-group button.samp-btn02 span:after,
    #section3 .button-group button.samp-btn03 span:after{width:35px;height:10px;background: url("../images/left_click.png") no-repeat 0 0}
    #section3 .button-group button.samp-btn04 span,
    #section3 .button-group button.samp-btn05 span,
    #section3 .button-group button.samp-btn06 span{position: absolute;left:-52px;text-align: left;font-size: 10px;font-weight:600}
    #section3 .button-group button.samp-btn04 span:after,
    #section3 .button-group button.samp-btn05 span:after,
    #section3 .button-group button.samp-btn06 span:after{width:35px;height:10px;background: url("../images/right_click.png") no-repeat 0 0}
    #section3 .samp-phone .panel.active .bg-deny{display: block}
    #section3 .samp-phone .panel .bg-deny{background: url("../images/bg_restrick.png") no-repeat 0 0;width: 44px;height: 13px;position: absolute;right:8px;bottom: -15px;background-size: 100% auto}

    #section4 .experience .panel.active .bg-deny{display: block}
    #section4 .experience .panel .bg-deny{background: url("../images/bg_restrick.png") no-repeat 0 0;width: 44px;height: 13px;position: absolute;right:8px;bottom: -15px;background-size: 100% auto}

    .vs-wrap{margin-top: 30px}
    .video-wrap h3{padding: 0 30px}
    .video-wrap h3, .video-wrap h3 em{font-size: 2.500vw;}
    .video-wrap .swiper{overflow: hidden;width: 85%;z-index: 100}
    .video-wrap .swiper .swiper-slide{flex:0 0 31%;margin-top: 0;box-shadow: 5px 5px 5px rgba(0,0,0,0.8)}
	.video-wrap .swiper .swiper-slide:hover {box-shadow: none}

	.layer-tel{position: fixed;bottom: 0;left:50%;transform: translateX(-50%);background: rgba(40,38,109,1);border-radius: 25px 25px 0 0;padding: 20px 0;min-width: 400px;z-index:100}
	.layer-tel ul{display: flex;justify-content: center;}
	.layer-tel ul li{padding: 0 30px;position: relative}
	.layer-tel ul li i {padding-right:20px;font-size:24px;color:#fff}
	.layer-tel ul li:first-child:after{content: '';position: absolute;right:-2px;width: 1px;height: 24px;background: #fff}
	.layer-tel ul li,
	.layer-tel ul li a {font-size: 24px;font-weight: 700;color: #fff}
    /*
    .vs-wrap {padding:0 0 40px}
    */
}

@media (min-width: 767px) {
    #section4:before{width: 160px;height: 75px;background-size: auto 100%}
}

@media (min-width: 320px) and (max-width: 1024px) {    
    #section0 .wrapper {padding: 100px 0 15vh 40px}    
    #section3 .wrapper{padding: 30px 0}
    #section3 .samp-phone .panel .info img {max-width: 50px;max-height: 50px;}
    #section3 .samp-phone .panel .info ul li .ico > img {width:13px;height:13px}
    #section4 .experience {width:310px}
    #section4 .experience:before {display:none}
    #section4 .experience:after {display:none}
    #section4 h3 {top:5px;margin-bottom:30px}    
    #section4 h3 span.ellipsis {display:inline-block;padding:10px 40px;}
    .banner{display:none}

    .callCenter {width:310px;padding:65px 0 35px;position: relative;right:0;bottom:0;top:30px;background: url("../images/bg_phone3.png") center no-repeat;text-align: center;font-size:1.5em;font-weight:600}
    .callCenter i {margin-right:5px;font-size:0.9em;color:#fff}
    .callCenter a {color:#fff}

    .popupPc {display:none}
    .popupMobile {display:block; overflow:hidden;}
}

@media (min-width:768px) and (max-width:1024px) {
    #section0,
    #section2,
    #section3,
    #section4,
    #section5 {padding:0 8%}
    #section2 .b-list ul li > span {font-size:0.8rem}
    #section0 div .btn {left:25%}
    .b-list ul li div strong {font-size:1rem}
    .b-list ul li div strong em {font-size:1.3em}
    #section3 .button-group button.samp-btn04 span, 
    #section3 .button-group button.samp-btn05 span, 
    #section3 .button-group button.samp-btn06 span {left:-40px}
    #section3 .samp-phone .panel .info img {flex: 0 0 100px;max-width: 50px;max-height: 50px}
    #section4 .experience .panel .title b {padding:5px 0;}
    .register {width:900px !important;margin-left:-450px;left:50% !important}    
    .bannerPrevBtn,
    .bannerNextBtn {width:23px;height:23px;background-size: 23px;}
    .bannerPrevBtn:hover,
    .bannerNextBtn:hover {background-size: 23px 23px;}

}

@media (min-width: 1024px) {
    img.tab{display: inline}
    /*
    img.pc{display: inline}
    */

    #section0 .main-text img{width: 100%;max-width: 100%}
    #section0 div .btn {left:30%}    
    .panel .info{background-size: 35px 35px}    
    #section2 .b-list ul li > span {font-size:1rem}
    .t-box span {line-height: 25px}
    #section3 .samp-phone .panel{padding-bottom: 20px}
    #section3 .samp-phone .panel .title{font-size: 17px;padding: 20px 0}
    #section3 .samp-phone .panel .info{padding: 15px 25px}
    #section3 .samp-phone .panel .info img {max-width:50px;max-height:50px}
    #section3 .samp-phone .panel .info ul{margin-left: 30px}
    #section3 .samp-phone .panel .info ul li{font-weight: 500;font-size: 13px;margin-bottom: 10px}
    #section3 .samp-phone .panel .toggle-btn{background-image: url("../images/btn_toggle_fold_pc.png");width: 118px;height: 36px;bottom: -36px}
    #section3 .samp-phone .panel.active .toggle-btn{background-image: url("../images/btn_toggle_unfold_pc.png");width: 142px;height: 43px;bottom: -43px}
    #section3 .samp-phone .panel .info ul li i{background-image: url("../images/bg_panel_pc.png");background-size: auto;width: 15px !important;height: 15px !important;}
    #section3 .samp-phone .panel .info ul li i.ico01{background-position: 0 0;}
    #section3 .samp-phone .panel .info ul li i.ico02{background-position: 0 -29px;}
    #section3 .samp-phone .panel .info ul li i.ico03{background-position: 0 -60px;}
    #section3 .samp-phone .panel .bg-deny{width: 78px;height: 24px;position: absolute;right:15px;bottom: -36px}
    #section4 .experience .video .btn-play3{width: 72px;height: 72px;margin-top: -36px}
    #section4 .experience .panel .title{font-size: 15px;}
    #section4 .experience .panel .info ul{margin-left: 10px}
    #section4 .experience .panel .info ul li{font-weight: 500;font-size: 9px;margin-top: 5px}
    #section4 .experience .panel .toggle-btn{background-image: url("../images/btn_toggle_fold_pc.png");width: 100px;height: 36px;bottom: -36px}
    #section4 .experience .panel.active .toggle-btn{background-image: url("../images/btn_toggle_unfold_pc.png");width: 100px;height: 36px;bottom: -36px}
    #section4 .experience .panel .bg-deny{width: 78px;height: 24px;position: absolute;right:15px;bottom: -36px}
}

@media (min-width: 1200px) {
    #section0 .tel{padding:15px 20px}
    #section0 .tel ul li, #section0 .tel ul li a{font-size: 23px}
    #section0 div.visual a{font-size: 20px;padding: 15px 20px}
    #section0 .tel ul li:first-child i{background: url("../images/bg_tel2_pc.png") no-repeat 0 0;width: 25px;height: 24px;background-size: 100% auto}
    #section0 .tel ul li:first-child{padding-left: 0}
    #section0 .tel ul li:first-child:after{height: 23px}

    #section2 .txt1{font-size: 28px}
    #section2 .txt2 strong, #section2 .txt2 strong em{font-size: 66px}
    #section2 .txt2 span{font-size: 28px;padding: 12px 0}
    #section2 .b-list ul li > span{font-size: 24px}
    #section2 .b-list ul li div{margin-top: 50px}

    .video-wrap h3, .video-wrap h3 em{font-size: 30px}
    .t-box{margin:40px 0 35px}
    .t-box em, .t-box span{font-size: 20px;letter-spacing:1px}
    .b-list ul li div strong,
    .b-list ul li div strong em{font-size: 32px}
    .b-list ul li div p{font-size: 20px}
    .b-list ul li i.ico01{width:75px;height:119px;background: url("../images/icon_business01.png") no-repeat center top;background-size:100% auto}
    .b-list ul li i.ico02{width:101px;height:119px;background: url("../images/icon_business02.png") no-repeat center top;background-size:100% auto}
    .b-list ul li i.ico03{width:149px;height:119px;margin:0 auto 18px;background: url("../images/icon_business03.png") no-repeat center center;background-size:100% auto}

    #section1 .swiper .swiper-slide .btn-play{background-size: 55px 55px}
    #section3 .button-group{width: 100%;}
    #section3 .samp-phone .panel .info img {flex:0 0 70px;max-width: 70px;max-height: 70px;}
    #section4:before{width: 584px;height: 279px;background-size: 100% auto}
    #section4:after{width: 236px;height: 241px;background-size: 100% auto}
    #section1 .wrapper{padding-top: 200px}
    #section2 .wrapper{padding-top: 185px;padding-bottom: 62px}
    #section3 .button-group button{width:190px;height: 172px;}
    #section3 .button-group button span{left:190px;font-size: 17px !important;padding-top: 64px}
    #section3 .button-group button.samp-btn01 span,
    #section3 .button-group button.samp-btn02 span,
    #section3 .button-group button.samp-btn03 span{left:190px}

    #section3 .button-group button.samp-btn04 span,
    #section3 .button-group button.samp-btn05 span,
    #section3 .button-group button.samp-btn06 span{left:-73px}

    #section3 .button-group button.samp-btn01 span:after,
    #section3 .button-group button.samp-btn02 span:after,
    #section3 .button-group button.samp-btn03 span:after{background-image: url("../images/left_click_pc.png");width: 66px;height: 17px;top:20px}

    #section3 .button-group button.samp-btn04 span:after,
    #section3 .button-group button.samp-btn05 span:after,
    #section3 .button-group button.samp-btn06 span:after{background-image: url("../images/right_click_pc.png");width: 66px;height: 17px;top:20px}
    #section3 .button-group button.samp-btn01,
    #section3 .button-group button.samp-btn05{top:190px}
    #section3 .button-group button.samp-btn03,
    #section3 .button-group button.samp-btn06{top:388px}

    #section4 h3 em, #section4 h3 span{font-size: 65px}
    #section4 .experience .panel .title{font-size: 1em}
    #section4 .experience .panel .info ul li{font-size: 12px}

    .popupPc {display:block}

}

@media (min-width: 1025px) and (max-width: 1200px) {
    #section0 div.visual {position: absolute}
    #section0 div .btn {left:50%;margin-left:-155px}    
    #section3 .wrapper {width:85%}
    #section3 .samp-phone .panel .info img {flex:0 0 70px;max-width: 70px;max-height: 70px;}
    #section4 .wrapper {width:85%}
    #section4 .experience {width:40%}
    .video-wrap {width: 100%;position: absolute;top: 50%;transform: translateY(-50%)}
    .banner {display:none}    

    .popupPc {display:block}
    .popupMobile {display:none}
}

@media (min-width: 1300px) {
    .controls {height: 40px}
    .controls .swiper-button-next,
    .controls .swiper-button-prev {width: 40px;height: 40px}
    #section4 .experience:before{background-image: url("../images/bg_left_pc.png");width: 409px;height: 219px;left:-450px}
    #section4 .experience:after{background-image: url("../images/bg_right_pc.png");width: 322px;height: 144px;right:-333px}
}

@media (min-width: 1200px) and (max-width: 1404px) {    
    #section0 .wrapper {top:5%}
    #section0 .s100{width: 80%}
    #section0 div .btn {left:28%}
    #section4 .experience {width:350px}
    .video-wrap {width: 100%;position: absolute;top: 50%;transform: translateY(-50%)}
    .banner{display: block;position: absolute;width: 100px;height:100px;right: 2%}
    .banner ul{position: fixed;top:50%;transform: translateY(-50%);margin-top: 10px}    
}

@media (min-width: 1405px) and (max-width: 1600px) {
    #section0 .wrapper {top:10%}
    #section0 .s100{width: 90%}
    #section0 .main-text {max-width:90%}
    #section0 .main-text img {width:90%;max-width:90%;}
    #section0 .btn {margin-top:10px}    
    #section0 div .btn {left:21%}
    #section0 div .gif {right:10%}
	#section0 .gif {width: 22% !important;padding-bottom:50px}
    #section0 .gif img{width: 95%;max-width: 95%}
    #section1 .wrapper{padding-top:5%}
    #section1 .line-wrap{width:75%}
    #section1 .swiper{width:75%}
    #section5 .wrapper .video-wrap .vs-wrap .controls{width: 85%}
    #section2 .wrapper {padding:8% 100px 0}
    #section2 .txt1{font-size: 24px}
    #section2 .txt2 strong, #section2 .txt2 strong em{font-size: 45px}
    #section2 .txt2 span{font-size: 22px;padding: 12px 0}
    #section2 .b-list ul li {margin-top:25px}
    #section2 .b-list ul li > span{font-size: 20px}
    #section2 .b-list ul li div{margin-top: 40px;padding:20px 0 15px}  
    #section3 .wrapper {padding:3% 80px 0}
    #section3 .samp-phone {width:40%}
    #section3 .samp-phone .panel .info ul li {font-size:12px}
    #section3 .samp-phone .panel .info img {flex: 0 0 100px;max-width: 80px;max-height: 80px}
    #section3 .button-group button.samp-btn04 span, 
    #section3 .button-group button.samp-btn05 span, 
    #section3 .button-group button.samp-btn06 span {left:-78px}
    #section4 .wrapper {padding:0 80px}
    #section4 h3 {margin-top:2%}
    #section4 h3 em, #section4 h3 span {font-size:55px}
    #section4 .experience {width:418px}
    #section4 .experience:before {background-size: 80%;top:390px;left: -350px;}
    #section4 .experience:after {background-size: 80%;}
    #section5 .wrapper {padding:3% 80px 0}
    #section5 .wrapper .video-wrap .vs-wrap .controls{width: 100%}    
    .video-wrap {width: 100%;position: absolute;top: 50%;transform: translateY(-50%)}
    .b-list ul li div strong,
    .b-list ul li div strong em{font-size: 24px}
    .b-list ul li div p{font-size: 18px}
    .b-list ul li i.ico01{width:75px;height:119px;background: url("../images/icon_business01.png") no-repeat center top;background-size:90% auto}
    .b-list ul li i.ico02{width:101px;height:119px;background: url("../images/icon_business02.png") no-repeat center top;background-size:90% auto}
    .b-list ul li i.ico03{width:149px;height:119px;margin:0 auto 18px;background: url("../images/icon_business03.png") no-repeat center center;background-size:90% auto}    
    .t-box{margin:30px 0 15px}
    .t-box em, .t-box span{font-size: 17px;letter-spacing:1px}      
	.banner{display: block;position: absolute;width: 100px;right: 150px}
	.banner ul{position: fixed;margin-top:3%;top:50%;transform: translateY(-50%)}
    .banner li{width:90%;margin-top: 10px}
    .banner li:first-child{margin-top: 0}
    .banner li:last-child a{font-size: 16px;width:90%;padding:10px 0}
	.banner img{width:90%;max-width:90%}    
    .bannerPrevBtn,
    .bannerNextBtn {width:40px;height:40px;background-size: 33px;}
    .bannerPrevBtn:hover
    .bannerNextBtn:hover {background-size: 33px 33px;}      
}

@media (min-width: 1601px) and (max-width: 2000px) {
    #section0 .wrapper,
	#section1 .wrapper,
	#section2 .wrapper,
	#section3 .wrapper,
	#section4 .wrapper,
	#section5 .wrapper	{min-height: 970px;justify-content: center}
    #section0 .wrapper {position: relative;top:5%}
    #section0 div .btn {left:30%}
	#section0 div .gif {width: 286px;right:9%;padding-bottom:50px}
	#section0 .main-text img{width: 1062px;max-width: initial}
    #section3 .samp-phone .panel .info img {flex: 0 0 100px;max-width: 80px;max-height: 80px}
    #section4 .experience {width:418px}
    #section4 .experience:before {background-size: 100%;top:350px;left: -430px;}
    #section4 .experience:after {background-size: 100%;}    
    #section5 .wrapper {padding-top:10%}
    .video-wrap {width: 100%;position: absolute;top: 50%;transform: translateY(-50%)}
    .banner ul{margin-top:3%}
    .bannerPrevBtn,
    .bannerNextBtn {width:40px;height:40px;background-size: 33px;}
    .bannerPrevBtn:hover
    .bannerNextBtn:hover {background-size: 33px 33px;}          
}