@charset "UTF-8";

@media screen and (max-width: 1474px) {
    #message .message-container {
        display: block;
    }
    #message {
        padding-left: 0;
        margin: 0 auto;
        justify-content: center;
    }
    #message .about-text {
        padding-top: clamp(0.063rem, -0.353rem + 2.08vw, 1.563rem);
        padding-bottom: clamp(0rem, -0.433rem + 2.17vw, 1.563rem);
    }
    #message .message {
        padding: clamp(0rem, -0.52rem + 2.6vw, 1.875rem) 0 0 clamp(0.625rem, -2.668rem + 16.46vw, 12.5rem);
        margin-bottom: clamp(0rem, -0.693rem + 3.47vw, 2.5rem);
        width: clamp(18.75rem, 4.885rem + 69.32vw, 68.75rem);
        height: clamp(41.875rem, 38.755rem + 15.6vw, 53.125rem);
    }
    #message .message-inner {
        line-height: 50px;
    }
    #message .message .message-sub {
        font-size: clamp(0.938rem, 0.747rem + 0.95vw, 1.625rem);
        margin-top: clamp(0rem, -0.347rem + 1.73vw, 1.25rem);
        margin-bottom: clamp(1.25rem, 1.077rem + 0.87vw, 1.875rem);
        line-height: clamp(1.5rem, 1.223rem + 1.39vw, 2.5rem);
    }
    #message .message p {
        width: clamp(15.938rem, 4.759rem + 55.89vw, 56.25rem);
        font-size: clamp(0.813rem, 0.691rem + 0.61vw, 1.25rem);
        line-height: clamp(1.25rem, 1.025rem + 1.13vw, 2.063rem);
    }
    .message-right {
        line-height: clamp(1.438rem, 0.97rem + 2.34vw, 3.125rem);
        text-align: -webkit-center;
    }
    .message-right-text {
        padding: clamp(2.5rem, 1.893rem + 3.03vw, 4.688rem) 15px clamp(2.188rem, 1.494rem + 3.47vw, 4.688rem);
        margin: 0 auto;
        width: 100%;
        height: 100%;
        background-color: white;
    }
    .message-right-title {
        margin-bottom: clamp(0rem, -0.173rem + 0.87vw, 0.625rem);
        font-size: clamp(1.125rem, 0.882rem + 1.21vw, 2rem);
    }
    .message-right-title .span-01 {
        font-size: clamp(1.75rem, 1.542rem + 1.04vw, 2.5rem);
    }
    .message-right-subtitle p {
        font-size: clamp(0.938rem, 0.747rem + 0.95vw, 1.625rem);
    }
    .message-right-subtitle .span-02 {
        font-size: clamp(1.313rem, 1.157rem + 0.78vw, 1.875rem);
    }
    .message-right-subtext {
        font-size: clamp(0.813rem, 0.674rem + 0.69vw, 1.313rem);
    }
}
@media screen and (max-width: 1370px) {
    #works-top-container .works-top-contents {
        grid-template-columns: repeat(2, 1fr);
    }
    #works-top-container .works-top-contents img {
        width: clamp(10.625rem, -2.848rem + 34.71vw, 26.875rem);
        height: clamp(8.125rem, -1.721rem + 25.37vw, 20rem);
    }
    #works-top-container .categories {
        width: clamp(9.375rem, 6.784rem + 6.68vw, 12.5rem);
    }
}
@media screen and (max-width: 1300px) {
    .strength-img-right {
        opacity: 0.3;
    }
    .strength-img-left {
        opacity: 0.3;
    }
}
@media screen and (max-width: 1292px) {
    nav {
        height: clamp(2.813rem, 2.298rem + 2.57vw, 4.375rem);
        padding: 0 clamp(1.563rem, 0.019rem + 7.72vw, 6.25rem);
        z-index: 9999;
    }
    #menu-open {
        display: initial;
    }
    #menu-close {
        display: initial;
    }
    .navigation li.current a,
    .navigation li a:hover{
        font-size: clamp(0.75rem, 0.668rem + 0.41vw, 1rem);
    }
    nav .navigation ul li a {
        font-size: clamp(0.75rem, 0.668rem + 0.41vw, 1rem);
        transition: var(--transition-300e);
        color: var(--base);
    }
        nav .navigation ul li a::after {
        height: 0;
    }
    .navigation li.current a::after,
    .navigation li a:hover::after {
        animation: none;
    }
    nav .navigation ul li a.active,
    nav .navigation ul li a:hover {
        color: var(--yellow-01);
        text-shadow: 0px 0px 20px var(--gradient-1);
        transition: var(--transition-300e);
    }
    nav .navigation ul li a {
        padding: 0;
    }
    nav .navigation ul li a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0%;
        width: 100%;
        height: 1px;
        background: var(--yellow-01);
        transition: var(--transition-750e);
        transform: scale(0, 1);
        transform-origin: center top;
    }
    nav .navigation ul li a:hover::after {
        transform: scale(1, 1);
        transition: var(--transition-750e);
    }
    header.sticky nav ul li a {
    color: var(--base);
    }
    nav .navigation ul {
        position: absolute;
        top: 0;
        right: -285px;
        width: clamp(11.25rem, 9.09rem + 10.8vw, 17.813rem);
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        backdrop-filter: blur(4.5px);
        background: rgba(0, 52, 157, 0.70);
        border: 1px solid rgba(255, 255,255, 0.18);
        transition: var(--transition-300e);
    }
    nav .navigation ul.active {
        right: 0;
    }
    nav .navigation ul li {
        padding: 20px 0 clamp(0.625rem, 0.419rem + 1.03vw, 1.25rem) clamp(1.25rem, 0.838rem + 2.06vw, 2.5rem);
        margin-left: 0;
    }
    .qa-title::before, .qa-title::after {
        width: 12px;
    }
}
@media screen and (max-width: 1200px) {
    .footer-content {
        flex-direction: column;
    }
    .footer-left {
        justify-content: space-between;
        margin-bottom: 50px;
    }
    footer .footer-col-02 {
        padding-right: clamp(0rem, -12.043rem + 24.39vw, 6.25rem);
    }
}
@media screen and (max-width: 950px) {
    .footer-02 li.has-child ul{
        left: 130%;
    }
    .footer-02 ul ul li.has-child::before{
        right: 450px;
    }
}
@media screen and (max-width: 834px) {
    .enroll {
        display: none;
    }
    .overview {
        width: 100%;
    }
}
@media screen and (max-width: 825px) {
    #services .services-box {
        display: block;
        margin: clamp(1.875rem, 1.083rem + 3.96vw, 3.125rem)  clamp(0rem, -5.941rem + 29.7vw, 9.375rem) 0;
    }
    #services .services-box .service-work .service-details {
        width: clamp(18.438rem, 13.883rem + 22.77vw, 25.625rem);
    }
    #services .services-box .service-work .service-details h3 {
        font-size: clamp(0.813rem, 0.614rem + 0.99vw, 1.125rem);
        margin-top: clamp(0.938rem, 0.739rem + 0.99vw, 1.25rem);
        margin-bottom: clamp(1.875rem, 1.083rem + 3.96vw, 3.125rem);
    }
    #services .services-box .service-work .service-details h3::after {
        left: clamp(15rem, 10.248rem + 23.76vw, 22.5rem);
    }
    #services-top-content .services-top-content-box {
        display: block;
        margin: clamp(1.875rem, 1.083rem + 3.96vw, 3.125rem)  clamp(0rem, -5.941rem + 29.7vw, 9.375rem) clamp(0.313rem, -0.28rem + 2.96vw, 1.25rem);
    }
    #services-top-content .service-top {
        padding: 0 0 5%;
    }
    #services-top-content .service-text {
        padding: 0 clamp(0.938rem, 0.145rem + 3.96vw, 2.188rem);
    }
    #services-top-content .service-top-details {
        width: clamp(12.5rem, 11.708rem + 3.96vw, 13.75rem);
    }
    #services-top-content .services-top-content-box .service-top .service-top-details h3 {
        font-size: clamp(0.813rem, 0.614rem + 0.99vw, 1.125rem);
        margin-top: clamp(0.938rem, 0.739rem + 0.99vw, 1.25rem);
    }
    #services-top-content .services-top-content-box .service-top .service-top-details h3::after {
        left: clamp(11.25rem, 10.458rem + 3.96vw, 12.5rem);
    }
}
@media screen and (min-width: 801px) {
    .change-img-02 {
        display: none;
    }
}
@media screen and (max-width: 800px) {
    .change-img-01 {
        display: none;
    }
    .qa-title::before, .qa-title::after {
        width: 9px;
        height: 1px;
    }
}
@media screen and (max-width: 780px) {
    #works-gallery {
        display: block;
    }
    .gallery .wrapper {
        margin: clamp(0rem, -0.435rem + 2.17vw, 0.625rem) clamp(1.875rem, -5.082rem + 34.78vw, 11.875rem);
    }
    .gallery-image {
        width: clamp(15.313rem, 9.226rem + 30.43vw, 24.063rem);
        margin: 0 auto;
    }
    .gallery-image img {
        width: 100%;
        height: clamp(12.5rem, 8.587rem + 19.57vw, 18.125rem);
    }
    .gallery-thumbnails {
        grid-template-columns: repeat(4, 4fr);
        gap: 0.3rem;
        width: clamp(15.313rem, 9.226rem + 30.43vw, 24.063rem);
    }
    #works-history-content {
        margin: clamp(1.563rem, 1.345rem + 1.09vw, 1.875rem) clamp(0.625rem, -1.114rem + 8.7vw, 3.125rem) clamp(1.875rem, 1.223rem + 3.26vw, 2.813rem);
    }
    #works-history-content h3 {
        font-size: clamp(0.75rem, 0.707rem + 0.22vw, 0.813rem);
        font-weight: var(--font-weight-4);
        margin: 0 clamp(0rem, -0.435rem + 2.17vw, 0.625rem);
        padding: clamp(0.313rem, 0.095rem + 1.09vw, 0.625rem) 10px;
    }
    #works-history-content h4 {
        font-size: clamp(0.75rem, 0.707rem + 0.22vw, 0.813rem);
        margin: 10px 20px 0px;
        padding: 0;
    }
    #works-history-content p {
        font-size: clamp(0.75rem, 0.707rem + 0.22vw, 0.813rem);
        font-weight: var(--font-weight-4);
        margin: 10px 10px 25px;
        padding: 0 10px;
    }
    #works-gallery {
        margin: 0 auto clamp(0.938rem, 0.813rem + 0.63vw, 1.563rem);
    }
    #works-history-spec {
        margin: 0 clamp(1.563rem, -3.438rem + 25vw, 8.75rem);
    }
    #works-history-spec p {
        font-size: 12px;
        font-weight: var(--font-weight-4);
        padding: 0 clamp(0.313rem, -1.644rem + 9.78vw, 3.125rem);
    }
    .img-mask-thumbnails .caption-before span {
        top: clamp(2.813rem, 1.508rem + 6.52vw, 4.688rem);
        width: clamp(3.125rem, 2.908rem + 1.09vw, 3.438rem);
        right: clamp(1.25rem, -0.272rem + 7.61vw, 3.438rem);
        padding: clamp(0.375rem, 0.288rem + 0.43vw, 0.5rem) 0 clamp(0.5rem, 0.413rem + 0.43vw, 0.625rem) 15px;
        font-size: clamp(0.688rem, 0.644rem + 0.22vw, 0.75rem);
    }
    .img-mask-thumbnails .caption-after span {
        top: clamp(2.813rem, 1.508rem + 6.52vw, 4.688rem);
        width: clamp(3.125rem, 2.908rem + 1.09vw, 3.438rem);
        right: clamp(1.563rem, 0.258rem + 6.52vw, 3.438rem);
        padding: clamp(0.375rem, 0.288rem + 0.43vw, 0.5rem) 0 clamp(0.5rem, 0.413rem + 0.43vw, 0.625rem) 15px;
        font-size: clamp(0.688rem, 0.644rem + 0.22vw, 0.75rem);
    }
    .footer-content {
        flex-direction: row;
        margin: 0 auto;
    }
    .footer-left {
        display: block;
    }
    .footer-right {
        width: 100%;
    }
    footer .footer-col-04 {
        margin-left: 0;
    }
    footer .footer-col-02 {
        margin-right: 0;
    }
    .footer-02 li.has-child ul {
        left: 210px;
    }
    .footer-02 ul li.has-child::before {
        left: 180px;
    }
}
@media screen and (max-width: 769px) {
    #hero {
        height: 100%;
    }
    #hero .slider h1 {
        font-size: var(--font-size-35r);
    }
    #hero .slider h2 {
        width: 90%;
    }
    #hero .slider p {
        width: 90%;
    }
    #home {
        padding-top: 0px;
    }
    #home p {
        width: 90%;
    }
    #news .accent-img {
        max-width: 50px;
    }
    #registration {
        margin-top: 8vw;
        padding: 6vw 4vw 6vw 4vw;
    }
    #registration h1 {
        font-size: var(--font-size-36);
    }
    #registration .reminder .time {
        display: flex;
        flex-wrap: wrap;
        margin-top: 40px;
    }
    #experts {
        padding: 8vw 8vw 4vw 8vw;
        text-align: center;
    }
    #experts h1 {
        font-size: var(--font-size-36);
        padding-bottom: 10px;
    }
    footer .copyright .pro-links {
        margin-top: 15px;
    }
    #about-container {
        padding: 8vw 4vw 2vw 4vw;
    }
    #about-container .about-img {
        padding-right: 30px;
    }
    #trust .trust-img img {
        width: 50px;
        height: auto;
    }
    #cases-container {
        flex-direction: column;
    }
    #cases-container .cases {
        width: 100%;
    }
    #cases-container .categories {
        width: 100%;
    }
    #posts-container {
        padding: 8vw 4vw;
    }
    #posts-container img {
        width: 100%;
        height: 50vh;
        object-fit: cover;
    }
    #posts-container .cases-posts {
        width: 100%;
        margin-top: 30px;
    }
    #service-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 8vw 4vw;
    }
    #service-content .overview {
        width: 100%;
    }
    #service-content .overview .service-content-img {
        width: 100%;
        height: 100%;
    }
    #service-content .enroll {
        width: 100%;
        margin-top: 25px;
        margin-left: auto;
        margin-right: auto;
    }
    #contact {
        padding: 8vw 4vw;
    }
}
@media screen and (max-width: 698px) {
    .inner-service-details {
        padding-bottom: clamp(0rem, -1.323rem + 6.61vw, 1.563rem);
        width: clamp(11.875rem, 7.378rem + 22.49vw, 17.188rem);
    }
    .inner-service-details h3 {
        font-size: clamp(0.75rem, 0.485rem + 1.32vw, 1.063rem);
    }
    .inner-service-details h3::after {
        left: clamp(10.625rem, 6.392rem + 21.16vw, 15.625rem);
    }
}
@media screen and (max-width: 680px) {
    #news .news-list-item {
        flex-direction: column;
        padding-top: clamp(0.625rem, -0.208rem + 4.17vw, 1.563rem);
        padding-bottom: clamp(0.625rem, -0.208rem + 4.17vw, 1.563rem);
    }
    #news .news-date {
        margin-bottom: 15px;
    }
}
@media screen and (max-width: 620px) {
    #works-top-container .works-top-contents {
        grid-template-columns: repeat(1, 1fr);
    }
    #works-top-container .works-top-contents img {
        width: clamp(9.375rem, -5.292rem + 73.33vw, 23.125rem);
        height: clamp(6.875rem, -4.458rem + 56.67vw, 17.5rem);
    }
    #works-top-container .categories {
        width: clamp(7.5rem, 5.5rem + 10vw, 9.375rem);
    }
}
@media screen and (max-width: 600px) {
    #features .features-content {
        display: inline-block;
    }
    #features .features-box {
        display: flex;
        margin-bottom: 10px;
        width: clamp(17.5rem, 8.929rem + 42.86vw, 25rem);
        height: clamp(4.375rem, 3.304rem + 5.36vw, 5.313rem);
    }
    #features img {
        width: clamp(1.563rem, 1.205rem + 1.79vw, 1.875rem);
        height: clamp(1.563rem, 1.205rem + 1.79vw, 1.875rem);
        margin: 25px 0 0 clamp(1.875rem, -0.982rem + 14.29vw, 4.375rem);
        padding: 0;
    }
    #features .features-box .features-inner-01 {
        font-size: clamp(0.625rem, 0.482rem + 0.71vw, 0.75rem);
        margin: auto 0 auto 10%;
    }
    #features .features-box .features-inner-02 {
        font-size: clamp(0.625rem, 0.482rem + 0.71vw, 0.75rem);
        margin: auto 0 auto 12%;
    }
    #features .features-box .features-inner-03 {
        font-size: clamp(0.625rem, 0.482rem + 0.71vw, 0.75rem);
        margin: auto 0 auto 7%;
    }
    #features .features-box p span {
        font-size: clamp(0.688rem, 0.545rem + 0.71vw, 0.813rem);
    }
    .footer-content {
        flex-direction: column;
    }
    .footer-left {
        margin-bottom: 50px;
    }
    .footer-02 li.has-child ul {
        top: 85%;
        left: clamp(9.375rem, -1.691rem + 41.18vw, 13.75rem);
    }
}
@media screen and (max-width: 595px) {
    #services .services-box {
        display: block;
        grid-gap: 0;
    }
    #services .services-box .service-work .service-details {
    padding-top: 10px;
    }
    #services .services-box .service-work .service-details h3 {
        font-size: clamp(0.875rem, 0.73rem + 0.73vw, 1rem);
        margin-bottom: 40px;
    }
}
@media screen and (max-width: 481px) {
    #hero .slider h1 {
        font-size: var(--font-size-18r);
        left: 5%;
        margin: 0;
        padding: 0;
    }
    #hero .slider h2 {
        font-size: var(--font-size-16r);
        left: 0%;
    }
    #hero .slider p {
        font-size: var(--font-size-08r);
    }
    #hero .slider .btn {
        position: relative;
    }
    header.sticky nav {
        padding: 0 35px;
    }
    #registration {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    #registration .reminder .time {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    #about-container {
        flex-direction: column-reverse;
    }
    #about-container .about-img {
        width: 100%;
        padding-right: 0px;
    }
    #about-container .about-text {
        width: 100%;
        padding-bottom: 20px;
    }
    #trust .trust-img {
        margin-top: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    #trust .trust-img img {
        width: 60px;
        height: auto;
        margin: 10px 15px;
    }
    #posts-container {
        flex-direction: column;
    }
    #posts-container .cases-posts {
        width: 100%;
    }
    #posts-container img {
        width: 100%;
        height: 50vh;
        object-fit: cover;
    }
    #posts-container .cases-posts {
        width: 100%;
        margin-top: 50px;
    }
    #posts-container .cases-post {
        width: 100%;
        margin-top: 50px;
    }
    .gallery-image  .to-works {
        font-size: var(--font-size-12);
    }
    #service-content .overview .content-head .content-name {
        width: 50%;
    } 
    #service-content .overview .content-head .content-name h2 {
        font-size: var(--font-size-22);
    } 
    #service-content .overview .content-head span {
        font-size: var(--font-size-22);
    } 
    #service-content .enroll {
        width: 100%;
        margin: 0 auto;
    }
    #contact {
        padding: 8vw 4vw;
        flex-direction: column;
        justify-content: flex-start;
        align-content: flex-start;
    }
    footer .footer-right {
        width: 100%;
    }
}
@media screen and (max-width: 450px) {
    #contact-mail .contact-mail-box .contact-mail-02 {
        padding-top: 0;
        display: grid;
    }
    #contact-mail .contact-mail-box img {
        margin: 10px auto;
    }
    footer .copyright p span {
        display: none;
    }
}
@media screen and (max-width: 431px) {
    #modal03 {
        max-width: 350px;
        padding: 20px;
    }
    #features .features-box p {
        font-size: var(--font-size-12);
        margin-bottom: 15px;
    }
    #features .btn {
        margin-top: 45px;
        margin-bottom: 15px;
    }
    #services .service-work {
        text-align: center;
    }
    #works h1 {
        font-size: var(--font-size-24);
        padding-bottom: 0;
    }
    #works h3 {
        margin-bottom: 30px;
        font-size: var(--font-size-14);
    }
    #works .works-gallery {
        margin-top: 50px;
    }
    #works .works-slide-wrapper .works-gallery-content p {
        top: 65%;
        right: 10%;
        font-size: var(--font-size-12);
    }
    #works-top-container .works-top-contents .works-top-post {
        margin: 0;
    }
    #works-top-container .works-top-contents .works-top-post p {
        font-size: var(--font-size-12);
        padding-bottom: 30px;
        width: 210px;
    }
    .timeline a {
        padding: 10px 25px;
    }
    .qa-title::before, .qa-title::after {
        width: 10px;
        height: 1px;
    }
    #contact-tel .contact-tel-box .contact-tel-03 {
        padding-top: 30px;
    }
    #contact-tel .contact-tel-box br {
        display: none;
    }
    #inner-personal .inner-personal-text {
        width: 100%;
    }
    #inner-union .inner-union-text {
        width: 100%;
    }
    #inner-company .inner-company-text {
        width: 100%;
    }
        .footer-02 li.has-child ul {
        left: clamp(3.75rem, -12.614rem + 81.82vw, 9.375rem);
    }
}
@media screen and (max-width: 376) {
    footer input {
        width: 100%;
        margin-bottom: 20px;
    }
}