@charset "utf-8";

.main_logo{cursor:pointer}
.scroll{
  position:absolute;
  z-index:1000000;
  left:50%;
  bottom:13%;
  transform:translateX(-50%)
}
.scroll a{
  color:#fff;
  text-decoration:none;
  cursor:auto;
  font-size:2vh;
  background:url("../images/main/scroll_bg.png") no-repeat bottom left;
  width:60px;
  display:inline-block;
  height:62px;
  line-height:10vh;
  font-weight:700
}
.scroll a>text{bottom:0}
.scroll a span{
  position:absolute;
  top:0;
  left:32px;
  width:20px;
  height:20px;
  margin-left:-12px;
  border-left:1px solid #fff;
  border-bottom:1px solid #fff;
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
  -webkit-animation:sdb 1.5s infinite;
  animation:sdb 1.5s infinite;
  box-sizing:border-box
}
.step_block_2{display:block}

@-webkit-keyframes sdb{
  0%{
    -webkit-transform:rotate(-45deg) translate(0, 0);
    opacity:0
  }
  50%{opacity:1}
  100%{
    -webkit-transform:rotate(-45deg) translate(-20px, 20px);
    opacity:0
  }
}

@keyframes sdb{
  0%{
    transform:rotate(-45deg) translate(0, 0);
    opacity:0
  }
  50%{opacity:1}
  100%{
    transform:rotate(-45deg) translate(-20px, 20px);
    opacity:0
  }
}

.tracking-in-expand{
  display:inline-block;
  width:100px;
  height:100px;
  position:absolute;
  bottom:5%;
  right:2%;
  z-index:100000;
  background:url("../images/main/swipe.png") no-repeat left top;
  background-size:100% 100%;
  -webkit-animation:tracking-in-expand 2s linear infinite alternate both;
  animation:tracking-in-expand 2s linear infinite alternate both
}

@-webkit-keyframes tracking-in-expand{
  0%{letter-spacing:-0.5em;opacity:0}
  40%{opacity:0.6;}
  100%{opacity:1;}
}
@keyframes tracking-in-expand{
  0%{letter-spacing:-0.5em;opacity:0}
  40%{opacity:0.6;}
  100%{opacity:1;}
}

.background{
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
  overflow:hidden;
  will-change:transform;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  height:71vh;
  /*position:fixed;*/
  width:100%;
  /* margin-top:80px;*/
  -webkit-transform:translateY(30vh);
  transform:translateY(30vh);
  -webkit-transition:all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
  transition:all 1.2s cubic-bezier(0.22, 0.44, 0, 1)
}

