#wrap {
    width: 100%;

    letter-spacing: -0.02em;
}
#container {

  
}
.inner{
    max-width: 1240px;
    width: 100%;
    margin-inline: auto;

}

main,
main *,
section,
section *{
    box-sizing: border-box;
    
}   
.main-wrap section{
    padding-block:80px;

}
section:nth-of-type(even):not(.sec-info):not(.sec-cs) {
  background-color: #F6F7F9;
}
section.sec-info{
    padding-block: 40px;
}
.section-header{
    display:flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 48px;
    
}
h2.section-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem); 
    line-height: 1.25;
    font-weight: 700;
}   



/* 더보기 버튼 */
.more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #7a7a7a;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease;
}
.more-btn:hover {
  color: #333; 
}
.ico-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; 
  height: 28px;
  border: 1.5px solid #c2c2c2;
  border-radius: 10px; 
  transition: all 0.3s ease;
}
.ico-plus svg {
  width: 16px; 
  height: 16px;
}
.more-btn:hover .ico-plus {
  background-color: rgba(0, 102, 255, 0.05);
}

/* top버튼 */
.short {
    z-index: 99;
    position: fixed;
    bottom: 40px;
    right: 1%;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}
.short a {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background:  var(--brand-color) url(../img/icon/top-arrow.png) no-repeat center center /
        40%;
    text-indent: -9999px;
}

/* 링크버튼 */
.btn-action {
    width: 250px;
    display: flex;
    align-items: center;
    gap:24px;
    padding: 16px;
    border:1px solid #eae8e8;
    border-radius: 24px;
    background-color: #fff;
    transition: box-shadow .2s ease,  border-color .2s ease;
}
.btn-action:hover {
    box-shadow: 0 1px 10px rgba(0,0,0,.10);
    border-color: #e2e0e0;
}
.btn-action__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #111;
}
.ico-btn {
    width: 40px;
    height: 40px;
    background-color:  #f2f2f2;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c2c2c2;
    transition: all 0.2s ease; 
}
.btn-action:hover .ico-btn,
.featured__info .ico-btn:hover{
  color: var(--brand-color);
  background-color: #f2f2f2; 
}
.ico-btn--more svg,
.ico-btn--cs svg{
    width: 25px;
    height: 25px;
}
.ico-btn--down svg{
    width: 28px;
    height: 28px;}


/* hero */
.main__hero {
    width: 100%;
    padding-top: 110px;
}
.main_wrap {
    display: flex;
    justify-content: space-between;
    gap:24px;
    align-items: center;
        flex-wrap: wrap;
}
.main-banner {
    flex: 1 1 560px;
    height: 450px;
    padding: 0 30px;
    color: var(--banner-text);
    position: relative;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
 /* 컬러모드일 때 */
.main-banner.is-color{
  background:    
     linear-gradient(
        110deg,
        var(--brand-color) 0%,
        color-mix(in oklch, var(--brand-color), white 12%) 55%,
        color-mix(in oklch, var(--brand-color), white 28%) 100%);
}
.main-banner__icon{
    position: absolute;
    right: 48px;
    bottom: 40px;
    width: 180px;
    pointer-events: none;
    
}
.main-banner__icon img{
    width: 100%;
    height: auto;
    filter:
    drop-shadow(0 15px 15px rgba(0, 0, 0, 0.15))
    drop-shadow(0 5px 5px color-mix(in srgb, var(--brand-color), black 20%));
  transform: translateY(0);
}
.main-banner.is-color .main-banner__icon img{
  animation: floatIcon 6s ease-in-out infinite;
}

@keyframes floatIcon {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
/* 이미지모드일 때 */
.main-banner.is-image{ 
    background: center/cover no-repeat var(--hero-img);
    position: relative;
}
.main-banner.is-image::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.45),
    rgba(0,0,0,.25)
  );
  border-radius: 24px;
}
.main-banner__content
{  position: relative;
  z-index: 2;
}
.main-banner__sub-title {
    display: inline-block;
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: 700;
}

.main-banner.is-image::after{
    content:"";
    position:absolute; inset:0;
    background: rgba(0,0,0,.4); 
}
.main-banner__title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
}
.company-name {
    display: block;
    color: var(--client-color);
    font-weight: 900;
}

