@charset "UTF-8";


.all_width{max-width: 700px; margin: 0 auto;}

.quick{position: fixed; bottom: 20px; left: 0; right: 0; margin: 0 auto; z-index: 9; width: 100%; text-align: center;}
.quick a{max-width: 520px; display: block; margin: 0 auto;}
.quick a img{width: 100%;}
.head{border-radius: 0 0 32px 32px;background: #1A53D0; color: #fff; text-align: center; padding: 20px 0; position: fixed; top: 0; width: 100%; max-width: 700px; z-index: 9;}
.head h2{ font-family: "GmarketSansBold"; font-size: 3.2rem; }
.head h2 b{font-weight: 500; color: #FFC808;}
.logo{margin:160px 0 40px 0; text-align: center;}
.img{border-radius: 32px; background: #F3F7FF;margin-top: 150px; overflow: hidden;}
.img img{width: 100%;}
.img .box_wrap{padding: 78px 40px 40px 40px;}
.img .box_wrap .txt{margin-bottom: 28px;}
.img .box_wrap .txt h2{ font-family: 'Giants-Bold'; display: flex; justify-content: center; align-items: center; font-size: 4.4rem; gap: 0px 10px; margin-bottom: 14px;}
.img .box_wrap .txt h2 b{color: #1A53D0;}
.img .box_wrap .txt p{font-size: 2.2rem; color: #999; font-weight: 600; line-height: 145%; text-align: center;}
.img .box_wrap .txt img{width: 100%;}
.img .simg img{width: 100%;}
.apply{margin-top: 80px; margin-bottom: 130px;}
.apply .txt{margin-bottom: 28px;}
.apply .txt img{width: 100%;}
/*.img .img_bg{background: url("../img/bg.png") no-repeat; background-position: center; background-size: cover; border-radius: 32px; padding-top: 60px;}*/
.img .img_bg img{width: 100%;}
.img .img_bg .txt1{display: block; margin-bottom: 53px;}
.img .img_bg .txt3{display: block; margin-top: 9px;}

.now{margin-top: 80px;}
.now .txt img{width: 100%;}
.now .box_wrap{padding: 32px 40px 40px 40px; border-radius: 32px; background: #F3F7FF; margin-top: 28px;}
.now .live_wrap{ border-radius: 32px; overflow: hidden; margin-top: 40px; height: 252px; background: #fff; padding: 20px 0;}
.now .liveSwiper{height: 100%; }
.now .liveSwiper .live_box{display: flex; align-items: center; justify-content: space-between; padding: 10px 28px;}
.now .liveSwiper .live_box h4{width: 25%; font-size: 1.8rem; font-weight: 600; color: #505050;}
.now .liveSwiper .live_box h3{width: 25%; text-align: center; font-size: 1.8rem; font-weight: 600; color: #505050;}
.now .liveSwiper .live_box span{width: 25%; padding: 6px 0; border-radius: 40px; font-size: 1.8rem; font-weight: 600; line-height: 145%; display: flex; align-items: center; justify-content: center;}
.now .liveSwiper .live_box span.c1{color: #333; background: #EDEDED; }
.now .liveSwiper .live_box span.c2{border: 1px solid #1A53D0; background: rgba(26, 83, 208, 0.10); color:#1A53D0; }
.now .liveSwiper .live_box span.c3{background: #1A53D0; color: #fff;}
.now .icon_wrap{display: flex; }
.now .icon_wrap .box{width: 33.333%; position: relative; text-align: center;}
.now .icon_wrap .box:after{content: ''; width: 1px; height: 80px; background: #E5E5EC; position: absolute; right: 0; top: 35%;}
.now .icon_wrap .box:last-child:after{display: none;}
.now .icon_wrap .box p{margin-top: 8px; margin-bottom: 4px; color: #767676; font-weight: 600; line-height: 140%;}
.now .icon_wrap .box h4{font-size: 2.4rem; font-weight: bold; color: #111;}
.now .icon_wrap .box h4 b{font-family: 'Giants-Bold'; font-size: 4.0rem; color: #1A53D0;}

.review{margin-top: 80px;}
.review .txt img{width: 100%;}
.review .box_wrap{padding: 40px; border-radius: 32px; background: #F3F7FF; display: flex; flex-direction: column; gap: 24px 0;}
.review .box_wrap img{width: 100%; filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.16));}

.first{padding: 10px 40px 40px 40px; border-radius: 32px; background: #F3F7FF; margin-top: 20px;}
.first .txt img{width: 100%;}
.first .fimg{margin-top: 28px;}
.first .fimg img{width: 100%; filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.16));}

.time{margin-top: 80px; }
.time .txt img{width: 100%;}
.time .box_wrap{padding: 40px; border-radius: 32px; background: #F3F7FF; margin-top: 28px;}
.time .box_wrap img{width: 100%;}

#ft{display: none;}
.gif{margin-bottom: 20px; border-radius: 32px; overflow: hidden;}
.gif img{width: 100%;}

@media all and (max-width: 1400px){}
@media all and (max-width: 1200px){}
@media all and (max-width: 1024px){}
@media all and (max-width: 900px){}
@media all and (max-width: 850px){}
@media all and (max-width: 700px){
    .img{margin: 100px 3% 0 3%;}
    .img .box_wrap .txt h2{font-size: 3.0rem;}
    .img .box_wrap{padding: 50px 15px 15px 15px;}
    #formmail-write{padding: 25px 15px;}
    .apply{padding: 0 3%;}
    .now .box_wrap{padding: 20px 15px 15px 15px;}
    .now{padding: 0 3%;}
    .now .liveSwiper .live_box{padding: 10px 10px;}
    .now .liveSwiper .live_box h4{font-size: 1.4rem;}
    .now .liveSwiper .live_box h3{font-size: 1.4rem;}
    .now .liveSwiper .live_box span{padding: 4px 0; font-size: 1.5rem;}
    .now .live_wrap{height: 226px;}
    .review .box_wrap{padding: 15px;}
    .review{padding: 0 3%;}
    .first{padding: 0 15px 15px 15px; margin: 20px 3% 0 3%;}
    .time{padding: 0 3%}
    .gif{margin: 0 3% 20px 3%; border-radius: 20px;}
    .quick a{max-width: initial; width: 75%;}
}
@media all and (max-width: 550px){
    .head h2{font-size: 2.0rem;}
    .logo img{width: 110px;}
    .logo{margin: 120px 0 40px 0;}
    #formmail-write .form-group .box_wrap .h3{font-size: 1.6rem; min-width: 80px;}
    #formmail-write .form-group input{height: 40px; border-radius: 7px;}
    #formmail-write .form-group3 .tel label{height: 40px; border-radius: 7px;}
    .form-footer button{height: 50px; font-size: 2.2rem; border-radius: 12px}
    .now .icon_wrap .box .icon img{width: 70px;}
    .now .icon_wrap .box p{font-size: 1.4rem; margin-top: 0px;}
    .now .icon_wrap .box h4 b{font-size: 2.8rem;}
    .now .icon_wrap .box h4{font-size: 1.8rem;}
    /*.quick{bottom: 70px;}*/
}