/********** 공통 **********/
.section { padding: 9rem 0; }
.section .sec-tit { display: flex; align-items: center; justify-content: space-between; margin-bottom: 45px; }
.section .sec-tit .more-btn-st1 { flex-shrink: 0; }
.section .sec-con .flex-box { display: flex; }


@keyframes shakeLeft {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-5px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
@keyframes rotate {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-2deg);
  }
}
@keyframes livelyWiggle {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(1.2deg) scale(1.01);
  }
  75% {
    transform: rotate(-1.2deg) scale(0.99);
  }
}
@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
@keyframes popIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/*** more-btn ***/
.more-btn-st1 { display: block; width: 40px; height: 40px; background: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 8H16.5M8.5 0V16' stroke='black'/%3E%3C/svg%3E") no-repeat center center / auto 30px; transition: transform 0.4s ease; }
.more-btn-st1:hover { transform: rotate(90deg); }
.more-btn-st2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; max-width: 240px; padding: 10px 15px; font-size: 15px; color: #fff; background: rgba(0, 0, 0, 0.2); border-radius: 50px; }
.more-btn-st2 i { height: 14px; }
.more-btn-st2:hover i { animation: shakeLeft 1s ease-in-out infinite; }


/*** swiper-control ***/
.swiper-control-st1 { display: flex; align-items: center; gap: 15px; }
.swiper-control-st1 [class^="swiper-button-"] { width: 34px; height: 34px; background-color: var(--sub3); background-repeat: no-repeat; background-position: center center; background-size: auto 12px; border-radius: 100%; }
.swiper-control-st1 .swiper-button-pause { background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0V14M7 0V14' stroke='white' stroke-width='2'/%3E%3C/svg%3E"); }
.swiper-control-st1 .swiper-button-play { background-image: url("data:image/svg+xml,%3Csvg width='8' height='10' viewBox='0 0 8 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0.333374V9.66671L7.33333 5.00004L0 0.333374Z' fill='white'/%3E%3C/svg%3E"); }
.swiper-pagination-st1 { flex-shrink: 0; display: flex; align-items: center; gap: 8px; width: fit-content;font-weight: 500; font-size: 16px; color: #555; }
.swiper-pagination-st1 .swiper-pagination-current { font-weight: 600; color: var(--main1); }


.swiper-btn-st1 { display: flex; align-items: center; gap: 5px; }
.swiper-btn-st1 > div { position: relative; top: unset; right: unset; bottom: unset; left: unset; z-index: 1; width: 70px; height: 70px; margin: 0; background-color: #fff; background-repeat: no-repeat; background-size: auto 20px; background-position: center; border-radius: 100%; box-shadow: 0 0 10px 4px rgba(0 , 0, 0, 0.1); cursor: pointer; }
.swiper-btn-st1 > div::after { display: none; }
.swiper-btn-st1 .swiper-button-prev { background-image: url("data:image/svg+xml,%3Csvg width='10' height='17' viewBox='0 0 10 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L1.5 8.5L9 16' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.swiper-btn-st1 .swiper-button-next { background-image: url("data:image/svg+xml,%3Csvg width='10' height='17' viewBox='0 0 10 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 16L8.5 8.5L1 0.999999' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }

.swiper-btn-st2 { display: flex; gap: 10px; }
.swiper-btn-st2 > div { position: relative; top: unset; right: unset; bottom: unset; left: unset; z-index: 1; width: 38px; height: 38px; margin: 0; background-color: var(--light1); background-repeat: no-repeat; background-size: auto 10px; background-position: center; border-radius: 100%; cursor: pointer; }
.swiper-btn-st2 > div::after { display: none; }
.swiper-btn-st2 .swiper-button-prev { background-image: url("data:image/svg+xml,%3Csvg width='10' height='17' viewBox='0 0 10 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L1.5 8.5L9 16' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.swiper-btn-st2 .swiper-button-next { background-image: url("data:image/svg+xml,%3Csvg width='10' height='17' viewBox='0 0 10 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 16L8.5 8.5L1 0.999999' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.swiper-btn-st2 .swiper-button-pause { background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0V14M7 0V14' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.swiper-btn-st2 .swiper-button-play { background-image: url("data:image/svg+xml,%3Csvg width='8' height='10' viewBox='0 0 8 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0.333374V9.66671L7.33333 5.00004L0 0.333374Z' fill='black'/%3E%3C/svg%3E"); }


.character { position: absolute; z-index: 5; }
.character .img { position: absolute; animation: livelyWiggle 2.5s ease-in-out infinite; transform-origin: bottom center; }
.character .txt1 { position: absolute; animation: floatUpDown 1.5s ease-in-out infinite; }
.character .txt2 { position: absolute; animation: floatUpDown 1.5s ease-in-out infinite; animation-delay: 0.7s; }

/********** section1 **********/
.section.section1 { padding-top: 12.5rem }
.section1 .character { right: 0; top: 0; }
.section1 .character .img { right: 0; top: -100px; }
.section1 .character .txt1 { right: 64px; top: -108px; }
.section1 .character .txt2 { right: 170px; top: -80px; }
.section1 .main-swiper { width: 1200px; overflow: visible; }
.section1 .main-swiper .swiper-slide { width: 1200px; height: 450px; }
.section1 .main-swiper .swiper-slide .img-wrap { height: 100%; border-radius: 5rem; overflow: hidden; }
.section1 .main-swiper .swiper-btn-st1 {  }
.section1 .main-swiper .swiper-btn-st1 > div { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; }
.section1 .main-swiper .swiper-btn-st1 > div.swiper-button-prev { left: -35px; }
.section1 .main-swiper .swiper-btn-st1 > div.swiper-button-next { right: -35px; }
.section1 .swiper-control-st1 { position: absolute; bottom: -40px; right: 0; justify-content: flex-end; }



.section2 { background: url(../img/main/section2-bg.png) no-repeat center center / cover; }
.section2 .inner-padding { position: relative; }
.section2 .character02 { display: flex; left: -150px; bottom: -80px; }
.section2 .character02 .img { position: relative; }
.section2 .character02 .lf .txt1 { top: -40px; }
.section2 .character02 .rg .txt2 { right: -130px; bottom: 10px; }
.section2 .character03 { right: -90px; }
.section2 .character03 .img { right: 0; top: -50px; }
.section2 .character03 .txt1 { right: -40px; bottom: -10px; }
.section2 .character03 .txt2 { right: -60px; bottom: -60px; }
.section2 .sec-con { position: relative; }
.section2 .sec-con::before { content:""; position: absolute; bottom: calc(100% + -20px); right: 20px; width: 524px; height: 208px; background: url(../img/main/section2-img.png) no-repeat center center / contain; }
.section2 .sec-con .grid-wrap { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 25px; overflow: hidden; }
.section2 .sec-con .grid-wrap .box-item { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 55px 35px 55px 35px; overflow: hidden; }
.section2 .sec-con .grid-wrap .box-item:first-child { background: var(--main4) url(../img/main/section2-boximg01.png) no-repeat right 10px bottom -70px / auto; }
.section2 .sec-con .grid-wrap .box-item:nth-child(2) { background: var(--main2) url(../img/main/section2-boximg02.png) no-repeat right 10px bottom -10px / auto; }
.section2 .sec-con .grid-wrap .box-item:nth-child(3) { background: var(--main3) url(../img/main/section2-boximg03.png) no-repeat right 10px bottom -10px / auto; }
.section2 .sec-con .grid-wrap .box-item:nth-child(4) { margin-top: -1px; background: var(--sub1) url(../img/main/section2-boximg04.png) no-repeat right 10px bottom -10px / auto; }
.section2 .sec-con .grid-wrap .box-item:last-child { grid-column: span 2; background: #fff url(../img/main/section2-boxbg05.png) no-repeat right -10px bottom 90px / auto; }
.section2 .sec-con .grid-wrap .box-item:last-child::before { content:""; position: absolute; bottom: -10px; right: 10px; width: 195px; height: 195px; background: url(../img/main/section2-boximg05.png) no-repeat center center / contain; }
.section2 .sec-con .grid-wrap .box-item .num { font-family: var(--head-font); font-weight: 300; font-size: 2.8rem; color: #fff; }
.section2 .sec-con .grid-wrap .box-item .num em { font-size: 6rem; }
.section2 .sec-con .grid-wrap .box-item .sch-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 80%; padding: 12px 15px; background: #fff; border: 2px solid var(--main2); border-radius: 1rem; }
.section2 .sec-con .grid-wrap .box-item .sch-btn span { position: relative; padding-left: 30px; font-weight: 500; color: var(--main4);  }
.section2 .sec-con .grid-wrap .box-item .sch-btn span::before { content:""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background: url(../img/main/section2-boxicn05.png) no-repeat center center / contain; }
.section2 .sec-con .grid-wrap .box-item .inp-flex { width: 100%; max-width: calc(100% - 200px); }



.section.section3 { padding-bottom: 0; }
.section3 .inner-padding { position: relative; display: flex; align-items: flex-end; gap: 160px; }
.section3 .support-wrap { width: 100%; }
.section3 .support-wrap .sec-con { position: relative; padding: 55px 0; }
.section3 .support-wrap .sec-con::after { content:""; position: absolute; top: 0; right: -120px; z-index: -1; width: 200%; height: 100%; background: var(--light1); border-radius: 0 300px 300px 0; }
.section3 .support-wrap .sec-con .sp-list { display: flex; gap: 20px; }
.section3 .support-wrap .sec-con .sp-list > li { flex: 1 1 25%; }
.section3 .support-wrap .sec-con .sp-list > li > a { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 30px; background: #fff; border-radius: 1.5rem; }
.section3 .support-wrap .sec-con .sp-list > li > a .txt-wrap { flex-grow: 1; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--gray-e5); }
.section3 .support-wrap .sec-con .sp-list > li > a .txt-wrap .b-txt-st2 { margin-top: 30px; }
.section3 .support-wrap .sec-con .sp-list > li > a:hover .top .b-txt-st2 { text-decoration: underline; }
.section3 .shortcut-wrap { flex-shrink: 0; }
.section3 .shortcut-wrap .shortcut { display: flex; flex-direction: column; gap: 50px; width: 374px; height: 390px; padding: 75px 45px; background: var(--sub2) url(../img/main/section3-img.png) no-repeat right 50px bottom 30px / auto; border-radius: 2rem 2rem 10rem 2rem; overflow: hidden; }
.section3 .shortcut-wrap .shortcut .more-btn-st2 { background: none; border: 1px solid #fff; }
.section3 .side-btn { position: absolute; top: 50%; right: -120px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
.section3 .side-btn a { display: block; }
.section3 .side-btn a.chat-btn { position: relative; width: 124px; height: 124px; }
.section3 .side-btn a.chat-btn .character04 .img { left: 10px; }
.section3 .side-btn a.chat-btn .character04 .txt1 { position: absolute; top: -25px; left: -20px; }
.section3 .side-btn a.chat-btn .character04 .bubble { position: absolute; left: 68px; top: -31px; animation: popIn 0.5s ease-out forwards; transform-origin: bottom right; animation-delay: 1s; }
.section3 .side-btn a.chat-btn .character04 .bubble span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--head-font); font-weight: 600; font-size: 18px; color: #000; }
.section3 .side-btn a.chat-btn .character04 .bubble02 { position: absolute; right: 11px; bottom: -1px; animation: rotate 1.6s ease-in-out infinite; transform-origin: center bottom; }
.section3 .side-btn a.chat-btn .character04 .bubble03 { position: absolute; right: 11px; bottom: -3px; animation: rotate 1.6s ease-in-out infinite reverse; transform-origin: center bottom; }
.section3 .side-btn a.site-btn { width: 124px; height: 124px; border-radius: 100%; overflow: hidden; }


.section3 .support-wrap .sec-con .sp-list > li > a::before,
.section3 .support-wrap .sec-con .sp-list > li > a::after,
.section3 .support-wrap .sec-con .sp-list > li > a .line::before,
.section3 .support-wrap .sec-con .sp-list > li > a .line::after { content: ''; display: block; position: absolute; transition-duration: 200ms; transition-timing-function: linear; background-color: var(--cate1); }

.section3 .support-wrap .sec-con .sp-list > li:nth-child(2) > a::before,
.section3 .support-wrap .sec-con .sp-list > li:nth-child(2) > a::after,
.section3 .support-wrap .sec-con .sp-list > li:nth-child(2) > a .line::before,
.section3 .support-wrap .sec-con .sp-list > li:nth-child(2) > a .line::after { background-color: var(--cate2); }

.section3 .support-wrap .sec-con .sp-list > li:nth-child(3) > a::before,
.section3 .support-wrap .sec-con .sp-list > li:nth-child(3) > a::after,
.section3 .support-wrap .sec-con .sp-list > li:nth-child(3) > a .line::before,
.section3 .support-wrap .sec-con .sp-list > li:nth-child(3) > a .line::after { background-color: var(--cate3); }

.section3 .support-wrap .sec-con .sp-list > li:nth-child(4) > a::before,
.section3 .support-wrap .sec-con .sp-list > li:nth-child(4) > a::after,
.section3 .support-wrap .sec-con .sp-list > li:nth-child(4) > a .line::before,
.section3 .support-wrap .sec-con .sp-list > li:nth-child(4) > a .line::after { background-color: var(--cate4); }

/* 오른쪽 */
.section3 .support-wrap .sec-con .sp-list > li > a::before { bottom: 19px; right: -1px; width: 3px; height: 0; transition-property: height; transition-delay: 300ms; } 
/* 위쪽 */
.section3 .support-wrap .sec-con .sp-list > li > a::after { top: -1px; right: 19px; width: 0; height: 3px; transition-property: width; transition-delay: 50ms; }
/* 아래쪽 */
.section3 .support-wrap .sec-con .sp-list > li > a .line::before { right: 19px; bottom: -1px; width: 0; height: 3px; transition-property: width; transition-delay: 300ms; }
/* 왼쪽 */
.section3 .support-wrap .sec-con .sp-list > li > a .line::after { bottom: 19px; left: -1px; width: 3px; height: 0; transition-property: height; transition-delay: 50ms; }

.section3 .support-wrap .sec-con .sp-list > li > a .linebox { display: block; position: absolute; overflow: hidden; transition-duration: 50ms; transition-timing-function: linear; }
.section3 .support-wrap .sec-con .sp-list > li > a .linebox::before { content: ''; display: block; position: absolute; width: 20px; height: 20px; border-color: var(--cate1); transform: translateZ(0); }

.section3 .support-wrap .sec-con .sp-list > li:nth-child(2) > a .linebox::before { border-color: var(--cate2); }
.section3 .support-wrap .sec-con .sp-list > li:nth-child(3) > a .linebox::before { border-color: var(--cate3); }
.section3 .support-wrap .sec-con .sp-list > li:nth-child(4) > a .linebox::before { border-color: var(--cate4); }

.section3 .support-wrap .sec-con .sp-list > li > a .linebox.top { width: 20px; height: 0; transition-property: height; }
.section3 .support-wrap .sec-con .sp-list > li > a .linebox.top::before { bottom: 0; left: 0; }
.section3 .support-wrap .sec-con .sp-list > li > a .linebox.bottom { width: 0; height: 20px; transition-property: width; }
.section3 .support-wrap .sec-con .sp-list > li > a .linebox.bottom::before { bottom: 0; right: 0; }

.section3 .support-wrap .sec-con .sp-list > li > a .linebox.top.left { bottom: calc(100% - 19px); left: -1px;  transition-delay: 0s;  }
.section3 .support-wrap .sec-con .sp-list > li > a .linebox.top.left::before { border-width: 3px 0 0 3px; border-style: solid; border-top-left-radius: 20px; }

.section3 .support-wrap .sec-con .sp-list > li > a .linebox.top.right { bottom: calc(100% - 19px); right: -1px; transition-delay: 250ms; }
.section3 .support-wrap .sec-con .sp-list > li > a .linebox.top.right::before { border-width: 3px 3px 0 0; border-style: solid; border-top-right-radius: 20px; }

.section3 .support-wrap .sec-con .sp-list > li > a .linebox.bottom.left { right: calc(100% - 19px); bottom: -1px; transition-delay: 250ms; }
.section3 .support-wrap .sec-con .sp-list > li > a .linebox.bottom.left::before { border-width: 0 0 3px 3px; border-style: solid; border-bottom-left-radius: 20px; }

.section3 .support-wrap .sec-con .sp-list > li > a .linebox.bottom.right { right: -1px; bottom: -1px; transition-delay: 450ms; }
.section3 .support-wrap .sec-con .sp-list > li > a .linebox.bottom.right::before { border-width: 0 3px 3px 0; border-style: solid; border-bottom-right-radius: 20px; }

.section3 .support-wrap .sec-con .sp-list > li > a:hover::before { height: calc(100% - 38px); transition-delay: 0s; }
.section3 .support-wrap .sec-con .sp-list > li > a:hover::after { width: calc(100% - 38px); transition-delay: 250ms; }
.section3 .support-wrap .sec-con .sp-list > li > a:hover .line::before { width: calc(100% - 38px); transition-delay:  0s; }
.section3 .support-wrap .sec-con .sp-list > li > a:hover .line::after { height: calc(100% - 38px); transition-delay: 250ms; }
.section3 .support-wrap .sec-con .sp-list > li > a:hover .linebox.top.left { height: 20px; transition-delay: 450ms; }
.section3 .support-wrap .sec-con .sp-list > li > a:hover .linebox.top.right { height: 20px; transition-delay: 200ms; }
.section3 .support-wrap .sec-con .sp-list > li > a:hover .linebox.bottom.left { width: 20px; transition-delay: 200ms; }
.section3 .support-wrap .sec-con .sp-list > li > a:hover .linebox.bottom.right { width: 20px; transition-delay: 0ms; }



.section4 .notice-list { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--gray-e5); }
.section4 .notice-list li { position: relative; width: 50%; border-top: 1px solid var(--gray-e5); }
.section4 .notice-list li:nth-child(odd) { padding-right: 30px; }
.section4 .notice-list li:nth-child(even) { padding-left: 30px; }
.section4 .notice-list li:nth-child(even)::before { content:""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 10px; background: var(--gray-e5); }
.section4 .notice-list li a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 0; }
.section4 .notice-list li a .cate-st2 { flex-shrink: 0; }
.section4 .notice-list li a .b-txt-st1 { width: 100%; }
.section4 .notice-list li a:hover .b-txt-st2 { text-decoration: underline; }
.section4 .notice-list li a .sm-txt-st1 { flex-shrink: 0; margin-left: auto; }



.section5 { padding-bottom: 0; }
.section5 .banner-wrap { display: flex; align-items: center; padding: 25px 20px; border-top: 2px solid #000; border-bottom: 1px solid var(--gray-e5); }
.section5 .banner-wrap .sec-tit { flex-shrink: 0; display: flex; align-items: center; gap: 20px; margin-bottom: 0; padding-right: 20px; }
.section5 .banner-wrap .sec-con { width: calc(100% - 230px); }
.section5 .banner-wrap .sec-con .banner-swiper { width: 100%; }
.section5 .banner-wrap .sec-con .banner-swiper .swiper-slide { width: 120px; }
.section5 .banner-wrap .sec-con .banner-swiper a { display: block; }
.section5 .banner-wrap .sec-con .banner-swiper a .img-wrap { height: 30px; }
.section5 .banner-wrap .sec-con .banner-swiper a .img-wrap img { width: 100%; height: 100%; object-fit: contain; }



@media only screen and (max-width: 1830px) {
  .character { transform: scale(0.8); }

  .section2 .character02 { left: 0; bottom: -154px; }
  .section2 .character03 { right: 60px; bottom: -47px; }

  .section3 .side-btn { flex-direction: row; top: 22px; right: 24px; transform: unset; }
}
@media only screen and (max-width: 1345px) {
  .section3 .inner-padding { gap: 60px; }
  .section3 .support-wrap .sec-con { padding: 38px 0; }
  .section3 .support-wrap .sec-con .sp-list { gap: 15px; }
  .section3 .shortcut-wrap .shortcut { width: 340px; height: 355px; padding: 45px 30px; }
}
@media only screen and (max-width: 1300px) {
  .swiper-btn-st1 > div { width: 50px; height: 50px; background-size: auto 15px; }

  .section1 .main-swiper .swiper-btn-st1 > div.swiper-button-prev { left: 0; }
  .section1 .main-swiper .swiper-btn-st1 > div.swiper-button-next { right: 0; }
}
@media only screen and (max-width: 1240px) {
  .section1 .main-swiper { width: 100%; }
  .section1 .main-swiper .swiper-slide { width: 100%; height: unset; }

  .section3 .inner-padding { flex-wrap: wrap; gap: 30px; }
  .section3 .support-wrap .sec-con::after { border-radius: 0; }
  .section3 .shortcut-wrap { width: calc(100% - 170px); }
  .section3 .shortcut-wrap .shortcut { width: 100%; height: unset; border-radius: 2rem; }
  .section3 .side-btn { position: relative; top: unset; right: unset; transform: unset; flex-direction: column; }
}
@media only screen and (max-width: 1023px) {
  .section1 .main-swiper .swiper-slide .img-wrap { border-radius: 3rem; }

  .more-btn-st2 { font-size: 14px; }

  .section2 .sec-con::before { width: 450px; height: 179px; }
  .section2 .sec-con .grid-wrap .box-item { gap: 20px; padding: 40px 20px 100px 20px; }
  .section2 .sec-con .grid-wrap .box-item .num em { font-size: 4.5rem; }
  .section2 .sec-con .grid-wrap .box-item:first-child { background-size: 120px auto; }
  .section2 .sec-con .grid-wrap .box-item:nth-child(2) { background-size: 110px auto; }
  .section2 .sec-con .grid-wrap .box-item:nth-child(3) { background-size: 135px auto; }
  .section2 .sec-con .grid-wrap .box-item:nth-child(4) { background-size: 110px auto; }
  .section2 .sec-con .grid-wrap .box-item:last-child::before { right: -20px; bottom: -40px; background-size: 120px auto; }
  .section2 .sec-con .grid-wrap .box-item .sch-btn { max-width: unset; }

  .section.section3 {  }

  .section4 .notice-list li { width: 100%; }
  .section4 .notice-list li:nth-child(odd) { padding-right: 0; }
  .section4 .notice-list li:nth-child(even) { padding-left: 0; }
  .section4 .notice-list li:nth-child(even)::before { display: none; }
}
@media only screen and (max-width: 767px) {
  .swiper-control-st1 [class^="swiper-button-"] { width: 28px; height: 28px; }

  .swiper-btn-st1 > div { width: 35px; height: 35px; background-size: auto 12px; }
  .swiper-btn-st2 { gap: 5px; }
  .swiper-btn-st2 > div { width: 25px; height: 25px; background-size: auto 8px; }
  
  .section1 .main-swiper .swiper-slide .img-wrap { border-radius: 2rem; }
  .section1 .swiper-control-st1 { bottom: -30px; }
  
  .section2 .sec-con::before { right: -20px; width: 360px; height: 143px; }
  .section2 .sec-con .grid-wrap { grid-template-columns: repeat(2, 1fr); }
  .section2 .sec-con .grid-wrap .box-item:nth-child(3) { margin-top: -1px; }
  .section2 .sec-con .grid-wrap .box-item .inp-flex { max-width: unset; }
  .section2 .character02 { left: -30px; bottom: unset; top: -120px; transform: scale(0.6); }
  .section2 .character03 { transform: scale(0.6); }

  .section3 .support-wrap .sec-con .sp-list { flex-wrap: wrap; gap: 10px; }
  .section3 .support-wrap .sec-con .sp-list > li { flex: 1 1 calc(50% - 5px); }
  .section3 .support-wrap .sec-con .sp-list > li > a { padding: 20px; }
  .section3 .support-wrap .sec-con .sp-list > li > a .txt-wrap .b-txt-st2 { margin-top: 15px; }
  .section3 .shortcut-wrap .shortcut { gap: 30px; padding-bottom: 90px; background-position: right 20px bottom 20px; background-size: 80px auto; }


  .section4 .notice-list li a { gap: 8px; }

  .section5 .banner-wrap { padding: 15px 10px; }
  .section5 .banner-wrap .sec-con { width: calc(100% - 180px); }
}
@media only screen and (max-width: 510px) {
  .section2 .sec-tit { margin-bottom: 100px;; }
  .section2 .sec-con::before { right: -20px; width: 280px; height: 111px; }
  .section2 .sec-con .grid-wrap { grid-template-columns: 1fr; }
  .section2 .sec-con .grid-wrap .box-item { padding-bottom: 60px; }
  .section2 .sec-con .grid-wrap .box-item:first-child { background-size: 100px auto; }
  .section2 .sec-con .grid-wrap .box-item:nth-child(2) { margin-top: -1px; background-size: 90px auto; }
  .section2 .sec-con .grid-wrap .box-item:nth-child(3) { background-size: 115px auto; }
  .section2 .sec-con .grid-wrap .box-item:nth-child(4) { background-size: 90px auto; }
  .section2 .sec-con .grid-wrap .box-item:last-child::before { right: -20px; bottom: -70px; background-size: 100px auto; }
  .section2 .sec-con .grid-wrap .box-item:last-child { grid-column: auto; }
  
  .section3 .shortcut-wrap { width: 100%; }
  .section3 .side-btn { flex-direction: row; justify-content: center; width: 100%; }
}




.popup-wrap.chat-lp .popup-box1 { position: relative; padding: 50px 35px; border-radius: 2rem; overflow: hidden; }
.popup-wrap.chat-lp .popup-box1::before { content:""; position: absolute; top: 80px; left: 0; width: 115px; height: calc(100% - 80px); border-radius: 0 2rem 0 0; background: var(--main2) }
.popup-wrap.chat-lp .popup-box1 .popup-top { margin-bottom: 25px; padding: 0; }
.popup-wrap.chat-lp .popup-box1 .popup-top .tit { display: block; width: 103px; height: 53px; background: url(../img/main/chatpop-tit01.png) no-repeat center center / contain; }
.popup-wrap.chat-lp .popup-box1 .popup-cont { padding: 0; }
.chat-lp .item { display: flex; }
.chat-lp .item .lf { flex-shrink: 0; }
.chat-lp .item .lf .sub-tit { display: block; width: 124px; height: 60px; background: url(../img/main/chatpop-tit02.png) no-repeat center center / contain; }
.chat-lp .item .rg { width: 100%; }

@media only screen and (max-width: 767px) {
  .popup-wrap.chat-lp .popup-inner { height: 100vh; padding: 0; }
  .popup-wrap.chat-lp .popup-box1 { height: 100%; padding: 30px 20px; border-radius: 0; }
  .popup-wrap.chat-lp .popup-box1::before { width: 80px ; }
  .popup-wrap.chat-lp .popup-box1 .popup-top .tit { width: 70px; height: 40px; }
  .chat-lp .item .lf .sub-tit { width: 80px; height: 30px; }
}