/* header start */
/* top */
.top{position:fixed; top:0px; left:0; z-index:997; width:100%; height:80px; transition:all 0.5s;}
.top.on{background:#fff; border-bottom:1px solid #ccc;}
.top .menubtn{position:relative; float:right; width:63px; margin-top:16px;}
.top .menubtn ul{position:absolute; top:0; left:0; width:63px; height:50px; padding:4px 16px;}
.top .menubtn ul li{height:1px; margin:10px 0; background:#fff; transition:all 0.5s; transform-origin: left center;}
.top .menubtn ul li.on{background:#333;}
.top .menubtn ul li:nth-child(2){width:50%;}
.top .menubtn.on ul .bar_t{transform:rotate(45deg); opacity: 0;}
.top .menubtn.on ul .bar_m{width:0;}
.top .menubtn.on ul .bar_b{transform:rotate(-45deg); opacity: 0;}
.top .logo{padding-left:15px; padding-top:25px;}
.top .logo img{height:40px;}

/* sidemenu */
.menubox{position:fixed; top:0; left:-100%; z-index:998; width:100%; height:100%; transition:all 0.3s; background:#fff; overflow:auto;}
.menubox .logo{position: absolute; padding-left:15px; padding-top:25px; z-index: 999;}
.menubox .logo a{display: block; width:100%;}
.menubox .logo img{height:40px;}
.menubox.on{left:0; width:70%;}
.sidemenu_head{position:relative; padding:40px 16px 40px; margin-bottom:10px; background-color: #7733df;}
.sidemenu_head ul{position:absolute; top:15px; right:0; width:63px; height:50px; padding:4px 16px;}
.sidemenu_head ul li{height:1px; margin:10px 0; background:#fff; transition:all 0.5s; transform-origin: left center;}
.sidemenu_head ul .bar_t{transform:rotate(45deg);}
.sidemenu_head ul .bar_m{width:0;}
.sidemenu_head ul .bar_b{transform:rotate(-45deg);}
.sidemenu_head p:nth-of-type(1){font-size:30px; color:#000;}
.sidemenu_head p:nth-of-type(2){margin-top:10px; font-size:16px; color:#000;}
.sidemenu_body{padding:0 10px;}
.sidemenu_body .sidemenu{margin-bottom:5px;}
.sidemenu_body .sidemenu p{position:relative; padding:20px; font-size:16px; font-weight:700; color:#fff; background:#fff; border-bottom:1px solid #ccc;transition:all 0.5s;}
.sidemenu_body .sidemenu p:hover{opacity:1;}
.sidemenu_body .sidemenu p .arrow{position:absolute; top:19px; right:15px; width:15px; height:15px; background:url('../img/mplus.png') no-repeat center; transition:all 0.3s;}
.sidemenu_body .sidemenu p.open .arrow{transform:rotate(135deg);}
.sidemenu_body .sidemenu p a{color:#7733df; display: block;}
.sidemenu_body .sidemenu ul{display:none; padding:5px 0 20px; background:#fff;}
.sidemenu_body .sidemenu ul li{margin-bottom:5px;}
.sidemenu_body .sidemenu ul li a{display:block; padding:15px 35px; font-size:14px; font-weight:400; color:#333; border-bottom:1px solid #ddd;}
/* header end */

.visual{
  width:100%;
  height:450px;
}
.visual img{
  width:100%;
  height:450px;
  object-fit: cover;
}
.visual .typo{
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  left:0;
  width:100%;
  z-index: 99;
  text-align: left;
}

.visual .typo span{
  display:block;
  transition:all 1s ease-in-out;
  color:#fff;
  text-align: center;
  transition-delay:0s;
  color:#fff;
  font-size:20px;
  line-height: 36px;
  font-weight: 600;
}

.visual .swiper-slide > img{width:100%; transform:scale(1.2); transition:all 5s ease;}
.visual .swiper-slide.swiper-slide-active > img.zoom{transform:scale(1);}

.visual .mySwiper .swiper-wrapper .swiper-slide.swiper-slide-active span{animation:bounceInUp 1s .2s both;}



/* image_show_wrap 공통 */
section .image_show_wrap,
section .image_show_wrap2{position: relative; top: 0px; left: 0%; width: 100%;}
section .image_show_wrap{overflow: hidden; animation-duration: 1.4s;}
section .image_show_wrap2{animation-duration: 1.4s;}
section .show_img01{animation-name: show_img01;}
@keyframes show_img01{0%{opacity: 0; transform: translate3d(-100%, 0, 0);}}
section .show_img02{animation-name: show_img02;}
@keyframes show_img02{0%{opacity: 0; transform: translate3d(100%, 0, 0);}}
section .show_img03{animation-name: show_img03;}
@keyframes show_img03{0%{opacity: 0; transform: translate3d(100%, 0, 0);}}
section .show_img04{animation-name: show_img04;}
@keyframes show_img04{0%{opacity: 0; transform: translate3d(-100%, 0, 0);}}
section .show_img05{animation-name: show_img05;}
@keyframes show_img05{0%{opacity: 0; transform: translate3d(0, 100%, 0);}}
section .show_img06{animation-name: show_img06;}
@keyframes show_img06{0%{opacity: 0; transform: translate3d(0, -100%, 0);}}
/* image_show_wrap 공통 */

/* image 확대 공통 */
.clip-animation {
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  animation: clipExpand 1s cubic-bezier(0.770, 0.000, 0.175, 1.000) forwards;
}
@keyframes clipExpand {
  from {
      clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }
  to {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
/* image 확대 공통 */



/* button */
.buttom{
  padding: 10px 50px 10px 25px;
  display: inline-block;
  overflow: hidden;
  color: #fff;
  font-size: 18px;
  text-align: center;
  position: relative;
  border: 1px solid #ccc;
  transition: all .3s ease-in-out;
  background-color: #363e44;
  z-index: 1;
}
.buttom:hover{background-color: #0064b1; color:#fff;}
.buttom::before{
  content: '>';
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  right:20px;
  font-size:18px;
  color:#fff;
  transition: all .3s ease-in-out;
  z-index: 1;
}
.buttom::after{
  content: '';
  position: absolute;
  top:0;
  left:0;
  width:0;
  height:100%;
  background-color: #0064b1;
  z-index: -1;
  transition: all .3s ease-in-out;
}
.buttom:hover::after{width:100%;}
.buttom:hover::before{right:15px;}
.buttom span {position: absolute;}
.buttom span:nth-child(1) {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 1px;
  background: linear-gradient(to left, rgba(43, 8, 8, 0), #fff);
  animation: 2s animateTop linear infinite;
}
@keyframes animateTop {
  0% {transform: translateX(100%);}
  100% {transform: translateX(-100%);}
}

.buttom span:nth-child(2) {
  top: 0px;
  right: 0px;
  height: 100%;
  width: 1px;
  background: linear-gradient(to top, rgba(43, 8, 8, 0), #fff);
  animation: 2s animateRight linear -1s infinite;
}
@keyframes animateRight {
  0% {transform: translateY(100%);}
  100% {transform: translateY(-100%);}
}

.buttom span:nth-child(3) {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, rgba(43, 8, 8, 0), #fff);
  animation: 2s animateBottom linear infinite;
}
@keyframes animateBottom {
  0% {transform: translateX(-100%);}
  100% {transform: translateX(100%);}
}

.buttom span:nth-child(4) {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 1px;
  background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #fff);
  animation: 2s animateLeft linear -1s infinite;
}
@keyframes animateLeft {
  0% {transform: translateY(-100%);}
  100% {transform: translateY(100%);}
}
/* button */
/* ------------------------------------- section ------------------------------------- */
.e-commerce {
  position: relative;
  padding: 60px 0;
  background-color: #fbfbfb;
  overflow: hidden;
}
.e-commerce h2 {
  font-size: 32px;
  color: #363e44;
  text-align: center;
}
.e-commerce .inner > p {
  font-size: 18px;
  font-weight: 600;
  line-height: 48px;
  color: #860889;
  text-align: center;
  margin-top: 10px;
}

.e-commerce .list {
  margin-top: 30px;
}
.e-commerce .list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}
.e-commerce .list ul li {
  width: 48.5%;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  margin-bottom: 30px;
}
.e-commerce .list ul li a {
  position: relative;
  display: block;
  width: 100%;
  transition: box-shadow 0.3s, transform 0.3s;
  outline: 0;
}
.e-commerce .list ul li a:before,
.e-commerce .list ul li a:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  background-color: transparent;
  border: solid 5px #666ce1;
  z-index: 50;
}
.e-commerce .list ul li a:before {
  top: 0px;
  left: -5px;
  border-bottom: 0;
  border-left: 0;
  transition: opacity 0s 0.4s, width 0.2s 0.2s, height 0.2s 0s;
}
.e-commerce .list ul li a:after {
  bottom: 0px;
  right: -4px;
  border-right: 0;
  border-top: 0;
  transition: opacity 0s 0.4s, width 0.2s 0.2s, height 0.2s 0s;
}
.e-commerce .list ul li:hover a:before,
.e-commerce .list ul li:hover a:after {
  width: 100%;
  height: 100%;
  opacity: 1;
}
.e-commerce .list ul li:hover a:before {
  transition: opacity 0s 0s, width 0.2s 0s, height 0.2s 0.2s;
}
.e-commerce .list ul li:hover a:after {
  transition: opacity 0s 0s, width 0.2s 0s, height 0.2s 0.2s;
}
.e-commerce .list ul li:hover {
  box-shadow: 0px 10px 13px -7px rgba(0, 0, 0, 0.5);
  transform: translateY(-1.25rem);
}
.e-commerce .list ul li:hover .img img {
  transform: scale(1.1);
  opacity: 0.8;
}

.e-commerce .list ul li .img {
  overflow: hidden;
  background-color: #000;
}
.e-commerce .list ul li .img img {
  transition: all 0.3s ease-in-out;
}
.e-commerce .list ul li .tit {
  padding: 20px;
  background-color: #fff;
}
.e-commerce .list ul li .tit p {
  font-size: 16px;
  color: #666ce1;
  text-align: center;
  line-height: 30px;
  font-weight: 600;
}


.event {
  padding: 60px 0;
}
.event h2 {
  font-size: 32px;
  color: #363e44;
  text-align: center;
}
.event .inner > p {
  font-size: 18px;
  font-weight: 600;
  line-height: 48px;
  color: #860889;
  text-align: center;
  margin-top: 10px;
}

.event .detail {
  margin-top: 30px;
}
.event .detail ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.event .detail ul li{position: relative; width:50%;}
.event .detail ul li .tit .icon {
  width: 100%;
  padding: 40px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.event .detail ul li .tit .txt h3{
  font-size:20px;
  color:#000;
  text-align: center;
  padding:10px 0;
  margin-bottom:20px;
}


.event .detail .connection{
  text-align: center;
  position: relative;
  transition: all .3s ease-in-out;
  border-radius: 10px;
  overflow: hidden;
}
.event .detail .connection a{
  display: block;
  border:1px solid #ccc;
  padding:60px 0;
  border-radius: 10px;
  transition: box-shadow 0.3s, transform 0.3s;
  outline: 0;
  position: relative;
  transition: all .3s ease-in-out;
}

.event .detail .connection a:before,
.event .detail .connection a:after {
content: "";
position: absolute;
width: 0;
height: 0;
opacity: 0;
background-color: transparent;
border: solid 5px #666ce1;
border-radius: 10px;
z-index: 50;
}
.event .detail .connection a:before {
top: 0px;
left: -3px;
border-bottom: 0;
border-left: 0;
transition: opacity 0s 0.4s, width 0.2s 0.2s, height 0.2s 0s;
}
.event .detail .connection a:after {
bottom: 0px;
right: -3px;
border-right: 0;
border-top: 0;
transition: opacity 0s 0.4s, width 0.2s 0.2s, height 0.2s 0s;
}
.event .detail .connection:hover a:before,
.event .detail .connection:hover a:after {
width: 100%;
height: 100%;
opacity: 1;
}
.event .detail .connection:hover a:before {
transition: opacity 0s 0s, width 0.2s 0s, height 0.2s 0.2s;
}
.event .detail .connection:hover a:after {
transition: opacity 0s 0s, width 0.2s 0s, height 0.2s 0.2s;
}
.event .detail .connection:hover {
box-shadow: 0px 10px 13px -7px rgba(0, 0, 0, 0.5);
transform: translateY(-1.25rem);
}

.event .detail .connection a p{
  font-size:24px;
  color:#333;
  font-weight: 600;
  text-align: center;
  margin-top:30px;
}
.event .detail .connection a span{
  display: block;
  position: absolute;
  bottom:10px;
  left:50%;
  transform: translateX(-50%);
  font-size:32px;
  color:#0064b1;
  text-align: center;
  transition: all .3s ease-in-out;
}
.event .detail .connection a:hover span{left:52%;}

/* form */
.footer_form{
  position: fixed;
  bottom:0;
  left:50%;
  transform: translateX(-50%);
  z-index: 99;
  width:100%;
  max-width:800px;
  transition: all .3s ease-in-out;
}
.footer_form ul{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
}
.footer_form ul li{width:25%; height:100%;}
.footer_form ul li:nth-of-type(1){background-color: #7733df;}
.footer_form ul li:nth-of-type(2){background-color: #676ce2;}
.footer_form ul li:nth-of-type(3){background-color: #6288eb;}
.footer_form ul li:nth-of-type(4){background-color: #63a4f6;}

.footer_form ul li a{display: block;}
.footer_form ul li a p{
  font-size:14px;
  color:#fff;
  text-align: center;
  padding:5px 0;
}
.footer_form ul li a p strong{
  font-size:14px;
  color:#fff;
}

.consult_form {position: fixed; bottom: 30px; left: -100%; z-index: 99; border-radius: 15px; padding: 15px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5); transition: .5s; width: 95%; background: #fff;}
.consult_form.on {left: 50%; transform: translateX(-50%); right: auto;}
.consult_form .form_close_btn {position: absolute; width: 20px; height: 20px; right: 30px; top: 30px; cursor: pointer; z-index: 999;}
.consult_form .form_close_btn div {transform-origin: center;}
.consult_form .form_close_btn div:nth-of-type(1) {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-45deg); width: 2px; height: 100%; background: #333;}
.consult_form .form_close_btn div:nth-of-type(2) {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-45deg); width: 100%; height: 2px; background: #333;}
.consult_form .consult_box {padding: 15px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5); background: rgba(255,255,255,0.9); border-radius: 15px; text-align: center;}
.consult_form .consult_box h2 {color: #333; font-size: 24px; text-align: center; padding: 10px 0;}
.consult_form .consult_box h2 strong {color: #7733df; font-size: 24px; font-weight: 800;}
.consult_form .consult_box li {padding: 10px 0; border-bottom: 1px solid #ddd;}
.consult_form .consult_box li:last-of-type {border-bottom: none; display: flex; align-items: center;}
.consult_form .consult_box li h3 {display: inline-block; color: #333; vertical-align: top; font-size: 14px; width: 25%;}
.consult_form .consult_box li h3 span {display: none;}
.consult_form .consult_box li:nth-of-type(3) h3 {font-size: 12px;}
.consult_form .consult_box li div {display: inline-block; width: 70%; text-align: left;}
.consult_form .consult_box li div input,
.consult_form .consult_box li div textarea {width: 100%;}
.consult_form .consult_box li div .phone_0,
.consult_form .consult_box li div .phone_1,
.consult_form .consult_box li div .phone_2 {display: inline-block; width: 28%;}
.consult_form .consult_box li div input[type="text"] {height: 28px;}
.consult_form .consult_box li div select {
    height: 35px;
    padding: 5px 5px 5px 10px;
    width: 100%;
}
.consult_form .consult_box .agree_btn {display: inline-block; padding: 20px 0;}
.consult_form .consult_box .AW-mem-btn {margin-top: 15px;}
.consult_form .consult_box .AW-mem-btn button {width: 100%; border-radius: 20px; background: #333; color: #fff; text-align: center; height: 40px; line-height: 40px;}
/* form */


/* footer */
.footer{
  padding:30px 0;
  background-color: #555454;
  overflow: hidden;
}
.footer .f_logo{padding:0 0 20px 10px; border-bottom:1px solid #ccc;}
.footer .f_logo img{height:35px; opacity: .6;}
.footer .tit{
  margin-top:10px;
}
.footer .tit p{
  font-size:13px;
  color:#ccc;
  text-align: center;
  line-height: 26px;
}
.footer .tit p strong{font-size:14px; color:#fff;}
.footer .tit span{
  display: block;
  font-size:12px;
  color:#fff;
  text-align: center;
  margin-top:5px;
}




/* footer .tit .bottom */
.footer .tit .bottom{
  position: absolute;
  top:0;
  right:5px;
}
.footer .tit .bottom ul{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:5px;
}
.footer .tit .bottom ul li span{
  font-size:13px;
  color:#fff;
  text-align: left;
}
.footer .tit .bottom ul li a{
  display: inline-block;
  transition: all .3s ease-in-out;
}
.footer .tit .bottom ul li a img{width:35px; transition: all .3s ease-in-out;}
.footer .tit .bottom ul li a:hover img{transform: scale(1.1);}
/* footer .tit .bottom */


/* location */
.footer .tit .location{
  position: absolute;
  top:0px;
  right:5px;
}
.footer .tit .location ul{
  display: flex;
  flex-wrap: nowrap;
  justify-content: end;
  align-items: center;
  gap:10px;
}
.footer .tit .location ul a{
  display: block;
  font-size:13px;
  color:#fff;
  transition: all .3s ease-in-out;
}
.footer .tit .location ul a:hover{color:#0064b1;}
/* location */


.sns_pop_wrap{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  display: none;
}
.sns_pop_wrap .sns_pop{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}
.sns_pop_wrap .sns_pop .pop{
  width:250px;
  height:150px;
  line-height: 150px;
  background-color: #fff;
  border-radius: 10px;
  position: relative;
}
.sns_pop_wrap .sns_pop .pop h2{
  font-size:24px;
  color:#000;
  text-align: center;
  font-weight: 400;
}
.sns_pop_wrap .sns_pop .pop .close{
  position: absolute;
  top:-50px;
  right:20px;
}
.sns_pop_wrap .sns_pop .pop .close a{
  font-size:18px;
  color:#000;
}
/* footer */




/* quick_menu */
.quick_menu{
  position: fixed;
  bottom:120px;
  right:10px;
  padding:10px 5px;
  background-color: #deebf7;
  border:1px solid #ccc;
  border-radius: 10px;
  width:65px;
  /* background-image: linear-gradient(-225deg, #0064b1 0%, #00a8d9 35%, #52c0b2 80%); */
  box-shadow:2px 2px 5px rgba(0,0,0,0.3);
  z-index: 99;
}
.quick_menu li{
  text-align: center;
  border-bottom:1px solid #333;
  padding:10px 0;
}
.quick_menu li:last-child{border-bottom:0;}
.quick_menu li .img{width:40px; margin: 0 auto;}
.quick_menu li .tit h4{
  font-size:12px;
  color:#000;
  font-weight: 600;
  text-align: center;
}
.quick_menu li .tit p{
  font-size:12px;
  color:#000;
  font-weight: 200;
  padding:5px 0;
}
.quick_menu li .txt span{
  display: block;
  font-size:12px;
  color:#333;
  font-weight: 600;
  text-align: center;
  margin-bottom:5px;
}
.quick_menu li .txt h4{
  font-size:12px;
  color:#0064b1;
  font-weight: 400;
  text-align: center;
  letter-spacing: -1px;
}
.quick_menu li .txt strong{
  font-size:10px;
  color:#dd6218;
  text-align: center;
}
.quick_menu li .txt p{
  font-size:12px;
  color:#333;
  font-weight: 600;
  text-align: center;
  letter-spacing: -1px;
}
.quick_menu li .consulting a{
  display: block;
  font-size:14px;
  color:#fff;
  text-align: center;
  background-color: #0064b1;
  border-radius: 5px;
  padding:10px 0;
}
/* ------------------------------------- section ------------------------------------- */



/* top_btn */
.topbtn{
  position: fixed;
  bottom:60px;
  right:20px;
  z-index:9999999;
  width:30px;
  height:30px;
  border-radius: 40px;
  background-color:  #7733df;
  transition: all 0.5s ease;
  opacity: 0;
}
.topbtn.on{opacity: 1;}

.topbtn img{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width:20px;
}

.topbtn:active,
.topbtn:hover
{color:#fff; transition:all 0.5s ease; background-color: #151515;}
/* top_btn */

/* m_phone */
.m_phone{
  width:100%;
  max-width:800px;
  min-width:300px;
  position: fixed;
  bottom:0;
  z-index: 99999999999999999;
  text-align: center;
}