/* .background:before{
content:"";
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(0, 0, 0, 0.3)
} */
.background:first-child{
  background:#383fe7;
  -webkit-transform:translateY(-15vh);
  transform:translateY(-15vh)
}
.background:first-child .content-wrapper{
  -webkit-transform:translateY(15vh);
  transform:translateY(15vh)
}
.background:nth-child(2){background:#fff}
.background:nth-child(3){
  background:#333333;
  clear:both
}
/* Set stacking context of slides */
.background:nth-child(1){z-index:3}
.background:nth-child(2){z-index:2}
.background:nth-child(3){z-index:1}

.content-wrapper{
  height:55vh;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  text-align:center;
  -ms-flex-flow:column nowrap;
  flex-flow:column nowrap;
  color:#fff;
  font-family:Montserrat;
  text-transform:uppercase;
  -webkit-transform:translateY(40vh);
  transform:translateY(40vh);
  will-change:transform;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  -webkit-transition:all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
  transition:all 1.7s cubic-bezier(0.22, 0.44, 0, 1)
}

.background.up-scroll{
  -webkit-transform:translate3d(0, -15vh, 0);
  transform:translate3d(0, -15vh, 0)
}
.background.up-scroll .content-wrapper{
  -webkit-transform:translateY(15vh);
  transform:translateY(15vh)
}
.background.up-scroll+.background{
  -webkit-transform:translate3d(0, 30vh, 0);
  transform:translate3d(0, 30vh, 0)
}
.background.up-scroll+.background .content-wrapper{
  -webkit-transform:translateY(30vh);
  transform:translateY(30vh)
}
.background.down-scroll{
  -webkit-transform:translate3d(0, -130vh, 0);
  transform:translate3d(0, -130vh, 0)
}
.background.down-scroll .content-wrapper{
  -webkit-transform:translateY(40vh);
  transform:translateY(40vh)
}
.background.down-scroll+.background:not(.down-scroll){
  -webkit-transform:translate3d(0, -15vh, 0);
  transform:translate3d(0, -15vh, 0)
}
.background.down-scroll+.background:not(.down-scroll) .content-wrapper{
  -webkit-transform:translateY(15vh);
  transform:translateY(15vh)
}

.swiper-slide .right .txt_area button,
.study_btn button{
  width:130px;
  font-size:0.8rem;
  font-weight:700;
  height:45px;
  border-radius:20px;
  padding-left:20px;
  margin-top:30px;
  color:#fff;
  background:#383fe7;
  text-align:left;
  border:none;
  position:relative;
  z-index:900
}
.swiper-slide .right .txt_area button:hover,
.study_btn button:hover{
  cursor:pointer;
  background:#1b22c8
}
.swiper-slide .right .txt_area button span,
.study_btn button span{
  width:15px;
  top:50%;
  right:20px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  border-top:1px solid #fff;
  position:absolute
}
.swiper-slide .right .txt_area button span::before,
.study_btn button span::before{
  content:"";
  position:absolute;
  top:-1px;
  right:0;
  width:10px;
  border-top:1px solid #fff;
  transform-origin:right;
  transform:rotate(45deg)
}
.swiper-slide .right .txt_area button span::after,
.study_btn button span::after{
  content:"";
  position:absolute;
  top:-1px;
  right:0;
  width:10px;
  border-top:1px solid #fff;
  transform-origin:right;
  transform:rotate(-45deg)
}
.bottom{width:100%;max-width:1920px;padding:50px 0;margin:0 auto -5px;background:#333;box-sizing:border-box;display:flex;clear:both}

/* ABOUT */
.con01_visual{background:url("../images/sub/con01_visual.png") no-repeat center center}
.visual{width:100%;height:700px;margin-top:80px;position:relative;background-size:cover!important}
.txt_box{position:absolute;left:40%;top:25%;width:51%;white-space:normal;word-break:break-word}
.visual .txt_box .visual_logo{margin-bottom:20px}
.visual .slogan{font-size:2.9vw;color:#fff;font-weight:700;letter-spacing:-0.1rem;white-space:normal;word-break:break-word}
.visual .slogan.right{text-align:right}

.perfect_list ol li{display:inline-block;width:50%;padding:0 40px;box-sizing:border-box;float:left}
.perfect_list ol li img{width:100%}
.perfect_list ol .img01{background:#fafafa}
.perfect_list ol .img02{background:#f1dc7f}
.perfect_list ol .img03{background:#fae300}
.perfect_list ol .img04{background:#ffaca3}
.perfect_list ol .img05{background:#e6e9ee}
.perfect_list ol .img06{background:#f9dac5}

.perfect_customer{width:1200px;margin:0 auto;clear:both;padding-top:100px;text-align:center;text-transform:uppercase}
.customer_title{font-size:5.5rem;color:#7236a3;font-weight:700;line-height:5.5rem;margin-bottom:20px}
.customer_txt01{
  font-size:2.5rem;
  color:#333;
  font-weight:700;
  padding-bottom:100px;
  background:url("../images/sub/con01_line_y.png") no-repeat center bottom
}
.customer_txt02{font-size:2rem;margin-top:50px;font-weight:500}
.customer_txt03{font-size:1.2rem;margin-top:30px}

.customer_box{width:100%;height:200px;margin-top:50px;border:1px solid #e3e3e3}
.customer_box ol li{width:19.8%;float:left;border-right:1px solid #e3e3e3;height:200px}
.customer_box ol li:last-child{border-right:none}
.customer_box ol li span{width:100%;text-align:center;display:inline-block}
/*.step_area .customer_box ol li span.box_icon+span{font-size:2rem}*/
.size1rem{font-size:1rem!important}
.customer_box ol li .box_icon{padding-top:50px}

.customer_list{clear:both;margin-top:100px}
.customer_list ul li{float:left;width:33%;display:inline-block;padding:0 30px 100px 30px;box-sizing:border-box}
.customer_list ul li img{width:100%}

/* CURRICULUM */
.con02_visual{background:url("../images/sub/con02_visual.png") no-repeat center}
.visual .visual_txt{font-size:2vw;font-weight:500;line-height:1.1;margin-top:20px;color:#fff;text-align:right}
.visual .visual_txt span img{display:inline-block;width:30%;vertical-align:middle;margin:0 5px 0 10px}

.cart_layer{
  width:100%;
  background:#45b0cf;
  height:190px;
  position:fixed;
  bottom:0;
  z-index:1000000000;
  padding:30px 0;
  box-sizing:border-box;
}
.cart_layer .con_1200{position:relative;padding:0 30px;box-sizing:border-box}
.cart_layer .con_1200 .close a{
  width:30px;
  height:30px;
  display:inline-block;
  position:absolute;
  top:-15px;
  right:30px;
  background:transparent
}
.cart_layer .con_1200 .close a::before{
  content:"";
  position:absolute;
  top:15px;
  right:0;
  width:30px;
  border-top:1px solid #fff;
  transform:rotate(45deg)
}
.cart_layer .con_1200 .close a::after{
  content:"";
  position:absolute;
  top:15px;
  right:0;
  width:30px;
  border-top:1px solid #fff;
  transform:rotate(-45deg)
}
.cart_area{width:50%;float:left}
.cart_area .cart_title,
.form_area .cart_title{font-size:1.5rem;color:#fff;font-weight:700}
.cart_area .cart_title .s_txt,
.cart_area .cart_title .cart_num{font-size:1rem;font-weight:400;margin-left:10px}
.cart_area .cart_title .cart_num .on{color:#fff600;font-weight:500}
.cart_area .cart_list{margin-top:12px;padding-right:10px}
.cart_area .cart_list ul li{
  border:1px solid #fff;
  color:#fff;
  font-weight:500;
  font-size:0.8rem;
  border-radius:10px;
  padding:15px 40px 15px 20px;
  margin-left:4px;
  display:inline-block;
  margin-bottom:5px
}
.cart_area .cart_list ul li span{
  width:10px;
  height:10px;
  padding:10px;
  margin:-9px 0 0 5px;
  display:inline-block;
  background:transparent;
  position:absolute;
  cursor:pointer
}
.cart_area .cart_list ul li span::before{
  content:"";
  position:absolute;
  top:50%;
  right:9px;
  width:10px;
  border-top:1px solid #fff;
  transform:rotate(45deg)
}
.cart_area .cart_list ul li span::after{
  content:"";
  position:absolute;
  top:50%;
  right:9px;
  width:10px;
  border-top:1px solid #fff;
  transform:rotate(-45deg)
}
.form_area{width:50%;float:left}
.form_area .input_area{margin-top:12px;width:60%;float:left}
.form_area .input_area .input_type{
  border:none;
  background:#fff;
  padding:15px;
  margin-bottom:5px;
  font-size:16px;
  width:100%
}
.form_area .btn_application{
  float:right;
  width:25%;
  background:#ffe400;
  color:#333;
  font-weight:500;
  font-size:1.2rem;
  margin-top:12px;
  margin-right:30px;
  border-radius:10px;
  height:100px
}

.cart_layer .btn_application_m{display:none}
.con_1200{width:1200px;margin:0 auto}
.con_1200 h3{font-size:3vw;text-align:center;margin:100px 0 30px 0}
.curri_con{width:31%;float:left;display:inline-block;margin:0 10px 80px 10px;background-size:100%}
.curriculum_01{background:url("../images/sub/con02_img01.png") no-repeat left top}
.curriculum_02{background:url("../images/sub/con02_img02.png") no-repeat left top}
.curriculum_03{background:url("../images/sub/con02_img03.png") no-repeat left top}
.curriculum_04{background:url("../images/sub/con02_img04.png") no-repeat left top}
.curriculum_05{background:url("../images/sub/con02_img05.png") no-repeat left top}
.curriculum_06{background:url("../images/sub/con02_img06.png") no-repeat left top}
.curriculum_07{background:url("../images/sub/con02_img07.png") no-repeat left top}
.curriculum_08{background:url("../images/sub/con02_img08.png") no-repeat left top}
.curriculum_09{background:url("../images/sub/con02_img09.png") no-repeat left top}
.curriculum_10{background:url("../images/sub/con02_img10.png") no-repeat left top}
.curriculum_11{background:url("../images/sub/con02_img11.png") no-repeat left top}
.curriculum_12{background:url("../images/sub/con02_img12.png") no-repeat left top}
.curri_box{width:320px;height:290px;background:#fff;padding:40px 30px 0 0;box-sizing:border-box;margin-top:420px;position:relative;word-break:break-word}
.curri_box .btn_cart{position:absolute;top:40px;right:30px}
.curri_box .btn_cart a{display:inline-block;background:url("../images/sub/con02_icon_cart.png") no-repeat center center #45b0cf;width:50px;height:50px;border-radius:100%}
.curri_box .btn_cart a:hover{background-color:#1ea3c9}
.curri_box dl dt{font-size:2rem;font-weight:700;margin-bottom:30px}
.curri_box dl .curri_box_title{font-size:2rem;font-weight:500;letter-spacing:-0.1rem;margin-bottom:30px;color:#333}
.curri_box dl dd{color:#555;line-height:1.5rem;white-space:normal}

/* REGISTRATION */
.con03_visual{background:url("../images/sub/con03_visual.png") no-repeat center}
.con03_visual .txt_box{width:45%;left:42%}
.con03_visual .slogan{font-size:2.9vw;color:#4e4e4e}
.container.clause_page h3{font-size:3vw;text-align:center;width:100%;margin-bottom:50px}
.step_select{text-align:center;padding-bottom:80px!important}
.step_txt{font-size:1.5rem;margin-bottom:30px}

.step_box{border:1px solid #e3e3e3;width:30%;padding:50px;box-sizing:border-box;display:inline-block}
.step_box:hover{border:1px solid #383fe7}
.step_box > span{display:inline-block;width:100%;text-align:center;margin-bottom:20px}
.step_box .step{
  background:#383fe7;
  color:#fff;
  font-weight:700;
  font-size:1rem;
  width:auto;
  padding:10px 20px;
  box-sizing:border-box;
  border-radius:30px
}
.step_box p{font-size:1.6rem;margin-bottom:20px}

.step_arrow{
  display:inline-block;
  width:50px;
  height:50px;
  background:transparent;
  border:1px solid #383fe7;
  border-radius:100%;
  position:relative
}
.step_arrow:hover{background:#383fe7}
.step_arrow span{
  position:absolute;
  width:20px;
  top:50%;
  right:15px;
  margin:0;
  padding:0;
  background:transparent;
  border-top:1px solid #383fe7
}
.step_arrow span::before{
  content:"";
  position:absolute;
  top:-1px;
  right:0;
  width:15px;
  border-top:1px solid #383fe7;
  transform-origin:right;
  transform:rotate(45deg)
}
.step_arrow span::after{
  content:"";
  position:absolute;
  top:-1px;
  right:0;
  width:15px;
  border-top:1px solid #383fe7;
  transform-origin:right;
  transform:rotate(-45deg)
}
.step_arrow:hover span{
  position:absolute;
  width:20px;
  top:50%;
  right:15px;
  margin:0;
  padding:0;
  background:transparent;
  border-top:1px solid #fff
}
.step_arrow:hover span::before{
  content:"";
  position:absolute;
  top:-1px;
  right:0;
  width:15px;
  border-top:1px solid #fff;
  transform-origin:right;
  transform:rotate(45deg)
}
.step_arrow:hover span::after{
  content:"";
  position:absolute;
  top:-1px;
  right:0;
  width:15px;
  border-top:1px solid #fff;
  transform-origin:right;
  transform:rotate(-45deg)
}

.back_gray{background:#f7f7f7}
.step_area{width:100%;padding:80px 0;text-align:center}
.step_area .step_num{font-size:1rem;color:#383fe7;font-weight:700}
.step_area h4{font-size:1.8rem;font-weight:500;margin-bottom:30px}
.step_area p{font-size:1.2rem;color:#555;margin-bottom:50px}
.step_area ul{margin-bottom:50px}
.step_area ul li{
  background:url("../images/sub/con03_step_bg.png") no-repeat right center;
  display:inline-block;
  width:24%;
  padding:10px 35px 10px 0;
  color:#555;
  box-sizing:border-box
}
.step_area ul li:last-child{background:none}
.step_area .btn_application{background:#fff;border:1px solid #383fe7;border-radius:30px;display:inline-block;width:auto;padding:10px 25px}
.step_area .btn_application a{font-size:1.1rem;color:#383fe7;font-weight:500}
.step_area .btn_application:hover{background:#383fe7}
.step_area .btn_application:hover a{color:#fff}
.form_application{background:#f4f4f4;width:100%;padding:30px 20px;box-sizing:border-box}
.form_application > div{display:inline-block;text-align:left;margin-right:20px}
.form_application > div:nth-child(3){width:30%}
.form_application > div span{display:inline-block;margin-right:10px;margin-bottom:5px;color:#555;font-size:1.1rem}
.form_application > div input,
.form_application > div select{background:#fff;border:1px solid #e3e3e3;border-radius:0;width:190px;height:40px;box-sizing:border-box}
.form_application .btn_application{background:#383fe7}
.form_application .btn_application a{color:#fff}
.step_area .customer_box{background:#fff;width:auto;display:inline-block;margin-top:0}
.step_area .customer_box ol li{width:33%}

/* 이용약관, 개인정보취급방 */
.clause_page{margin-top:150px}
.clause_box{width:1200px;margin:0 auto}
.clause_box > h1{font-size:1.5rem;font-weight:700;margin:80px 0 30px 0;border-bottom:1px solid #e3e3e3;padding-bottom:20px}
.clause_box p{line-height:1.8rem;color:#555;font-size:1rem}
.clause_list{border:1px solid #e3e3e3;width:100%;padding:30px 30px 20px 30px;box-sizing:border-box}
.clause_list h1{font-size:1rem;display:inline-block;margin-right:20px;margin-bottom:10px;width:45%}
.clause_list h1::before{content:"\203B";padding-right:5px}
.clause_box > h2{font-size:1.2rem;font-weight:500;margin:30px 0}
.clause_box .gray_box{background:#f7f7f7;padding:20px;width:100%;box-sizing:border-box;margin:20px 0}
.clause_box .gray_box p{font-size:0.9rem}

@media all and (min-width:1921px){
  .visual .slogan{font-size:3.51rem}
  .visual .visual_txt{font-size:2.42rem}
}

@media all and (max-width:1200px){
  .perfect_customer{width:100%;padding:100px 30px 0 30px;box-sizing:border-box}
  .visual{position:relative;background-size:100% 100%}

  .con_1200{width:100%;padding:0;box-sizing:border-box}
  .curri_box{width:300px}

  .step_box{padding:30px 10px}
  .form_application div > span{width:100%;margin-right:0;margin-bottom:5px}
  .form_application div input,
  .form_application div select{width:100%}
}

@media all and (max-width:1050px){
  .curri_con{width:47%;background-size:100%}
  .curri_box{width:90%}

  .con_1200 h3, .container h3{font-size:4vw}
}

@media all and (max-width:1026px){
  .step_area .customer_box{background:none}
  .step_area .customer_box ol{width:100%}
  .step_area .customer_box ol li{background:#fff;width:30%}

  .bottom{padding-bottom:0}
}

@media all and (max-width:1024px){
  .swipe .btn-right{font-size:2rem}
  .btn-right .arrow-right{width:20px;height:20px}

  .visual{height:90vh;background-size:cover!important}
  .con01_visual{background:url("../images/sub/m_con01_visual.png") no-repeat center}
  .con02_visual{background:url("../images/sub/m_con02_visual.png") no-repeat center}
  .con03_visual{background:url("../images/sub/m_con03_visual.png") no-repeat center}
  .con01_visual .txt_box{width:42%;left:50%}
  .con02_visual .txt_box{width:50%;left:45%}
  .con03_visual .txt_box{width:52%;left:45%;top:18%}
  .con02_visual .txt_box .slogan{font-size:4.5vw}
  .con02_visual .txt_box .visual_txt{font-size:3.2vw}
  .con03_visual .txt_box .slogan{font-size:3.5vw;line-height:1.1}
  .visual .visual_txt span img{width:41%}

  .customer_box{margin-top:40px;border:none;text-align:center;display:inline-block}
  .customer_box ol{display:inline-block}
  .customer_box ol li{border:1px solid #e3e3e3;width:30%;margin:5px}
  .customer_box ol li:last-child{border-right:1px solid #e3e3e3}
}

@media all and (max-width:960px){
  .form_application div:nth-child(1),
  .form_application div:nth-child(2),
  .form_application div:nth-child(3){width:30%}
  .form_application div:last-child{margin-top:20px}

  .con_1200 h3{margin-top:50px}
  .step_block{display:block}
  .step_block_2{padding-top:10px}
  .step_area:last-child{padding-bottom:50px}
  #dvLecture .curri_box > dl{padding-left:10px}
}

@media all and (max-width:920px){
  .study_btn button{width:110px;font-size:0.5rem;height:35px}
  .study_btn button span{width:10px;right:15px}
  .study_btn button span::before{width:8px}
  .study_btn button span::after{width:8px}

  .visual{margin-top:51px;height:80vh}
  .visual .txt_box{width:57%;left:39%;top:18%;text-align:right}
  .visual .txt_box .visual_txt{line-height:1.3}

  .cart_layer{height:240px;padding-bottom:0;overflow-y:hidden}
  .cart_layer .con_1200{width:100%;white-space:normal;word-break:break-word;padding-top:20px}
  .cart_layer .btn_application_m{
    display:block;
    position:fixed;
    float:none;
    width:100%;
    height:60px;
    bottom:0;
    margin-right:0;
    border-radius:0;
    background:#ffe400;
    color:#333;
    font-weight:500;
    font-size:1.2rem
  }

  .cart_area .s_txt{font-size:0.9rem}
  .cart_area .cart_list ul li{padding:10px 25px 10px 10px}
  .cart_area .cart_list ul li span{margin-left:-4px}

  .cart_area,
  .form_area{width:100%;float:none;margin-top:-25px}
  .form_area{width:87%;position:fixed;bottom:80px}
  .form_area.form-submit{height:1px;bottom:132px;margin-top:0}
  .form_area .cart_title{display:none}
  .form_area .input_area{width:100%;float:none;padding-right:30px;box-sizing:border-box;display:flex;overflow:hidden}
  .form_area .btn_application{display:none}
  .form_area .input_area .input_type{padding:11px}
  .form_area .width10p{width:10%;display:inline-block}
  .form_area .input_name{width:40%;display:inline-block}
  .form_area .input_phone{width:50%;display:inline-block}

  .step_txt{font-size:1rem}
  .step_box{width:100%;text-align:left;padding:20px 50px;position:relative;height:175px;box-sizing:border-box}
  .step_box > span{text-align:left}
  .step_box .step{position:absolute;left:170px;top:45px;font-size:0.6rem}
  .step_box .step_icon{position:absolute;top:50%;left:50px;transform:translateY(-50%);width:auto}
  .step_box p{position:absolute;left:170px;bottom:35px;font-size:1.2rem}
  .step_box .step_arrow{position:absolute;top:50%;right:50px;transform:translateY(-50%)}

  .step_area ul li{width:30%}
  .step_area p{font-size:1rem}
}

@media all and (max-width:890px){
  .curri_box{margin-top:350px}
}

@media all and (max-width:780px){
  .con01_visual .slogan,
  .con03_visual .slogan{font-size:4vw!important}

  .form_application div:nth-child(1),
  .form_application div:nth-child(2),
  .form_application div:nth-child(3){width:28%}
  .form_application div:last-child{margin-top:20px}

  /*.step_area .customer_box ol li{width:30%}*/
}

@media all and (max-width:790px){
  .perfect_list ol li{width:100%;float:none}
  .customer_title{font-size:5rem;line-height:6rem}
  .customer_list ul li{width:50%;display:inline-block;padding:0 30px 100px 30px;box-sizing:border-box}
}

@media all and (max-width:768px){
  .content-title{font-size:13vw;line-height:1.2}
  .content-subtitle{font-size:5vw;margin-top:10px}

  .customer_title{font-size:4rem;line-height:5rem}
  .customer_txt01{font-size:2rem}
  .customer_txt02{font-size:1.5rem}

  .visual .visual_txt{font-size:2.5vw}
  .visual .visual_txt span img{width:35%}

  .clause_list h1{width:100%}
}

@media all and (max-width:730px){
  .curri_box{margin-top:280px}
}

@media all and (max-width:726px){
  .curri_con{width:100%;margin:0 0 10px 0;background-size:100%!important}
  .curriculum_01{background:url("../images/sub/m_con02_img01.png") no-repeat left top}
  .curriculum_02{background:url("../images/sub/m_con02_img02.png") no-repeat left top}
  .curriculum_03{background:url("../images/sub/m_con02_img03.png") no-repeat left top}
  .curriculum_04{background:url("../images/sub/m_con02_img04.png") no-repeat left top}
  .curriculum_05{background:url("../images/sub/m_con02_img05.png") no-repeat left top}
  .curriculum_06{background:url("../images/sub/m_con02_img06.png") no-repeat left top}
  .curriculum_07{background:url("../images/sub/m_con02_img07.png") no-repeat left top}
  .curriculum_08{background:url("../images/sub/m_con02_img08.png") no-repeat left top}
  .curriculum_09{background:url("../images/sub/m_con02_img09.png") no-repeat left top}
  .curriculum_10{background:url("../images/sub/m_con02_img10.png") no-repeat left top}
  .curriculum_11{background:url("../images/sub/m_con02_img11.png") no-repeat left top}
  .curriculum_12{background:url("../images/sub/m_con02_img12.png") no-repeat left top}
  .customer_txt03{font-size:1rem}

  .curri_box .btn_cart{top:30px}
  .curri_box .btn_cart a{background:url("../images/sub/m_con02_icon_cart.png") no-repeat center center #45b0cf;width:60px;height:60px;background-size:55%}
  .curri_box{margin-top:230px}
  .visual .txt_box{width:59%;left:37%;text-align:right}
}

@media all and (max-width:720px){
  .customer_box ol li{width:45%}
  .con_1200 h3, .container h3{font-size:5vw}
}

@media all and (max-width:650px){
  .con03_visual .txt_box .slogan{font-size:4.5vw!important;line-height:1.1}

  .tracking-in-expand{width:80px;height:80px}
  .visual .txt_box .visual_logo{margin-bottom:10px}
  .visual .txt_box .visual_logo img{width:70%}
  /*.visual .slogan{font-size:6vw}
  .visual .visual_txt{font-size:3vw}*/

  .mobile-no-padding{padding-bottom:0!important}
  .step_area:last-child{padding-bottom:10px}
  .customer_box{width:100%!important}
  .customer_list{margin-top:50px}
  .customer_list ul li{width:100%;padding:0 0 50px 0}

  .customer_title{font-size:3rem;line-height:4rem}
  .customer_txt01{font-size:1.8rem}
  .customer_txt02{font-size:1.2rem}

  .form_application div:nth-child(1),
  .form_application div:nth-child(2),
  .form_application div:nth-child(3){width:100%;margin-right:0}
  .form_application div:nth-child(2),
  .form_application div:nth-child(3){margin-top:20px}
}

@media all and (max-width:575px){
  .visual{height:42vh}
  .txt_box{width:60%}

  .perfect_list ol li{padding:0 10px}

  .customer_title{font-size:2rem;line-height:3rem}
  .customer_txt01{font-size:1.5rem}

  .step_area .customer_box ol li .box_icon,
  .customer_box ol li .box_icon{padding-top:0}
  .step_area .customer_box ol li,
  .customer_box ol li{width:46%;height:1px;padding-bottom:45.7%;margin:10px 5px;position:relative}
  .customer_box ol li:after{content:"";padding-bottom:100%;display:block}
  .customer_box ol li .icon-wapper{top:0;bottom:0;left:0;right:0;position:absolute}
  .customer_box ol li .icon-table{width:100%;height:100%;display:table}
  .customer_box ol li .icon-table-cell{vertical-align:middle;display:table-cell}

  .customer_box .list-wapper{width:46%}

  .con_1200 h3, .container h3{font-size:6vw}
  .curri_box{margin-top:170px}
}

@media all and (max-width:500px){
  .step_box .step{left:130px}
  .step_box .step_icon{left:30px}
  .step_box p{left:130px}
  .step_box .step_arrow{right:30px}
  .step_arrow{width:40px;height:40px}
  .step_arrow span{width:15px;right:12px}
  .step_arrow span::before{width:10px}
  .step_arrow span::after{width:10px}
  .step_arrow:hover span{width:15px}
  .step_arrow:hover span::before{width:10px}
  .step_arrow:hover span::after{width:10px}
}

@media all and (max-width:470px){
  .visual .slogan{font-size:7vw}
  .con01_visual .slogan,
  .con03_visual .slogan{font-size:4.5vw!important;line-height:1.3}
  .curri_con{background-size:100%!important}
  .curriculum_01{background:url("../images/sub/con02_img01.png") no-repeat left top}
  .curriculum_02{background:url("../images/sub/con02_img02.png") no-repeat left top}
  .curriculum_03{background:url("../images/sub/con02_img03.png") no-repeat left top}
  .curriculum_04{background:url("../images/sub/con02_img04.png") no-repeat left top}
  .curriculum_05{background:url("../images/sub/con02_img05.png") no-repeat left top}
  .curriculum_06{background:url("../images/sub/con02_img06.png") no-repeat left top}
  .curriculum_07{background:url("../images/sub/con02_img07.png") no-repeat left top}
  .curriculum_08{background:url("../images/sub/con02_img08.png") no-repeat left top}
  .curriculum_09{background:url("../images/sub/con02_img09.png") no-repeat left top}
  .curriculum_10{background:url("../images/sub/con02_img10.png") no-repeat left top}
  .curriculum_11{background:url("../images/sub/con02_img11.png") no-repeat left top}
  .curriculum_12{background:url("../images/sub/con02_img12.png") no-repeat left top}
  .curri_box{margin-top:400px}

  .step_area ul li{
    width:100%;
    background:url("../images/sub/con03_step_bg02.png") no-repeat center bottom;
    padding:0 0 40px 0;
    margin-top:20px
  }
  .step_area ul li:first-child{margin-top:0}
  .step_area ul li:last-child{padding-bottom:0}
  .visual .visual_txt{margin-top:12px}
  .visual .txt_box .visual_logo img{width:45%}
}

@media all and (max-width:440px){
  .step_box .step{left:32%;top:50px}
  .step_box .step_icon{left:30px;width:18%}
  .step_box .step_icon img{width:100%}
  .step_box p{left:32%}
  .step_box .step_arrow{right:30px}
  .perfect_customer{padding:100px 3px 0 10px}
}

@media all and (max-width:420px){
  /*.step_area .customer_box ol li{width:46%;margin:5px 0}*/
}

@media all and (max-width:414px){
  .swipe .btn-right{font-size:1rem}
  .btn-right .arrow-right{width:10px;height:10px}

  .curri_box{margin-top:300px}
  .curri_box dl dt{font-size:1.8rem}
  .curri_box dl .curri_box_title{font-size:1.8rem}

  .step_box{height:130px}
  .step_box .step{left:30px;top:30px}
  .step_box .step_icon{display:none}
  .step_box p{left:30px;bottom:10px}
}

@media all and (max-width:375px){
  .visual{height:42vh}
  .con_1200 h3, .container h3{font-size:8vw}
}
@media all and (max-width:360px){
}
@media all and (max-width:320px){
  .content-title{font-size:3rem}
  /*.customer_box ol li{width:100%;margin:5px 0}
  .perfect_customer{padding:100px 10px 0}*/
}
