@charset "UTF-8";
@import url('//fonts.googleapis.com/css?family=Roboto:400,300,200,500,700');
/* thin 100, light 300, regular 400, medium 500, bold 700 */
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
/* thin 100, light 300, regular 400, medium 500, bold 700 */




* {margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-decoration: none; }
html, body {
    font-family: 'notosanskr', '-apple-system', "droid sans fallback", "Apple SD Gothic Neo", 'AppleGothic', "Malgun Gothic", "맑은 고딕", 'Dotum', '돋움', sans-serif;
    font-weight: 100;
    color: rgb(0, 0, 0);
    line-height: 1.5;
    letter-spacing: -0.02em;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;

}

.footercopy {
    margin-top: 5px;
    font-size: 11px;
    color: #696a6c;
    font-family: 'Roboto';
    font-weight: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}
.inner_box_arrow {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
  }
.area_sns {
    display: inline-flex;
}
.area_sns a img {
  display:block;
  width: 30px;
}
select {
  -moz-appearance: none;
  -webkit-appearance: none
}

/*for IE10*/
select::-ms-expand {
  display: none
}

a{color:#000;text-decoration:none; }
a:hover{color:#3617CE; }
a:active{color:#3617CE; }
a:focus{color:#3617CE;}
body {width: 100%; height:100%; background: #ffffff; overflow-y:auto; overflow-x:hidden; font-family: 'notosanskr';}
#wrap{min-height:calc(100vh - 150px);}
.menu{height:100px; width:100%; background: #ffffff; display: block;}
.top_menu{width:1200px; margin:0 auto; justify-content: center;}
.logo{padding-top: 30px; float:left; }
.logo img{width:45%}
.menu_1{float:inline-end;  display: inline-flex; padding-top: 40px; padding-right: 50px;  font-weight: 400; font-size: 18px;}
.title{width:1200px; text-align: center; font-size:2.2em; font-weight: 700; padding-top: 20px; line-height: 1.4em; letter-spacing: -0.8px; margin:0 auto; justify-content: center;}
.title_img{margin:0 auto;  margin:0 auto; justify-content: center; text-align: center;}
.title_img img{width:55%; margin:0 auto;}
.title2{width:1200px; text-align: center; font-size: 2.2em; font-weight: 700; padding-top: 20px; line-height: 1.4em; letter-spacing: -0.8px; margin:0 auto; justify-content: center; margin-top: 40px; }
.s_txt{width:1200px;  font-size: 1.2em; font-weight: 200;  line-height: 1.6em; padding-top: 5px; color:#666; margin:0 auto; justify-content: center; text-align: center;}
.s_txt2{width:1200px;  font-size: 1.2em; font-weight: 200;  line-height: 1.6em; padding-top: 5px; padding-bottom: 20px; color:#666; margin:0 auto; justify-content: center; text-align: center;}







/* 푸터 */
.bottom_txt{float: right; font-family: 'notosanskr'; font-size: 0.8em; font-weight: 400; padding: 30px 0; }
.bottom_link{line-height: 2em; padding-right: 20px; font-weight: 400; }
.bottom_link a{color:#000; text-decoration: none;}
div#footer {
    background-color: #f5f5f6;
}
.footer {
    padding: 0 24px;
    font-family: 'notosanskr';
    left:0px;
    bottom:0px;
    width:100%;
    height:120px;
    z-index: 99;
  }

  .footer .inner_footer {
    max-width: 1000px;
    margin: 15px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
  }

.footer .area_select {
  /* padding-top: 24px;
  margin: 0 -6px 8px */
}

.footer .area_select:after {
  content: '';
  display: block;
  clear: both;
  
}

.footer .area_select .box_select {
  /* float: left;
  width: 50% */
}


  .footer .inner_footer:after {
    /* content: '';
    display: block;
    clear: both */
  }

  .footer .area_select {
    margin-top: -30px;
  }

  .footer .area_select .area-wrap{
    display:flex;
    justify-content: flex-end;
    gap:10px;
  }

  .footer .area_select .box_select {
    /* width: 160px; */
    width: 135px;
    display: inline-block;
  }

  .footer .area_address {
    /* float: left;
    padding: 41px 0 45px; */
    padding-top: 10px;
    padding-left:60px;
    width:200px;
  }




.footer .area_address .area_sns .link_sns:first-child {
    margin-left: 0;
}

.footer .area_address .area_sns .link_sns:last-child {
    margin-right: 0;
}
.footer .area_select .inner_box {
  position: relative;
  height: 40px;
  margin: 0 0px;
  border: 1px solid rgba(0, 0, 0, 0.15)
}

.footer .area_select .inner_box:before {
  content: '';
  position: absolute;
  top: 15px;
  right: 16px;
  border: 4px solid #b9b9b9;
  border-top-width: 5px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent
}
.footer .area_select .box_select .opt_select {
  width: 100%;
  height: 100%;
  padding-left: 12px;
  border: 0 none;
  background: #fff;
  font-size: 13px;
  color: #b9b9b9;
  cursor: pointer;
}
.footer .area_address {
  /* padding-top: 12px;
  padding-bottom: 24px */
}

.footer .area_address .box_address {
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
	/* margin: 6px 0 32px 0; */
}

.footer .area_address .box_address .footer_logo {
  /* display: inline-block;
  height: 25px;
  margin-right: 4px;
  vertical-align: bottom; */
}

.footer .area_address .info_link {
  /* margin: 4px 0 0 0; */
}

.footer .area_address .info_link .link_info {
  margin-left: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #858585;
  text-decoration: none
}




/* 메인 */
.main { background-image: url(../img/main_bg.png); height:547px; }
.main_img{width:1200px; margin:0 auto; height:547px}
.main_txt{width:1200px; margin:0 auto;  text-align: left;  font-weight:700; font-size: 46px; line-height: 1.5em; color:#fff; padding: 140px 20px 0 40px;}
.main p{font-size: 16px; text-align: left;    line-height: 1.9em; padding-top: 20px; font-weight:200; color:#fff; }
.block { background-color: #f5f5f7;}
.distinct {display: flex; gap: 5px; justify-content: center; align-items: center; flex-wrap: wrap; width:1080px; margin:0 auto; padding: 80px 20px;}
.box {position: relative; width: 300px; height: 280px; background: #ffffff; border-radius: 10px; overflow: hidden; text-align: center; margin: 20px; padding: 30px;  }
.box::before {content: ''; position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%); width: 0; height: 0; background: #fce5f2; border-radius: 50%; transition: 0.5s, top 0s, left 0s;}
.box:hover::before {width: 1000px; height: 1000px;}
.box h3{font-size: 2.4em; line-height: 30px; font-weight: 400;}
.box:hover  {opacity: 1; }
.box img {position: relative; z-index: 98;}
.box .content {position: relative;   z-index: 99; transition: 0.5s; }
.box .content h3 {font-size: 1.2em; font-weight: 400; letter-spacing: 1px; margin-top: 20px; line-height: 40px; letter-spacing: -1px;}
.box .content p {overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical;  font-size: 0.9em;  font-weight: 200; letter-spacing: -0.2px; color:#666; line-height: 1.6em;}
.block_w { background-color: #fff;}
.setup{display: flex; gap: 5px; justify-content: center; align-items: center; flex-wrap: wrap; width:1080px; margin:0 auto; padding: 80px 20px;}
.setup img{margin-top:30px;}
.tt_txt{font-size: 0.8em; line-height: 1.8em; padding-top: 10px; font-weight:200; color:#666; letter-spacing: -0.2px;}
.setup button{background: #e6007e; border-radius: 30px;  color: #fff; border: 0; outline: 0; padding: 8px 25px; font-size: 1em; margin-right: 15px; cursor: pointer; letter-spacing: -1px;  }
.block_b { background-color: #2e2e6d; color:#fff}
.block_b img{padding: 0 30px;}

.contaiver {transform: scale(1); padding-top: 20px; }
.scroll {position: relative; display: flex; width: 1080px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);}
.scroll div {white-space: nowrap; animation: animate var(--t) linear infinite; animation-delay: calc(var(--t) * -1);}
.scroll div:nth-child(2) {animation: animate2 var(--t) linear infinite; animation-delay: calc(var(--t) / -2);}
.scroll div span {display: inline-flex; background: #333; border-radius: 5px; padding: 5px 10px; color: #fff; letter-spacing: 0.2em; text-transform: uppercase; margin: 10px; transition: 0.5s;}

.scroll div span:last-child {margin-right: 15px;}
.imgBx div img {scale: 0.8; width: 200px; height: 239px; background-size: cover; }
.imgBx div img:hover {filter: grayscale(0);}

@keyframes animate {
    0% {transform: translateX(100%);}
    100% {transform: translateX(-100%);}
}

@keyframes animate2 {
    0% {transform: translateX(0);}
    100% {transform: translateX(-200%);}
}





.ico_q {font-family:'SKTSansDisplay'; font-style:normal; font-weight:700; color:#3617cb; display:inline-block; margin-right:10px; }
.accordion {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  font-size:20px;
  background:#fff;
  border-bottom:1px solid #e2e2e2;
  font-weight: 400;
  font-family:'SKTSansText'; 
  line-height: 35px;
}
.active, .accordion:hover {
  background-color: #f5f5f7;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: 400;
  font-family: 'notosanskr';
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.faq_list .panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  }
.faq_list .panel p{font-size: 16px; font-weight: 400; line-height: 24px; padding: 20px; border-bottom:1px solid #e2e2e2; font-family:'SKTSansText'; }
.faq_list .panel .b_txt{color:#3617cb;}
.customer_box{padding:50px 50px 0 20px; color:#666; font-size: 1em; font-weight: 200;  font-family: 'notosanskr'; letter-spacing: -0.2px; width:100%; display: flex;}
.customer{ font-size: 20px; font-weight: 700; width:65%; float:left; color:#000; padding: 10px 0; line-height: 32px; }
.tel{ font-size: 34px;  font-weight: 700; padding: 10px 0 10px 0; color:#3617cb; font-family: 'Roboto';width:35%; float:right; line-height: 40px; }
.tel p{font-size: 14px; font-weight: 400;  font-family:'notosanskr'; line-height: 20px; color: #000; padding-top: 2px;}


.setup_box{width:990px; height:440px; border-radius: 10px; background-color: #fff; margin-top: 20px;position: relative; }
.card {position: relative; }
.content_card {position: relative; padding: 30px; display: flex; flex-direction: column; align-items: center; gap: 20px;}
.icon-box {width: 100%; display: flex; align-items: center; justify-content: space-around;}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {position: absolute; right: 280px;}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {position: absolute; left: 280px;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: -550px;}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {background: #3616ce;}

.customer_tel{width:990px;  position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 24px;}
.customer_tel_box{width:483px; border-radius: 10px; background-color: #f5f5f7; padding: 40px; height:220px}
.customer_tel_box p{color:#000; font-size: 18px; font-weight: 700; padding-bottom: 10px; }
.customer_tel_box .left_box{width:50%; float:left;  height:100px; text-align: left; }
.customer_tel_box .left_box p{font-size: 14px; font-weight: 400;  font-family:'notosanskr'; line-height: 28px;}
.customer_tel_box .left_box p.num{font-size: 34px; font-weight: 700; font-family: 'Roboto'; padding-top: 50px; color:#3515c4;}
.customer_tel_box .right_box{width:50%; float:left; padding-left: 20px; text-align: left; height:120px} 
.customer_tel_box .right_box p{font-size: 14px; font-weight: 400;  font-family:'notosanskr'; line-height: 28px;}
.customer_tel_box .right_box p.num{font-size: 34px; font-weight: 700; font-family: 'Roboto'; padding-top: 50px; color:#3515c4;}
.customer_tel_box .all_box{width:100%; float:left; text-align: left;}
.customer_tel_box .all_box p{font-size: 14px; font-weight: 400;  font-family:'notosanskr'; line-height: 28px;}
.customer_tel_box .all_box p.num{font-size: 34px; font-weight: 700; font-family: 'Roboto'; padding-top: 50px; color:#3515c4;}