.main-banner__desc {
    font-size: 16px;
    font-weight: 400;
}

/* login */
.login {
    width: 100%;
    height: 450px;
    display: flex; 
    flex-direction: column;
    flex: 0 0 clamp(300px, 35%, 370px);
    background: #fff;
    padding: 50px 40px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    box-sizing: border-box;
    position: relative;
    z-index: 3;
}
.login__header {
    text-align: center; 
    flex-shrink: 0;
    margin-bottom: 16px;
}
.login__title{
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 16px;
}
.login__header > p{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    white-space:nowrap;
}
.login__body{
    display: flex;
    flex-direction: column;
    flex: 1;
}
.login__body > form{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.login__item{
flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  margin-bottom:16px;
}
.login__links{
display: flex;
justify-content:center;
align-items: center;
margin-bottom: 16px;
}
.login__links .btn-group {
  display: flex;
  align-items: center;
   white-space: nowrap;
}

.login__links .btn-group:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #e0e0e0;
  margin: 0 12px; /* 선 좌우 여백 */
}

.loginUser{
    flex: 1;                  
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    text-align: center;
}
.loginUser__title{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; 
}
.loginUser__name{
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}
.loginUser__sub{
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #7A7A7A;
}
.logout__btn{
    margin-top: auto;       
    width: 100%;
}


/* 스크롤 */
.scroll-icon-box {
    position: absolute;
    margin: auto;
    bottom: 7%;
    left: calc(50% - 13px);
    width: 26px;
}
.scroll-icon-box .mouse {
    height: 35px;
    width: 24px;
    border-radius: 12px;
    transform: none;
    border: 1px solid #fff;
}
@keyframes mouse-wheel {
    0% {
        top: 1px;
        opacity: 1;
        transform: translateY(0);
    }
    50% {
        top: 2px;
    }
    100% {
        top: 3px;
        opacity: 0;
        transform: translateY(6px);
    }
}
.scroll-icon-box .wheel {
    height: 5px;
    width: 2px;
    display: block;
    margin: 5px auto;
    background: #fff;
    animation: mouse-wheel 1.2s ease infinite;
}


/* 안내사항 sec-info*/
.blind{
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
}
.info-container{
    width: 100%;
    padding: 16px 30px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 24px; 
    background:#F6F7F9;   
    <!-- background: color-mix(in srgb, var(--brand-color), white 95%); -->
}
.info__list{
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    text-align: center;
}
.info__item {
   display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 24px;
    }
.info__item + .info__item{
  border-left: 1px solid #ccc;
}

