/**/
header{padding: 2rem 0 0; transition: 0.3s ease;position: fixed; top: 0; left: 0; width: 100%; z-index: 2; background-color: #fff0; border-bottom:0; transition: 0.3s ease;}
header.fixed{position: fixed; top: 0; left: 0; width: 100%; z-index: 2; background-color: #fff; border-bottom: 1px solid #eee; transition: 0.3s ease;}
header .black {display: none}
header.fixed .black {display: block}
header.fixed .white {display: none}

header .mobile{display: none;}
header .inner{position: relative;}
header div.logo{max-width: 1065px;width: 100%;padding: 0 15px;margin: 0 auto; display: flex; gap: 15px; color: #fff; align-items: center}
header.fixed div.logo{color: #000; }

.tnb > a{margin-left: 6px;}
.tnb .hd_count{display: none; }
.tnb .hd_count li{line-height: 1.2em;}
.tnb > ul{margin-right: 10px;}
.tnb .mobile{display: none;}
.mobile-menu{display: none;}

@media screen and (min-width: 1200px) {
    #gnb {font-size: 1.1em;}
    #gnb .depth1 {list-style: none;padding: 0;margin: 0;display: flex;align-items: start; gap: 0px;}
    .index  #gnb .depth1 {gap: 10px;}
    #gnb .depth1 > li {padding: 10px 0px; position: relative}
    #gnb .depth1 > li > a {white-space: nowrap;text-decoration: none;padding: 10px ;display: block;font-size: 15px;font-weight: 600;position: relative; height: 40px; border-radius: 10px}
    .index #gnb .depth1 > li > a {color: #fff;}
    #gnb .depth1 > li.qr div {opacity: 1; transition:all .3s ease;max-height: 100px}
    .fixed #gnb .depth1 > li.qr div {opacity: 0;max-height: 0}
    .fixed .index #gnb .depth1 > li > a {color: #000;}
    #gnb .depth1 > li.active > a {color: #0f343e;}
    #gnb .depth1 > li:hover > a {font-weight: 600;color: #000000; background: #00000010; transition: all 0.3s;}
    #gnb .depth1 > li:hover > a:after{width: 100%; height: 4px; opacity: 1; margin-top: 6px;}
    #gnb .depth1 > li > a.txt-orange:after{background: #FF6225!important}
    #gnb .depth1 > li:hover .depth2-wrapper {display: block;}
    #gnb .depth2-wrapper {display: none;position: absolute;top: 20px;left: 0; z-index: 1000;}
    #gnb .depth2 {margin-top: 30px;gap: 10px;row-gap: 0px;display: flex;flex-wrap: wrap;list-style: none;padding: 10px 25px;box-shadow: 0 0 30px #00000010;border-radius: 10px;overflow: hidden;background-color: #fff;width: fit-content}
    #gnb .depth2 li:first-of-type {width: 100%; text-align: left; padding-bottom: 10px; font-size: 12px; color: #6E6E6E}
    #gnb .depth2 li {text-decoration: none;padding: 7px 5px;white-space: nowrap; display: block;text-align: center;}
    #gnb .depth2 li a:hover {color: #0f343e;font-weight: 600;}
    #gnb .mobile-my{display: none;}
    header .inner.index {max-width: 1085px}
    .tnb {display: none!important;}
    .inner:not(.index) .depth1 > li.qr div {display: none;position: absolute;top: 50px;right: 25px;z-index: 1000;}
    .inner:not(.index) .depth1 > li.qr:hover div {display: block}
    header:has(.inner:not(.index)) {padding-top: 0}
}
@media screen and (max-width: 1200px) {
    .depth2-wrapper {overflow: hidden;max-height: 0;transition: max-height 0.3s ease;}
    .depth2-wrapper.open {}
    #gnb .depth2 li:first-of-type {display: none}
    header .mobile{display: block;}

    header{padding: 1rem 3rem;}
    header>.mobile{display: flex; align-items: center; justify-content: space-between; gap: 4px; padding-top: 0px;}
    header>.mobile>a{width: 100%;}
    header h1 img{height: 25px;}
    header {white-space:nowrap;display: flex;}
    .mobile-menu{display: block;}
    .mobile-menu i{font-size: 1.8em; height: 35px; line-height: 35px; width: 30px; text-align: center; color: #1C1C1C;}
    header .inner {justify-content: flex-end !important;}

    .tnb > ul{display: none!important;}
    .tnb .mobile{display: inline-block;}
    .tnb .btn-line{display: none}

    /**/
    #gnb {position: fixed;right: -90%; /* Hide it outside the screen */top: 0;width: 90%;height: 100%;background-color: #f7f8fc;z-index: 1000;transition: right 0.3s ease-in-out; padding: 1rem; overflow-y: auto; max-width: 400px;}
    #gnb.open {right: 0; z-index: 9999; /* Slide in the menu */}

    #gnb .depth1{border-bottom: 1px solid #eee;}
    #gnb .depth1 > li > a{font-size: 1.2em;font-weight: 600;border-top: 1px solid #eee; padding: 1.2rem 1rem;display: flex; align-items: center;}
    #gnb .depth2{padding: 1rem 1.6rem; background-color: #fff; border-radius: 10px; margin-bottom: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 10px}
    #gnb .depth2 a:before{content: ""; display: inline-block; width: 4px; height: 4px; background-color: #5abdb0; margin-right: 6px; vertical-align: middle; border-radius: 50%;}
    #gnb .mobile-my{display: block; padding: 1rem}
    #gnb .mobile-my .btn{margin-bottom: 0;}
    #gnb .mobile-my .close-btn{font-size: 2em;cursor: pointer}
    #gnb .lnb{margin-top: 10px;}
    #gnb .lnb .mypage{padding-top: 10px; padding-bottom: 10px;}
    #gnb .lnb .mypage span{color: #333333}
    #gnb .lnb a{border-bottom: 0; font-size: 0.9em; line-height: 1.8em; display: flex; align-items: center;}
    #gnb .lnb a:after{content: ""; width: 1px; height: 12px; background-color: #ccc; display: inline-block; margin: 0 4px;}
    #gnb .lnb a:last-child:after{display: none;}

    .container{padding-left: 1rem; padding-right: 1rem;}

    .fnb > .flex{display: block!important;}
    .fnb > .flex li{display: inline-block;}

    .lnb_wrapper{display: block!important;}
    .lnb_wrapper .lnb{display: none;}
}

@media screen and (max-width: 992px) {
    header {padding: 1rem;}
}


#wrapper{ min-height: 80vh}
.lnb-side{display: grid; grid-template-columns: 220px 1fr; gap: 60px;}
.container{padding: 0;margin: 0;}


/**/

footer{padding: 3rem 0 5rem; background: #05343E; color: #fff}
.fnb{  padding: 2rem 0; font-size: 1.1em;}
.fnb a{font-weight: 600; color: #fff}
.copy{padding: 1rem 0;}
.copy h1{font-weight: 600; font-size: 1.1em;margin-top: 25px}
.copy ul{margin: 6px 0; opacity: 0.6}
.copy li{margin-right: 10px; display: inline-block;}
.copy .flex div h5 {font-weight: 600; margin-bottom: 10px}
.copy .flex div p { opacity: 0.6}
.dot-list ul li:not(:last-child):after{content: ""; display: inline-block; vertical-align: middle; width: 4px; height: 4px; border-radius: 50%; background-color: #55555520; margin: 0 6px 1px}
.area-top{border-bottom: 3px solid #555; margin-bottom: 40px; padding-bottom: 20px;}


@media screen and (max-width: 768px) {
    .copy .flex {display: block!important;}
    .copy .flex div {text-align: right}
    .copy .flex div {padding: 25px 0}
}

/**/

.sub-box {margin-top: 60px; background: url("../img/common/sub01.png") center bottom no-repeat; text-align: center; padding-top: 60px; background-size: cover}
.sub-box h6 {color: #fff; font-weight: 600; font-size: 40px; margin: 15px 0 25px}
.sub-box p {display: inline-block; background: #fff; color: #5BBEB1; font-weight: 800; font-size: 20px; padding: 15px 25px; border-radius: 10px 10px 0 0}
.sub-box p:has(a) { padding: 0px; border-radius: 10px 10px 0 0}
.sub-box p a {display: inline-block; background: #fff; color: #5BBEB1; font-weight: 800; font-size: 20px; padding: 15px 25px; border-radius: 10px 10px 0 0}

@media screen and (max-width: 1200px) {
    .sub-box { padding-top: 30px;}
    .sub-box h6 {font-size: 30px; margin: 15px 0 25px}
    .sub-box p {font-size: 16px; padding: 10px 20px; border-radius: 10px 10px 0 0}

}
/**/

.mypage{margin-top: 100px;}
.mypage p{font-size: 1.15em;}
.mypage span{font-size: 0.9em;}

@media screen and (max-width: 1200px) {
    .signup .box-gray .grid2,
    .sign_form .box-gray .grid2{grid-template-columns: 1fr!important;}
}

/*메인*/

.main-slider{height: 100vh; margin: 0 auto; position: relative; z-index:1; }
.main-slider .main-swiper {width: 100%;height: 100%; border-radius: 0px; overflow: hidden;}
.main-slider .swiper-slide {text-align: center;font-size: 18px;background: #fff; display: flex;justify-content: center;align-items: center;}
.main-slider .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
.main-slider .text {    text-shadow: 0 0 6px #00000014;font-size: 96px;font-weight: 600;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);z-index: 3;color: #ffffff; line-height: 96px}
.main-slider .text span {color: rgba(255, 255, 255, 0.4);}
.main-slider  i {position: absolute; bottom:50px; left: 50%; transform: translate(-50%,0);z-index: 3;color: #ffffff;}
.main-slider .text3 {background: #ffffff;border-radius: 90px;padding: 5px 15px 5px 15px;position: absolute; bottom:70px; left: 50%; transform: translate(-50%,0);z-index: 3;color: #5c5c5c;font-size: 11px;}
.main-slider .text2 {    text-shadow: 0 0 6px #00000014;font-size: 45px;font-weight: 700;position: absolute; bottom:27%; left: 50%; transform: translate(-50%,0);z-index: 3;color: #ffffff;}
.main-slider .text2 span {color: rgba(255, 255, 255, 0.4);}
.main-slider .text4 {    text-shadow: 0 0 6px #00000014;font-size: 35px;font-weight: 700;position: absolute; top:35%; left: 50%; transform: translate(-50%,0);z-index: 3;color: #ffffff;}
.main-slider .text4 + .text {top:52%;}
.main-slider .text4 span {color: rgba(255, 255, 255, 0.4);}

main div.inner > .smile {margin-bottom: 28px}
main div.inner > h2 {font-size: 48px; font-weight: 600; line-height: 48px; margin-bottom: 63px}

main .with-box {padding: 117px 0; text-align: center}
main .with-box ul {display: flex; gap: 35px;flex-wrap: wrap}
main .with-box ul li {text-align: left;color: #fff;border-radius: 30px; background: #f8f8f8;height: 500px; padding: 55px;display: flex; flex-direction: column; justify-content: space-between}
main .with-box ul li h6 {line-height: 1.4em;font-size: 30px; font-weight: 800}
main .with-box ul li p {line-height: 1.4em;font-size: 20px; font-weight: 600}
main .with-box ul li:nth-of-type(1),
main .with-box ul li:nth-of-type(4) {width:33.33% }
main .with-box ul li:nth-of-type(2),
main .with-box ul li:nth-of-type(3) {width:63.29% }
main .with-box ul li:nth-of-type(1) {transition: background-size 0.3s ease;background: url("../img/with01.png") no-repeat center; background-size: cover}
main .with-box ul li:nth-of-type(2) {transition: background-size 0.3s ease;background: url("../img/with02.png") no-repeat center; background-size: cover}
main .with-box ul li:nth-of-type(3) {transition: background-size 0.3s ease;background: url("../img/with03.png") no-repeat center; background-size: cover}
main .with-box ul li:nth-of-type(4) {transition: background-size 0.3s ease;background: url("../img/with04.png") no-repeat center; background-size: cover}
main .with-box ul li {background-size: auto 100%!important;}
main .with-box ul li:hover {background-size: auto 110%!important;}

main .plus-box {padding: 117px 0; text-align: center;background:#F7F8FCFF}
main .plus-box ul {display: flex; gap: 35px;}
main .plus-box ul li {align-items: center;width: 100%;border-radius: 30px; background: #ebedf4;height: 500px; padding: 65px 0; display: flex; flex-direction: column; justify-content: space-between}
main .plus-box ul li h6 {line-height: 1.4em;font-size: 30px; font-weight: 800}
main .plus-box ul li p {line-height: 1.4em;font-size: 20px; font-weight: 600; color: #05343E}
main .plus-box ul li img {height: 157px; }

main .mockup-box {padding: 293px 0; text-align: center;background:linear-gradient(to bottom, #fff, #F7F8FC)}
main .mockup-box .inner {display: flex; flex-direction: column; justify-content: space-between;gap: 30vh}
main .mockup-box .inner > div {display: flex; justify-content: start;gap: 90px; align-items: center}
main .mockup-box .inner .image {position: relative; padding: 30px 0 30px 255px}
main .mockup-box .inner .image .phone {position: absolute; z-index: 1; left: 0; top: 0}
main .mockup-box .inner .image img:not(.phone) {mix-blend-mode: multiply}
main .mockup-box .inner .text {display: flex; flex-direction: column; justify-content: space-between;gap: 35px; text-align: left}
main .mockup-box .inner .text h6 {line-height: 1.4em;font-size: 36px; font-weight: 800}
main .mockup-box .inner .text h5 {line-height: 1.4em;font-size: 16px; font-weight: 600; color: #05343E;}
main .mockup-box .inner .text p {line-height: 1.4em;font-size: 18px; font-weight: 400; color: #9A9A9A}

main .contact-box {padding: 117px 0; text-align: center}
main .contact-box a.faq {border-radius: 99px; display: flex; gap: 15px; padding: 10px 25px; margin: -40px auto 60px}
main .contact-box a.business {margin-top: 35px;font-size: 20px; font-weight: 600;background: #F7F8FC;padding: 25px;cursor: pointer;border-radius: 15px;display: flex;justify-content: space-between}
main .contact-box .accordion { margin: 0px 0 110px}
main .contact-box .grid {gap: 35px}
main .contact-box .grid a {text-align: center;border-radius: 15px; padding: 20px 0 50px;display: flex; flex-direction: column; justify-content: space-between;gap: 0px; }
main .contact-box .grid a button {border-radius: 99px; margin: -15px auto 0 }
main .contact-box .grid a img {width: 150px; margin: 0 auto }
main .contact-box .grid li:first-of-type a {background: #f9e100}
main .contact-box .grid li:last-of-type a {background: #03eb65}

main .app-box {padding: 100px 0; text-align: center; background: url("../img/app01.png") no-repeat center bottom; background-size: cover}
main .app-box img {width: 150px; margin: 0 auto }
main .app-box button {border-radius: 99px;  }
main .app-box h4 {line-height: 1.4em;font-size: 48px; font-weight: 700; color: #fff;}


@media screen and (max-width: 1200px) {
    .main-slider .text {font-size: 70px; top: 40%;}
    .main-slider .text2 {font-size: 33px;font-weight: 700;position: absolute; bottom:32%;white-space: nowrap;}


    main div.inner > .smile {margin-bottom: 15px;}
    main div.inner > h2 {font-size: 35px;line-height: 35px;margin-bottom: 50px;}

    main .with-box {padding: 100px 0}
    main .with-box ul {gap: 15px}
    main .with-box ul li {padding:25px;height: 300px; background-size: 100% 100% cover!important;}
    main .with-box ul li h6 {font-size: 20px; }
    main .with-box ul li p {font-size: 15px; }
    main .with-box ul li:nth-of-type(1),
    main .with-box ul li:nth-of-type(4),
    main .with-box ul li:nth-of-type(2),
    main .with-box ul li:nth-of-type(3) {width: calc( 50% - 7.5px) }

    main .plus-box {padding: 100px 0}
    main .plus-box ul { flex-direction: column; gap: 15px}
    main .plus-box ul li {text-align: left;height: 150px; padding: 15px 35px; display: flex; flex-direction: row; justify-content: space-between}
    main .plus-box ul li h6 {font-size: 20px; }
    main .plus-box ul li p {font-size: 15px; }
    main .plus-box ul li img {height: 50px}

    main .mockup-box {padding: 70px 0}
    main .mockup-box .inner  {gap: 45px;}
    main .mockup-box .inner > div {flex-direction: column;gap: 10px;}
    main .mockup-box .inner .image {display: flex; flex-direction: row;position: relative; padding: 0px;width: 80%; align-items: center; justify-content: center}
    main .mockup-box .inner .image .phone {position: unset}
    main .mockup-box .inner .image img {width: 40vw}
    main .mockup-box .inner .image img:not(.phone) {width: 30vw}
    main .mockup-box .inner .text { min-width: 70%;display: flex; flex-direction: column; justify-content: space-between;gap: 15px; text-align: center}
    main .mockup-box .inner .text h6 {font-size: 25px;}
    main .mockup-box .inner .text h5 {font-size: 14px;}
    main .mockup-box .inner .text p {font-size: 16px;}

    main .contact-box a.faq {margin: -20px auto 60px}
    main .contact-box a.business {font-size: 15px;margin-top: 15px;padding: 20px}
    main .contact-box .grid {gap: 15px}

    main .app-box h4 {font-size: 30px;}
}


.accordion {width: 100%;display: flex; flex-direction: column; justify-content: space-between;gap: 15px; text-align: left}
.accordion-item {}
.accordion-header {font-size: 20px; font-weight: 600;background: #F7F8FC;padding: 25px;cursor: pointer;border-radius: 15px;display: flex;justify-content: space-between}
.accordion-header:after {display: block;font-family: "Font Awesome 6 Pro";font-weight: 900;content: "\f078";}
.accordion-content {display: none;padding: 20px;background: #fff;}
.accordion-item.active .accordion-content {display: flex; gap: 5px; }
.accordion-item.active .accordion-content b {font-size: 20px; font-weight: 600;color: #5BBEB1 }
.accordion-item.active .accordion-content p {font-size: 16px; font-weight: 600; }
.accordion-item.active .accordion-header:after {display: block;font-family: "Font Awesome 6 Pro";font-weight: 900;content: "\f077";}

@media screen and (max-width: 1200px) {
    .accordion-header {font-size: 15px;padding: 20px}
}
/**/

#company .company-box {padding: 220px 0; position: relative;overflow: hidden;}
#company .company-box:before {content: ''; display: block; width: 55vh; height: 45vh; background: url("../img/company02.png") center center no-repeat; background-size: contain; position: absolute; right: 15vw; top: 10vh }
#company .company-box:after {content: ''; display: block; width: 55vh; height: 45vh; background: url("../img/company03.png") center center no-repeat; background-size: contain; position: absolute; left: 15vw; bottom: 10vh }
#company .company-box h4 {line-height: 1.4em;font-size: 48px;color: #05343E; font-weight: 700; margin:20px 0;position: relative;z-index: 1;}
#company .company-box h4 + p {line-height: 1.4em;font-size: 18px;color: #9A9A9A;position: relative;z-index: 1;}
#company .company-box h4 + p + h6 {line-height: 1.55em;font-size: 18px;color: #05343E;position: relative;z-index: 1; margin-top: 15px; font-weight: 600}
#company .company-box .history-box {margin: 150px 0 100px; text-align: right;position: relative;z-index: 1}
#company .company-box .history-box h6 {line-height: 1.4em;font-size: 30px;color: #000; font-weight: 700; margin-bottom: 25px }
#company .company-box .history-box p {line-height: 1.4em;font-size: 18px;color: #9A9A9A; }
#company .company-box .history-box p b {color: #5C5C5C; font-weight: 800 }
#company .company-box .history-box ul {display: grid; grid-template-columns: repeat(1, 1fr);row-gap: 25px;; max-width: 800px;margin-left: auto;}

#company .banner-box {height: 840px;background: url("../img/company.png") center bottom no-repeat; padding-top: 60px; background-size: cover; display: flex; justify-content: center; align-items: center}
#company .banner-box .inner{display: flex; justify-content: center; align-items: center}
#company .banner-box .text-box {gap: 20px;display: flex; justify-content: center; align-items: center; width: 100%; white-space: nowrap}
#company .banner-box .text-box hr {display: block; border-top: 1px solid #ffffff;width: 100%;}
#company .banner-box .text {font-size: 96px;font-weight: 600;;color: #ffffff; line-height: 96px}
#company .banner-box .text span {color: rgba(255, 255, 255, 0.2);}
#company .banner-box .text2 {font-size: 45px;font-weight: 700;color: #ffffff;}
#company .banner-box .text2 span {color: rgba(255, 255, 255, 0.2);}
#company a.link {transition: all .3s ease;top: 0;background: #fff; border-radius: 15px; padding: 20px; font-weight: 600; font-size: 20px; color: #05343E; box-shadow: 0 0 20px #5BBEB135, 0 10px 30px #05343E35; width: 100%; position: relative; display: flex;align-items: center; justify-content:space-between;z-index: 1;}
#company a.link:hover {top: -10px}

@media screen and (max-width: 1200px) {
    #company .company-box:before {width: 35vh; height:25vh; right: 5vw; top: 10vh }
    #company .company-box:after {width: 35vh; height: 25vh; left: 5vw; bottom: 10vh }
    #company .company-box h4 {font-size: 35px}
    #company .company-box h4 + p {font-size: 16px; }
    #company .company-box .history-box h6 {font-size: 20px; }
    #company .company-box .history-box p {font-size: 14px;}

    #company .banner-box {height: 60vh;min-height: 600px}
    #company .banner-box .text-box {flex-direction: column}
    #company .banner-box .text-box hr {display: none;}
    #company .banner-box .text {font-size: 70px; }
    #company .banner-box .text2 {font-size: 33px;}
    #company a.link { font-size: 17px;}
}

/**/

#faq {padding: 200px 0}
#faq h2 {font-size: 48px; font-weight: 600; line-height: 1.3em; margin-bottom: 45px; color: #05343E}
#faq h3 {font-size: 40px; font-weight: 600; line-height: 1.3em; margin-bottom: 40px}
#faq .select {margin-bottom: 30px}
#faq .accordion {margin-bottom: 120px}
#faq a.link {transition: all .3s ease;top: 0;background: #fff; border-radius: 15px; padding: 20px; font-weight: 600; font-size: 20px; color: #05343E; box-shadow: 0 0 20px #5BBEB135, 0 10px 30px #05343E35; width: 100%; position: relative; display: flex;align-items: center; justify-content:space-between;z-index: 1;}
#faq a.link:hover {top: -10px}


@media screen and (max-width: 1200px) {
    #faq {padding:100px 0}
    #faq h2 {font-size: 35px; margin-bottom: 35px}
    #faq h3 {font-size: 30px; margin-bottom: 30px}
    #faq a.link { font-size: 17px;}
}

/**/

#contact {padding: 120px 0}
#contact h2 {font-size: 40px; font-weight: 600; line-height: 1.3em; margin: 10px 0 20px; color: #05343E}
#contact h2 + p{font-size: 18px; font-weight: 600; line-height: 1.3em; margin-bottom: 45px; color: #000}
#contact .box-line {margin-bottom: 25px}

@media screen and (max-width: 1200px) {
    #contact {padding:100px 0}
    #contact h2 {font-size: 30px;}
}

/**/
.manual .process-container {margin: 0 auto;padding: 140px 0 100px;position: relative;}
.manual .step {display: flex;align-items: flex-start;margin-bottom: 0px;position: relative;}
.manual .circle {min-width: 30px;height: 30px;background-color: #6ab7ad;color: white;border-radius: 50%;text-align: center;line-height: 30px;font-weight: bold;margin-right: 20px;position: relative;z-index: 1;}
.manual .step::before {content: "";position: absolute;top: 30px;left: 14px;width: 2px;height: calc(100% - 30px);background-color: #ccc;z-index: 0;}
.manual .step:last-child::before {display: none;}
.manual .content {;margin-bottom: 60px}
.manual .content h3 {margin: 0;font-size: 1.75em;color: #222; font-weight: 600;}
.manual .content p {margin: 10px 0 0;font-size: 1.1em;color: #555;}
.manual .phone {margin-left: auto; height: 400px;margin-bottom: 60px}
.manual .app-box {padding: 100px 0 30px; text-align: center;}
.manual .app-box img {width: 150px; margin: 0 auto }
.manual .app-box button {border-radius: 99px;  }
.manual .app-box h4 {line-height: 1.4em;font-size: 48px; font-weight: 700; color: #05343E;}


@media screen and (max-width: 1200px) {
    .manual .process-container {padding: 40px 0 100px;}
    .manual .step {display: grid;grid-template-columns: 30px 1fr;gap: 20px;row-gap: 0;}
    .manual .content {;margin-bottom: 20px}
    .manual .phone {margin: 0 auto 40px;grid-column: 1 / 3;}
    .manual .app-box h4 {font-size: 30px;}
}

/**/
body:has(section.service) header:not(.fixed) #gnb:not(.open) .depth1 > li > a {color: #fff;}
body:has(section.service) header:not(.fixed) .mobile-menu i{color: #fff;}
body:has(section.service) header:not(.fixed) h1 {filter: invert(1) grayscale(1);}
/*
body:has(#gnb.open) header:not(.fixed){filter:unset;}
body:has(section.service) header:not(.fixed) #gnb .depth2{filter: invert(1) grayscale(1);}
body:has(#gnb.open) header:not(.fixed) #gnb .depth2{filter:unset;}
body:has(section.service) header:not(.fixed) .qr div{filter: invert(1) grayscale(1);}*/
#service-monthly{padding: 200px 0; min-height: 100vh; text-align: center; background: url(../img/service01.jpg) no-repeat center bottom, linear-gradient(to bottom, #494949, #66a79e4a); background-size: cover; background-blend-mode: multiply;}
#service-public{padding: 200px 0; min-height: 100vh; text-align: center; background: url(../img/service02.jpg) no-repeat center bottom, linear-gradient(to bottom, #494949, #66a79e4a); background-size: cover; background-blend-mode: multiply;}
#service-food{padding: 200px 0; min-height: 100vh; text-align: center; background: url(../img/service03.jpg) no-repeat center bottom, linear-gradient(to bottom, #494949, #66a79e4a); background-size: cover; background-blend-mode: multiply;}
#service-order{padding: 200px 0; min-height: 100vh; text-align: center; background: url(../img/service04.jpg) no-repeat center bottom, linear-gradient(to bottom, #494949, #66a79e4a); background-size: cover; background-blend-mode: multiply;}
#service-personnel{padding: 200px 0; min-height: 100vh; text-align: center; background: url(../img/service05.jpg) no-repeat center bottom, linear-gradient(to bottom, #494949, #66a79e4a); background-size: cover; background-blend-mode: multiply;}
#service-rental{padding: 200px 0; min-height: 100vh; text-align: center; background: url(../img/service06.jpg) no-repeat center bottom, linear-gradient(to bottom, #494949, #66a79e4a); background-size: cover; background-blend-mode: multiply;}
.service .inner > h6 {background: #5abdb0;border-radius: 90px;padding: 5px 15px 5px 15px;color: #ffffff;font-size: 16px;width: fit-content; margin: 10px auto 30px}
.service .inner > h3 { font-size: 70px; font-weight: 500; line-height: 1.3em; margin: 0px 0 0px; color: #fff; letter-spacing: -2px}
.service .inner > h3 span {font-weight: 800;background: linear-gradient(90deg, rgba(255, 255, 255) 45%, rgb(150, 255, 231) 48%, #65ffe9, rgb(150, 255, 231) 52%, rgba(255, 255, 255) 65%);
    background-size: 200% 200%;-webkit-background-clip: text;background-clip: text;color: transparent;animation: sparkle 2s ease-in-out infinite, sparkle2 2s ease-in-out;}
.service .inner > h4 { font-size: 45px; font-weight: 500; line-height: 1.3em; margin: 0px 0 20px; color: #fff}
.service .inner > h4 span {color: #c1fff7;animation:sparkle2 2s ease-in-out;}
.service .inner .grid3 {margin: 60px auto 0; gap: 30px; max-width: 800px}
.service .inner .grid3 div {border-radius: 30px;padding: 30px;background: linear-gradient(45deg, #ffffff30, #ffffff80);animation: blurAnimation 10s ease-in-out forwards;
    backdrop-filter: blur(0px);border: 1px solid rgba(255, 255, 255, .3);color: #333;box-shadow: 0 0 10px #00000006;}
.service .inner .grid3 div i { color: #fff;margin: 0 auto;font-size: 30px;width: 70px; height: 70px; border-radius: 70px; border: 1px solid #fff; display: flex; align-items: center; justify-content: center}
.service .inner .grid3 div h6 { line-height: 1.3em;font-size: 1.5em;color: #fff;text-align: center; margin-top: 25px; font-weight: 600}
@keyframes blurAnimation {
    from {
        backdrop-filter: blur(0px);
    }
    to {
        backdrop-filter: blur(10px);
    }
}
@keyframes sparkle {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes sparkle2 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


@media screen and (max-width: 1200px) {
    .service .inner > h3 { font-size: 3em;  line-height: 1.1em;}
    .service .inner > h4 { font-size: 1.85em;}
    .service .inner .grid3 {width: 80%;gap: 10px; grid-template-columns: 1fr}
    .service .inner .grid3 div {display: flex; align-items: center; justify-content: space-between}
    .service .inner .grid3 div i {margin: 0}
    .service .inner .grid3 div h6 {text-align: right; margin: 0}
}

/**/

#consult {padding: 100px 0; }
#consult .grid {gap: 35px}
#consult .grid a {text-align: center;border-radius: 15px; padding: 20px 0 50px;display: flex; flex-direction: column; justify-content: space-between;gap: 0px; }
#consult .grid a button {border-radius: 99px; margin: -15px auto 0 }
#consult .grid a img {width: 150px; margin: 0 auto }
#consult .grid li:first-of-type a {background: #f9e100}
#consult .grid li:last-of-type a {background: #03eb65}
#consult hr {display: block; width: 100%;margin-bottom: 80px}
#consult dl{margin: 0 0 80px}
#consult dl dt{font-size: 1.8em;font-weight: 700;margin-top: 30px;margin-bottom: 20px;color: #05343E;}
#consult dl dt i{color: #05343E;}
#consult dl dd{font-size: 2rem; display: grid; grid-template-columns: repeat(2, 1fr);gap: 35px}
#consult dl dd p{margin: 0;font-weight: 300;}
#consult dl dd span{width: 100%;display:block;font-weight: 600;font-size: .95em;}
#consult h2 {font-size: 40px; font-weight: 600; line-height: 1.3em; margin-bottom: 45px; color: #05343E}

@media screen and (max-width: 1200px) {
    #consult .grid {gap: 5px}
    #consult .grid a img {width: 100px; margin: 0 auto }
    #consult dl dd{gap: 5px}
    #consult h2 {font-size: 30px; margin-bottom: 35px}
}

#news-list {padding:100px 0}
#news-list .news-vertical {list-style:none;display:flex;flex-direction:column;gap:20px}
#news-list .news-vertical li a {display:flex;gap:20px;align-items:flex-start;text-decoration:none;color:#000;border-bottom:1px solid #eee;padding-bottom: 20px}
#news-list .news-vertical .thumb {flex-shrink:0;width:120px;height:80px;overflow:hidden;border-radius:8px;background:#f1f1f1}
#news-list .news-vertical .thumb img {width:100%;height:100%;object-fit:cover}
#news-list .news-vertical .text {flex:1}
#news-list .news-vertical .title {font-size:18px;font-weight:600;margin-bottom:10px;line-height:1.4}
#news-list .news-vertical .desc {font-size:15px;color:#555;line-height:1.6;margin-bottom:8px}
#news-list .news-vertical .date {font-size:13px;color:#999}
#news-list .news-vertical li a:hover .title {text-decoration:underline}

#news-view {padding:100px 0}
#news-view .news-detail .title {font-size:26px;font-weight:700;line-height:1.4;margin-bottom:15px}
#news-view .news-detail .meta {font-size:14px;color:#999;margin-bottom:25px}
#news-view .news-detail .thumb {margin-bottom:30px;border-radius:10px;overflow:hidden}
#news-view .news-detail .thumb img {width:100%;display:block}
#news-view .news-detail .content {font-size:16px;line-height:1.8;color:#333}
#news-view .news-detail .content p {margin-bottom:20px}
#news-view .news-detail .nav-links {display:flex;justify-content:space-between;margin-top:40px}
#news-view .news-detail .nav-links a {font-size:15px;color: #5abdb0;text-decoration:none; font-weight: 600}
#news-view .news-detail .nav-links a:hover {color: #308f82;}

#event-list {padding:100px 0}
#event-list .event-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;list-style:none}
#event-list .event-grid li a {display:block;border-radius:15px;overflow:hidden;background:#fff;border:1px solid #eee;transition:all .3s}
#event-list .event-grid li a:hover {border:1px solid #bebebe;}
#event-list .event-grid .thumb {width:100%;aspect-ratio:4/3;overflow:hidden;background:#f5f5f5}
#event-list .event-grid .thumb img {width:100%;height:100%;object-fit:cover;display:block}
#event-list .event-grid .text {padding:20px}
#event-list .event-grid .title {font-size:18px;font-weight:600;margin-bottom:10px;line-height:1.4;color:#000}
#event-list .event-grid .date {font-size:14px;color:#777}


#event-view {padding:100px 0}
#event-view .event-detail .title {font-size:26px;font-weight:700;line-height:1.4;margin-bottom:15px}
#event-view .event-detail .meta {font-size:14px;color:#999;margin-bottom:25px}
#event-view .event-detail .thumb {margin-bottom:30px;border-radius:10px;overflow:hidden}
#event-view .event-detail .thumb img {width:100%;display:block}
#event-view .event-detail .content {font-size:16px;line-height:1.8;color:#333}
#event-view .event-detail .content p {margin-bottom:20px}
#event-view .event-detail .nav-links {display:flex;justify-content:space-between;margin-top:40px}
#event-view .event-detail .nav-links a {font-size:15px;color: #5abdb0;text-decoration:none; font-weight: 600}
#event-view .event-detail .nav-links a:hover {color: #308f82;}