.info__item p {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.info__item strong {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.info__item span{
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #7a7a7a;
}
/* 교육과정 sec-course*/
.sec-course{
    overflow-x:hidden;

}
.sec-course .m-slider {
    display: block;
    margin: 0 -8px ;
}
.m-slider .slick-slide {
    padding: 0 8px;
    box-sizing: border-box;
}
.m-slider .slick-list {
    overflow: hidden;
    padding: 20px 0; 
    margin: -20px -8px;
}
.card, 
.featured-container {
    background: #fff;
    border-radius: 24px;
    border: 1px solid #eae8e8;
    box-sizing: border-box;
    padding: 5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
}
.card:hover,
.featured-container:hover {
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
    border-color: transparent; 
}
.card:hover {
    transform: translateY(-8px);
}
.card__thumbnail{
    width: 100%;
    aspect-ratio: 16 / 9;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid #eae8e8;
}
.card__thumbnail img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition:  0.5s ease;
}
.card:hover .card__thumbnail img{
    transform: scale(1.1);
}
.card__body{
    padding: 11px 11px 35px 11px;
    display: flex;
    flex-direction: column;
    gap:8px;
    position: relative;
}
.card__title{
    min-height: 48px; 
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    display: -webkit-box;      
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;      
    overflow: hidden;          
    text-overflow: ellipsis;   
    text-align: left;
}
.card__detail {
    display: flex;
    align-items: center; 
    gap: 8px; 
    margin-top: 4px;
}
.card__detail dt {
    font-size: 14px;
    color: #7a7a7a; 

}
.card__detail dt::after {
    content: ':';
    margin-left: 2px;
}

.card__detail dd {
    font-size: 14px;
    color: #7a7a7a;
}

.m-slider .slick-prev,
.m-slider .slick-next {
    display: none 
}

.ico__arrow {
    width: 40px;
    height: 40px;
    border: 1px solid #c2c2c2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c2c2c2;
    transition: background-color .3s ease, color .2s ease;
}
.card:hover .ico__arrow {
    background-color:  var(--brand-color);
    border-color:  var(--brand-color);
}
.card:hover .ico__arrow{
    color:#fff;
}
.ico-btn--more {
    position: absolute;
    right: 2%;
    bottom: 7%; 
}

/* 슬라이드 화살표 */
.slick-slider{
    height : auto;
}
.slick-prev:before, .slick-next:before{
    display:none;
}    
.m-slider .slick-prev,
.m-slider .slick-next {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    top: auto;
    bottom: -30px; 
    display: flex !important;
    align-items: center;
    justify-content: center;
    transform: none; 
    transition: color 0.2s ease;
    color: #333;
}


.m-slider .slick-prev::after,
.m-slider .slick-next::after {
    content: "";
    position: absolute;
    width: 8px; 
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    display: block !important;
}

.m-slider .slick-prev {
    left: calc(50% - 45px); 
}

.m-slider .slick-prev::after { 
    transform: rotate(-135deg) translateX(-3px);
}
.m-slider .slick-next {
    right: calc(50% - 45px); 
}

.m-slider .slick-next::after { 
    transform: rotate(45deg) translateX(3px); 
}

.m-slider .slick-prev:hover,
.m-slider .slick-next:hover {
    color: var(--brand-color);
    background: transparent;
}
.m-slider .slick-disabled {
    color: #c2c2c2;
    pointer-events: none;
}




/* 대표과정 sec-featured*/
.featured-container{
    position: relative;
    display: flex;
    justify-content: space-between;
    gap:24px;
    overflow: hidden;
    max-width: 1000px;
    margin-inline: auto;
}
.featured__preview{
    flex: 0 0 clamp(50%, 50% + (100vw - 1000px) * 0.24 / 24, 55%);
   
}

.featured__preview > a{
  display:block;
  text-decoration:none;
}

.featured__img-box{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  aspect-ratio: 16/9;
  cursor: pointer;
  transform: translateZ(0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              box-shadow .35s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

.featured__img-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(.98) brightness(.9);
  transform: scale(1.03);
  transition: transform .6s cubic-bezier(.2,.8,.2,1),
              filter .35s ease;
}
.preview-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  color:#fff;

  /* 기본 상태: 덜 진한 딤 */
  background:
    radial-gradient(1200px 500px at 50% 55%, rgba(0,0,0,.04), rgba(0,0,0,.48)),
    linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.42));

  transition: background .45s ease;
}

/* ▶ 플레이 버튼 */
.preview-overlay .ico-play{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display:grid;
  place-items:center;

  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);

  transform: translateY(6px);
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    background .45s ease,
    border-color .45s ease,
    box-shadow .45s ease;
}
.preview-overlay .ico-play svg{
  width: 26px;
  height: 26px;
  transform: translateX(1px);
  opacity: .95;
}

/* ▶ 미리보기 텍스트 */
.preview-overlay span{
  font-size: 15px;
  letter-spacing: -0.2px;
  opacity: .78;
  transform: translateY(10px);
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    opacity .45s ease;
 transition-delay: .08s; 
}

@media (hover:hover) and (pointer:fine){
  .featured__preview:hover .preview-overlay{
    background:
      radial-gradient(1200px 500px at 50% 55%, rgba(0,0,0,.06), rgba(0,0,0,.62)),
      linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,.62));
  }

  .featured__preview:hover .preview-overlay .ico-play{
    transform: translateY(0); /* 위로 살짝 */
  }

  .featured__preview:hover .preview-overlay span{
    transform: translateY(2px); /* 같이 살짝 */
    opacity: .92;
  }
}

@media (hover:none){
  .preview-overlay .ico-play{ transform: translateY(0); }
  .preview-overlay span{ transform: translateY(0); opacity: .9; }
}

.featured__info{
    flex:1;
    padding: 16px 16px 16px 0;
    position: relative;
}
.featured__title{
    height: 56px;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 8px;
    display: -webkit-box;
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.featured__desc{
    font-size: 16px;
    line-height: 24px;
    display: -webkit-box;
        -webkit-line-clamp: 5; 
        -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* featured 상세보기 버튼 */
.featured__link{
    position: absolute;
    right: 2%;
    bottom: 5%;
    padding: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #c2c2c2;
    border-radius: 30px;
    height: 40px;
    transition: background-color .3s ease, color .2s ease;
}
.featured__link-text{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: #c2c2c2;
    font-size: 14px;
    font-weight: 500;
}
.featured__link-arrow{
    color: #c2c2c2; 
}
.featured__link-arrow svg{
  width: 25px;
  height: 25px;
  display: block;
}

.featured__link:hover {
  background-color:var(--brand-color);
  border-color:var(--brand-color);

}
.featured__link:hover .featured__link-text,
.featured__link:hover .featured__link-arrow svg{
    color:#fff;
}


/* 경찰서 ??? */
/* .sec02-sub {
    outline: 1px solid red;
}

.sec02-sub .sec02-wrap {
    display: grid;
    grid-template-columns: 512px 624px;
    gap: 117px;
    align-items: center;
}

.sec02-sub .sec02-wrap .sec02_in {
    width: 100%;
}

.sec02-sub .sec02-wrap .sec02_in p {
    overflow: hidden;
    max-height: 131px;
    display: -webkit-box;
    -webkit-line-clamp: 6; 
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 22px;
    font-weight: 400;
}

.sec02-sub .sec02-wrap .sec02_in .btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 38px;
}

.sec02-sub .sec02-wrap .sec02_in strong {
    font-weight: 700;
}

.sec02-sub .sec02-wrap .sec02_in .btn {
    margin-top: 0;
    margin-bottom: 0;
}

.sec02-sub .btn a {
    display: block;
    width: 146px;
    height: 51px;
    padding: 12px 36px;
    font-size: 20px;
    line-height: 27px;
    color: #fff;
    cursor: pointer;
    box-sizing: border-box;
}

@media (max-width: 1100px) {
    .sec02 .left {
        width: 80%;
        margin-left: 10%;
    }
    .sec02 .right {
        width: 80%;
        margin-right: 10%;
    }

    .sec02-sub {
        padding: 0 16px;
    }

    .sec02-sub .sec02-wrap {
        grid-template-columns: 1fr;
    }
} */


/* 공지사항 sec-notice */

.section-title__group{
    display: flex;
    align-items: flex-end;
    gap: 24px;
}
.notice__chip{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color:#7a7a7a;
}
.notice__chip + .notice__chip{
    margin-left: 16px;
}
.notice__chip.is-active{
    font-weight: 700;
    color:#6C8EB0;
}
.modu_news_list {
    border-top: 2px solid #333;
}
.modu_news_item {
    border-bottom: 1px solid #111;
}
.modu_news_item:hover {
    background-color:#fff;
}
.modu_news_item a {
    width: 100%;
    display: flex; 
    align-items: center; 
    padding: 24px clamp(12px, 2vw, 24px);
    text-decoration: none; 
}

.news-title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color:#111;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
    margin-right: 20px;
}

.news-date {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #c2c2c2;
    flex-shrink: 0; 
}


/* sec04  sec-cs*/
.cs-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cs-info{
    display: flex;
    gap:24px;
}
.cs-info__title,
.cs-info__tel{
    font-size: clamp(1.125rem, 1vw + 0.75rem, 1.25rem);
    font-weight: 700;
    line-height: 28px;
}
.cs-info__tel{
    display: inline-block;
    margin-bottom: 8px;
    color:#111;
}
.cs-info__time{
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color :#7a7a7a;
}
.cs-links{
    display: flex;
    gap:24px;

}


/* studyCenterV2_floatingMenu */
.floating-menu *{
	box-sizing:border-box;
}
.floating-menu {
	position: fixed;
	top: 50%;
	right: 94px;
	-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
	z-index: 99999;
	border-radius: 30px;
	background-color: #fff;
	-webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
}
.floating__item {
	display: block;
	width: 90px;
	height: 90px;
	padding-top: 55px;
	text-align: center;
	font-family: "Noto Sans KR", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	background-color: #fff;
	background-position: center 20px;
	background-repeat: no-repeat;
	background-size: 30px 29px;
	border: 1px solid #f7f6f6;
	color: #111;
}

.floating__item.learning__support{
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='29' fill='none'%3E%3Cg fill='%23000000' clip-path='url(%23a)'%3E%3Cpath d='M29.464 6.825 22.758.143a.492.492 0 0 0-.693 0L19.64 2.56c-.402-.581-1.116-1.443-2.09-1.443-.51 0-1.002.234-1.465.695-.517.515-.749 1.064-.688 1.632.094.889.879 1.528 1.438 1.91L14.41 7.77a.488.488 0 0 0 0 .692l2.834 2.823a.492.492 0 0 0 .515.113.574.574 0 0 0 .278-.206c.035-.05.076-.113.124-.186.25-.384.835-1.285 1.458-1.285.24 0 .5.138.771.41.302.3.435.574.407.837-.063.595-.92 1.148-1.286 1.384a5.487 5.487 0 0 0-.186.123.571.571 0 0 0-.207.278.487.487 0 0 0 .114.512l2.834 2.824a.491.491 0 0 0 .693 0l6.707-6.684a1.823 1.823 0 0 0-.001-2.58Zm-.692 1.89-6.36 6.337-2.079-2.07c.56-.383 1.345-1.022 1.439-1.91.06-.568-.172-1.117-.688-1.633-.463-.461-.956-.695-1.465-.695-.975 0-1.688.862-2.09 1.443l-2.078-2.071 2.486-2.478a.487.487 0 0 0 .114-.512.573.573 0 0 0-.207-.278 5.61 5.61 0 0 0-.186-.123c-.366-.236-1.223-.79-1.286-1.384-.028-.263.105-.537.407-.838.272-.271.532-.409.771-.409.623 0 1.209.9 1.459 1.285.047.073.088.136.123.184a.576.576 0 0 0 .277.208c.18.065.38.021.516-.113l2.487-2.478 6.36 6.336c.33.33.331.868 0 1.199ZM22.134 17.228h-3.43c.125-.665.226-1.67-.338-2.364-.36-.444-.913-.669-1.645-.669-.73 0-1.284.225-1.644.669-.564.694-.463 1.7-.339 2.364H11.8v-3.504c0-.19-.11-.363-.283-.443a.578.578 0 0 0-.343-.05c-.06.01-.134.026-.22.044-.426.09-1.425.303-1.89-.073-.208-.166-.308-.454-.308-.879s.1-.712.307-.88c.467-.375 1.465-.162 1.892-.072.085.019.158.034.218.044.115.02.23.003.343-.05a.488.488 0 0 0 .284-.443V6.93a.49.49 0 0 0-.49-.489H1.832A1.83 1.83 0 0 0 0 8.266v18.908A1.83 1.83 0 0 0 1.832 29l13.494-.009a.49.49 0 0 0 .49-.488v-.009a.55.55 0 0 0-.006-.127c-.01-.06-.026-.133-.044-.218-.091-.425-.305-1.42.072-1.884.168-.207.456-.307.883-.307s.715.1.882.307c.377.464.164 1.459.073 1.884-.018.085-.034.158-.044.217a.573.573 0 0 0 .05.343.49.49 0 0 0 .444.282h2.814a1.829 1.829 0 0 0 1.684-1.79v-9.485a.49.49 0 0 0-.49-.488ZM.98 8.267a.85.85 0 0 1 .85-.848h8.987v2.928c-.667-.123-1.675-.224-2.372.338-.446.359-.672.91-.672 1.639 0 .728.226 1.28.672 1.639.697.562 1.705.46 2.372.337v2.936H7.886c.125-.664.226-1.67-.338-2.364-.36-.444-.914-.669-1.645-.669s-1.284.225-1.645.67c-.564.694-.462 1.699-.338 2.363H.98V8.267Zm.85 19.756a.85.85 0 0 1-.85-.849v-8.96h3.516a.49.49 0 0 0 .445-.283.57.57 0 0 0 .05-.342c-.01-.06-.025-.133-.044-.218-.09-.425-.304-1.42.073-1.885.167-.206.456-.306.882-.306.427 0 .715.1.883.306.377.465.164 1.46.072 1.885-.018.085-.033.158-.043.217a.571.571 0 0 0 .05.343.49.49 0 0 0 .444.282h3.509v2.92c-.667-.123-1.676-.224-2.373.338-.445.359-.671.91-.671 1.639 0 .728.226 1.28.671 1.638.697.562 1.706.461 2.373.337v2.93l-8.986.007Zm19.812-.832a.849.849 0 0 1-.733.824h-2.206c.124-.665.226-1.67-.338-2.365-.36-.444-.914-.669-1.645-.669-.73 0-1.284.225-1.645.67-.564.694-.463 1.698-.338 2.363h-2.94V24.51c0-.19-.11-.363-.284-.443a.577.577 0 0 0-.342-.05c-.06.01-.134.026-.219.044-.426.09-1.425.303-1.891-.072-.207-.167-.308-.454-.308-.88 0-.424.101-.712.308-.879.466-.375 1.465-.163 1.891-.072.085.018.159.034.218.044.116.02.231.003.344-.05a.488.488 0 0 0 .284-.443v-3.504h3.517a.49.49 0 0 0 .445-.283.571.571 0 0 0 .05-.34c-.01-.061-.026-.134-.044-.22-.09-.424-.304-1.419.073-1.883.167-.207.456-.307.882-.307s.715.1.883.307c.377.464.163 1.46.072 1.884a5.462 5.462 0 0 0-.044.217.572.572 0 0 0 .05.343.49.49 0 0 0 .445.283h3.516v8.985Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h30v29H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.floating__item.remote__support{
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='35' fill='none'%3E%3Cg fill='%23000000' clip-path='url(%23a)'%3E%3Cpath d='M18.938.903A.908.908 0 0 0 18.026 0H3.47a.908.908 0 0 0-.912.903v10.424h16.385V.903h-.005Zm-8.195-.71a.282.282 0 1 1 0 .564.282.282 0 1 1 0-.564Zm7.167 10.205H3.58V1.075c0-.078.064-.14.143-.14h14.039c.079 0 .142.062.142.14v9.323h.006ZM21.49 14.543H0v.689h21.49v-.69ZM18.938 11.583H2.552L0 14.298h21.49l-2.552-2.715Zm-15.853.36H18.4l1.023 1.076H2.067l1.023-1.076h-.005Zm5.907 2.047.205-.763h3.09l.206.763H8.986h.006ZM39.447 20.676a.908.908 0 0 0-.912-.903H23.98a.908.908 0 0 0-.913.903v10.425h16.386V20.676h-.006Zm-8.19-.715a.282.282 0 1 1 0 .564.282.282 0 1 1 0-.564Zm7.162 10.205H24.09v-9.323c0-.078.064-.14.143-.14H38.27c.08 0 .143.062.143.14v9.323h.005ZM42 34.311H20.51V35H42v-.689ZM39.447 31.351H23.062l-2.553 2.715H42l-2.553-2.715Zm-15.847.36h15.315l1.023 1.076H22.582l1.023-1.076H23.6Zm5.906 2.047.206-.762h3.09l.206.762h-3.507.005ZM11.45 17.503c0 .459-.375.835-.845.835a.835.835 0 1 1 0-1.67c.47 0 .844.37.844.835ZM11.45 20.77c0 .46-.375.835-.845.835a.835.835 0 1 1 0-1.67c.47 0 .844.37.844.835ZM11.45 24.038c0 .46-.375.835-.845.835a.835.835 0 1 1 0-1.67c.47 0 .844.37.844.835ZM11.45 27.306c0 .46-.375.835-.845.835a.835.835 0 1 1 0-1.67c.47 0 .844.37.844.835ZM20.51 28.14a.835.835 0 1 1 0-1.67.835.835 0 1 1 0 1.67ZM17.208 28.14a.835.835 0 1 1 0-1.67.835.835 0 1 1 0 1.67ZM13.907 28.14a.835.835 0 1 1 0-1.67.835.835 0 1 1 0 1.67ZM30.65 16.657c0-.46.375-.835.845-.835a.835.835 0 1 1 0 1.67.835.835 0 0 1-.844-.835ZM30.65 13.39c0-.46.375-.836.845-.836a.835.835 0 1 1 0 1.67.835.835 0 0 1-.844-.835ZM30.65 10.121c0-.459.375-.835.845-.835a.835.835 0 1 1 0 1.67.835.835 0 0 1-.844-.835ZM30.65 6.854c0-.46.375-.835.845-.835a.835.835 0 1 1 0 1.67.835.835 0 0 1-.844-.835ZM21.59 6.019a.835.835 0 1 1 0 1.67.835.835 0 1 1 0-1.67ZM24.892 6.019a.835.835 0 1 1 0 1.67.835.835 0 1 1 0-1.67ZM28.193 6.019a.835.835 0 1 1 0 1.67.835.835 0 1 1 0-1.67Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h42v35H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
	background-position-y: 14px;
}

.floating__item:last-child{
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
}


@media (max-width: 1680px) {
  .floating-menu {
    right: 0;
  }
}

@media (max-width: 1240px) {
    .inner{
    padding-inline: clamp(15px, 5vw, 30px);
    }
    .info-container{
        padding: 14px 20px;
        gap: 16px;
    }
    .featured__preview{
        flex: 0 0 50%;
    
    }
}


@media (max-width: 1023px) {

    .btn-action__title{
        font-size: 14px;
        line-height: 20px;
        white-space: nowrap;
    }
    .featured__link{
        right: 3%;
        bottom: 5%;
    }

}
@media (max-width: 1000px) {
        
    .main_wrap {
    flex-direction: column;
    height: auto;
    }
    .main-banner {
    width: 100%;
    flex: 1 1 400px;
    padding: 0 30px;
    background-color: #767676;
    position: relative;
    }
    .main-banner__icon {
    display: none;
}

/* 컬러 모드일 때만 아이콘 등장! */
.main-banner.is-color .main-banner__icon {
    display: block;
}

/* 이미지 모드일 때 처리 */
.main-banner.is-image {
    background-image: var(--hero-img);
    background-size: cover;
    background-position: center;
}

    .login {
        min-height: 400px;
        gap:0;
        padding: clamp(30px, 8vh, 50px) clamp(20px, 5vw, 40px);
    }
    .featured-container{
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 8px;                
        border: 1px solid #eae8e8;
        border-radius: 30px;
        overflow: hidden;
        max-width: 720px;
        margin-inline: auto;
    }
        .featured__preview{
        flex: none;
    }
    .featured__info {
        padding: 16px 16px 65px 16px;
    }
    .ico-btn--more {
        position: absolute;
        right: 3%;
        bottom: 3%;
    }
        .cs-wrap {
    flex-direction: column;
    align-items: stretch;
    gap:40px;
    }
    .btn-action{
        width: 100%;
        justify-content: center;
        gap: 24px;
        padding: 12px 16px;
    }

}

@media (max-width: 767px) {

    .main-banner__icon{
    display: none;
    }
    .info-container{
        flex-direction: column;
        align-items: stretch;
        padding: 16px 20px;
        border-radius: 20px;
        gap: 24px;
    }
    .info__list{
        width: 100%;
    }

    .info__item{
        padding: 0 12px;
    }
    .info__item + .info__item{
        border-left: 0;
    }
    .sec-notice .section-header{
        align-items: flex-start;
    }
    .section-title__group{
    align-items: flex-start;
    flex-direction:column; 
    gap: 16px;
    }

    .floating-menu {
    display: none;
  }

}


/* 애니메이션 */
.main__hero .main-banner__desc,
.main__hero .main-banner__title,
.main-banner__icon,
.main__hero .login {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
    animation: heroIn 1.5s cubic-bezier(.2,.8,.2,1) forwards;
    will-change: transform, opacity;
}

.main__hero .main-banner__title  { animation-delay: .12s; }  
.main-banner__icon { animation-delay: .20s; } 
.main__hero .main-banner__desc { animation-delay: .26s; } 
.main__hero .login              { animation-delay: .46s; }

@keyframes heroIn {
  to { opacity: 1; transform: translate3d(0,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .main__hero .main-banner__desc,
  .main__hero .main-banner__title,
  .main__hero .login {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* 각섹션 */
.sec05, .sec01, .sec02, .sec03, .sec04 {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  animation: sectionIn .9s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: var(--delay, 0s);
  will-change: opacity, transform;
}

@keyframes sectionIn {
  to { opacity: 1; transform: translate3d(0,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .sec05, .sec01, .sec02, .sec03, .sec04 {
    animation: none;
    opacity: 1;
    transform: none;
  }
}