@charset "utf-8";

:root {
    --html-size : 10px;
    --header-height:120px;
    --header-fix-height:80px;
    --container-max-width:1260px;
    --container-padding:30px;
}

.ellipsis1 {overflow: hidden;white-space: normal;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;}
.ellipsis2 {overflow: hidden;white-space: normal;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;}
.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;}

.mt50{margin-top: 50px;}
.mt100{margin-top: 100px;}

html {width: 100%;overflow-x: hidden;font-size: var(--html-size);}
html * {font-family: Pretendard, serif;}

body {width: 100%;height: auto;overflow-x: hidden;}
body::before{content:'';position: fixed;top:0;left:0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.7);z-index: 2;transition-duration: 0.3s;transition-property:opacity;opacity:0;pointer-events: none;}
.container {width: 100%;max-width: var(--container-max-width);padding: 0 var(--container-padding);margin: 0 auto;}

/*사이트 헤더*/
.site-header {display: flex;align-items: center;position: fixed;z-index: 2;width: 100%;height: var(--header-height);transition-duration: 0.6s;}
.site-header .site-header-wrapper {width: 100%;display: flex;justify-content: space-between;align-items: center;}
.site-header .site-header-wrapper .logo {height: 60px;width: auto;aspect-ratio:107 / 60;display: block;background-size: cover;}
.site-header .site-header-wrapper .site-top-menu {display: flex;align-items: center;column-gap: 150px;}
.site-header .site-header-wrapper .site-top-menu .menu-list {display: flex;column-gap: 78px;}
.site-header .site-header-wrapper .site-top-menu .menu-list .menu-item {position: relative;padding:20px 0;}
.site-header .site-header-wrapper .site-top-menu .menu-list .menu-item > a {color: #ffffff;font-weight: 600;font-size: 20px;white-space: nowrap;cursor: pointer;position: relative;}
.site-header .site-header-wrapper .site-top-menu .menu-list .menu-item > a::before{content:'';width: 0;height: 2px;background-color: #ffffff;position: absolute;bottom:0;left: 0;transform: translateY(5px);transition-duration: 0.3s;transition-property: width;}
.site-header .site-header-wrapper .site-top-menu .menu-list .menu-item .submenu-list {position: absolute;opacity: 0;background-color: #ffffff;border-radius: 10px;min-width: 150px;padding:10px 20px;bottom:0;left: 50%;transform: translate(-50%,90%);transition-duration: 0.3s;pointer-events: none;box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.2);}
.site-header .site-header-wrapper .site-top-menu .menu-list .menu-item .submenu-list .submenu-item > a {display:block;font-size: 16px;font-weight: 400;color:#333333;padding:5px 0;transition-duration: 0.3s;transition-property: color;}
.site-header .site-header-wrapper .site-top-menu .menu-list .menu-item.active .submenu-list .submenu-item > a,
.site-header .site-header-wrapper .site-top-menu .menu-list .menu-item .submenu-list .submenu-item > a:hover{font-weight: 700;color:#1B3AA5;}
.site-header .site-header-wrapper .site-top-menu .menu-list .menu-item:hover .submenu-list,
.site-header .site-header-wrapper .site-top-menu .menu-list .menu-item .submenu-list:has(.submenu-item a:focus) {opacity: 1;transform: translate(-50%,100%);pointer-events: auto;}
.site-header .site-header-wrapper .site-top-menu .menu-list .menu-item:hover a::before{content:'';width: 100%;}
.site-header .site-header-wrapper .site-top-menu .header-button {display: flex;align-items: center;column-gap: 40px;}
.site-header .site-header-wrapper .site-top-menu .language-box {position: relative;}
.site-header .site-header-wrapper .site-top-menu .language-box .language-text{width: 40px;height: 40px;background-image: url("../images/icons/icon-language.svg");background-size: 100% auto;}
.site-header .site-header-wrapper .site-top-menu .language-box .option-list {opacity: 0;position: absolute; background-color: #ffffff;border-radius: 10px;padding:10px 24px;bottom:-10px;left: 50%;transform: translate(-50%,90%);transition-duration: 0.3s;pointer-events: none;box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);}
.site-header .site-header-wrapper .site-top-menu .language-box .option-list .option-item a{display:block;font-size: 16px;font-weight: 400;color:#333333;padding:5px 0;text-align: center;transition-duration: 0.3s;transition-property: color;}
.site-header .site-header-wrapper .site-top-menu .language-box .option-list .option-item a:hover{font-weight: 700;color:#1B3AA5;}
.site-header .site-header-wrapper .site-top-menu .language-box.open .option-list,
.site-header .site-header-wrapper .site-top-menu .language-box .option-list:has(.option-item a:focus) {opacity: 1;transform: translate(-50%,100%);pointer-events: auto;}
.site-header .site-header-wrapper .site-top-menu .menu-button {width: 40px;height: 40px;overflow: hidden;display: none;justify-content: center;align-items: center;}
.site-header .site-header-wrapper .site-top-menu .menu-button .menu-icon {position: relative;width: 30px;height: 23px;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;}
.site-header .site-header-wrapper .site-top-menu .menu-button .menu-icon .menu-icon-bar {display: block;width: 100%;height: 3px;background-color: #ffffff;border-radius: 10px;transition-duration: 0.3s;}
.site-header .site-header-wrapper .site-top-menu .menu-button .menu-icon .menu-icon-bar:nth-of-type(3) {width: 16px;}

.site-header .site-header-wrapper .site-top-menu .sitemap-button {width: 40px;height: 40px;overflow: hidden;display: flex;justify-content: center;align-items: center;}
.site-header .site-header-wrapper .site-top-menu .sitemap-button .menu-icon {position: relative;width: 29px;height: 23px;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;}
.site-header .site-header-wrapper .site-top-menu .sitemap-button .menu-icon .menu-icon-bar {display: block;width: 100%;height: 3px;background-color: #ffffff;}
.site-header .site-header-wrapper .site-top-menu .sitemap-button .menu-icon .menu-icon-bar:nth-of-type(2) {width: 16px;}
.site-header.fix{background-color: rgba(0,0,0,0.5);box-shadow: 0 5px 10px rgba(0,0,0,0.3);height: var(--header-fix-height);}
/*사이트 헤더*/

/*사이트맵*/
.sitemap-layer{width: 100%;height: 600px;position: fixed;top:0;left: 0;z-index: 3;transform: translateY(-100%);transition-duration: 0.3s;transition-property: transform;}
.sitemap-layer .sitemap-wrapper{width: 100%;max-width: 1920px;height: 100%;display: flex;background-color: #ffffff;margin: 0 auto;position: relative;}
.sitemap-layer .img-box{width: 600px;height: 100%;overflow: hidden}
.sitemap-layer .img-box img{width: 100%;display: block;height: 100%;object-fit: cover;object-position: center;}
.sitemap-layer .logo{width: 107px;height: auto;display: block;position: absolute;top:50px;left: 50px;}
.sitemap-layer .close-button{width: 25px;height: auto;display: block;position: absolute;top:50px;right: 50px;}
.sitemap-layer .sitemap-menu{display: flex;align-items: center;height: 100%;padding:0 150px;}
.sitemap-layer .sitemap-list{display: flex;flex-direction: column;row-gap: 60px;}
.sitemap-layer .sitemap-list .sitemap-item{display: flex;column-gap: 100px;}
.sitemap-layer .sitemap-list .submenu-list{display: flex;column-gap: 100px;}
.sitemap-layer .sitemap-list :is(.sitemap-item,.submenu-item) > a{font-size: 30px;font-weight: 400;color:#999999;}
.sitemap-layer .sitemap-list :is(.sitemap-item) > a{font-weight: 600;color:#333333;}


body.sitemapOpen{height: 100%;overflow: hidden;}
body.sitemapOpen::before{opacity:1;pointer-events: auto;}
body.sitemapOpen .sitemap-layer {transform: translateY(0);}
/*사이트맵*/

/*사이트 푸터*/
.site-footer{padding:50px 0 60px;}
.site-footer .site-footer-wrapper{display: flex;flex-direction: column;}
.site-footer .site-footer-wrapper .site-footer-top{display: flex;justify-content: flex-end;}
.site-footer .site-footer-wrapper .term-list{display: flex;justify-content: flex-end;column-gap: 15px;}
.site-footer .site-footer-wrapper .term-list .term-item > a{font-size: 18px;font-weight: 400;color:#000000;}
.site-footer .site-footer-wrapper .term-list .term-item.active > a{font-weight: 600;}
.site-footer .site-footer-wrapper .site-footer-bottom {display: flex;justify-content: space-between;margin-top: 40px}
.site-footer .site-footer-wrapper .company-box{width:100%;display: flex;column-gap: 40px;}
.site-footer .site-footer-wrapper .company-box .footer-logo{flex: none;}
.site-footer .site-footer-wrapper .company-box .footer-logo img{width: 133px;height: auto;display: block;}
.site-footer .site-footer-wrapper .company-box .company-info {width:100%;display: flex;flex-direction: column;row-gap: 10px;position: relative;padding-right: 172px;}
.site-footer .site-footer-wrapper .company-box .company-info ul.info-list{display: flex;gap: 10px 20px;    flex-wrap: wrap;}
.site-footer .site-footer-wrapper .company-box .company-info ul.info-list li{font-size: 18px;color:#333333;}
.site-footer .site-footer-wrapper .company-box .company-info ul.info-list li.tel::before{content:'T ';font-weight: 700;color:#1B3AA5;}
.site-footer .site-footer-wrapper .company-box .company-info ul.info-list li.fax::before{content:'F ';font-weight: 700;color:#1B3AA5;}
.site-footer .site-footer-wrapper .company-box .company-info ul.info-list li.email::before{content:'E ';font-weight: 700;color:#1B3AA5;}
.site-footer .site-footer-wrapper .company-box .company-info .copyright{font-size: 18px;color:#333333;}
.site-footer .site-footer-wrapper .sns-list{display: flex;column-gap: 10px;position: absolute;right: 0;}
.site-footer .site-footer-wrapper .sns-list .sns-item > a {display:block;width: 56px;height: 56px;border-radius: 50%;background-color: #EBEBEB;}
.site-footer .site-footer-wrapper .sns-list .sns-item.linkedin > a{background-image: url("../images/icons/icon-linkedin.svg");background-position: center;background-size: 20px auto;background-repeat: no-repeat;}
.site-footer .site-footer-wrapper .sns-list .sns-item.instagram > a{background-image: url("../images/icons/icon-instagram.svg");background-position: center;background-size: 22px auto;background-repeat: no-repeat;}


.contact-section{width: 100%;height: 500px;background-image: url("../images/contact-bg.jpg");background-size: cover;background-repeat: no-repeat;display: flex;justify-content: center;align-items: center;}
.contact-section .section-title{display: flex;flex-direction: column;align-items: center;text-align: center;row-gap: 30px;}
.contact-section .section-title h2{font-size: 55px;font-weight: 900;color:#ffffff;}
.contact-section .section-title p{font-size: 18px;font-weight: 400;color:#ffffff;}
.contact-section .section-title .contact-button{width: 220px;height: 70px;font-size: 20px;font-weight: 400;color:#ffffff;display: inline-flex;justify-content: center;align-items: center;column-gap: 27px;border:1px solid #E5E5E5;border-radius: 999px;margin-top:20px;transition-duration: 0.3s;transition-property:box-shadow ;}
.contact-section .section-title .contact-button::after{content:'';display: block;background-image: url("../images/icons/icon-more-w.svg");background-repeat: no-repeat;background-size: cover;width: 32px;height: 32px;transition-duration: 0.3s;transition-property:transform ;}
.contact-section .section-title .contact-button:hover::after{transform: rotate(45deg);}


.popup-layer{position: fixed;top:20px;left: 20px;z-index: 10;max-width: 520px;width: calc(100% - 40px);background-color: #ffffff;border-radius: 10px;overflow: hidden;display: none;}
.popup-layer .close-top-button{width: 56px;height: 56px;position: absolute;top:30px;right: 30px;}
.popup-layer .close-top-button > svg{width: 100%;height: 100%;display: block;}
.popup-layer .popup-wrapper{display: flex;flex-direction: column;}
.popup-layer .popup-container{}
.popup-layer .popup-container .popup-content-img{width: 100%;height: auto;--swiper-pagination-color:#1B3AA5;--swiper-pagination-bullet-width:10px;--swiper-pagination-bullet-height:10px;}
.popup-layer .popup-container .popup-content-img img{width: 100%;height: auto;display: block;}
.popup-layer .popup-footer-box{display: flex;justify-content:space-between;align-items:center;width: 100%;height: 50px;background-color: #F4F4F5;padding:0 20px;}
.popup-layer .popup-footer-box .input-box{}
.popup-layer .popup-footer-box .input-box input[type=checkbox]{display: none;}
.popup-layer .popup-footer-box .input-box input[type=checkbox] + label{font-size: 15px;font-weight: 500;color:#999999;cursor: pointer;display: flex;align-items: center;}
.popup-layer .popup-footer-box .input-box input[type=checkbox] + label::before{content:'';display: inline-block;width: 24px;height: 24px;background-image: url("../images/icons/icon-checkbox-off.svg");background-size: cover;margin-right: 5px;}
.popup-layer .popup-footer-box .input-box input[type=checkbox]:checked + label::before{background-image: url("../images/icons/icon-checkbox-on.svg");}
.popup-layer .popup-footer-box .close-button{font-size: 15px;font-weight: 500;color:#222222;cursor: pointer;}

body.main.popupOpen{height:100vh;overflow: hidden;}
body.main.popupOpen::before{opacity: 1;z-index: 10;}
body.main.popupOpen .popup-layer{display: block;}

@media screen and (max-width: 1700px) {
    .sitemap-layer .sitemap-menu {padding: 0 100px;}
    .sitemap-layer .sitemap-list .sitemap-item {column-gap: 60px;}
    .sitemap-layer .sitemap-list :is(.sitemap-item,.submenu-item) > a {font-size: 24px;}
}

@media screen and (max-width: 1500px) {
    .sitemap-layer .sitemap-menu {padding: 0 60px;}
    .sitemap-layer .img-box{width: 500px;}
    .sitemap-layer .sitemap-list .sitemap-item {column-gap: 60px;}
    .sitemap-layer .sitemap-list .submenu-list {column-gap: 60px;}
    .sitemap-layer .sitemap-list :is(.sitemap-item,.submenu-item) > a {font-size: 24px;}
}

@media screen and (max-width: 1200px) {
    .sitemap-layer .sitemap-list .sitemap-item {flex-direction: column;row-gap: 10px;}
}


@media screen and (max-width: 1024px) {
    .site-header .site-header-wrapper .site-top-menu {column-gap: 50px;}
    .site-header .site-header-wrapper .site-top-menu .menu-list {column-gap: 40px;}
    .site-header .site-header-wrapper .site-top-menu .menu-list .menu-item > a {font-size: 18px;}
    .site-header .site-header-wrapper .site-top-menu .header-button {column-gap: 20px;}

    .sitemap-layer .img-box{display: none;}
}

@media screen and (max-width: 860px) {
    .site-footer .site-footer-wrapper .company-box {flex-direction: column;row-gap: 30px;}
}
/* 모바일 디바이스 (768px 이하) */
@media screen and (max-width: 720px) {
    :root {
        --html-size : 1.388888889vw;
        --header-height: 13.0rem;
        --header-fix-height: 10rem;
        --container-padding: 3rem;
    }

    .m-mt40{margin-top: 4rem;}

    .site-header {transition-duration: 0.3s;}
    .site-header .site-header-wrapper .logo{width: 10.9rem;height: auto;}
    .site-header .site-header-wrapper .logo > img{width: 100%;height: 100%;display: block;}
    .site-header .menu-box{display: none;transition-duration: 0.3s;}
    .site-header .site-header-wrapper .site-top-menu .language-box .language-text{width: 5rem;height: 5rem;}
    .site-header .site-header-wrapper .site-top-menu .sitemap-button{display: none;}
    .site-header .site-header-wrapper .site-top-menu .menu-button{display: flex;}

    .site-header .menu-box {display: flex;position: fixed;width: 100%;background-color: #ffffff;left: 0;top: var(--header-height);opacity: 0;pointer-events: none;}
    .site-header.fix .menu-box{top: var(--header-fix-height);}
    .site-header .site-header-wrapper .site-top-menu .menu-list {width: 100%;flex-direction: column;}
    .site-header .site-header-wrapper .site-top-menu .menu-list .menu-item {position: relative;border-bottom: 1px solid #E5E5E5;padding:0}
    .site-header .site-header-wrapper .site-top-menu .menu-list .menu-item > a {width: 100%;display: block;color: #333333;font-size: 3.8rem;padding:3rem;}
    .site-header .site-header-wrapper .site-top-menu .menu-list .menu-item .submenu-list {background-color: #F8F8F8;position: relative;border-radius: 0;min-width: 100%;bottom: 0;left: 0;transform: none;opacity: 1 ;height: 0;overflow: hidden;padding: 0;box-shadow: none;}
    .site-header .site-header-wrapper .site-top-menu .menu-list .menu-item .submenu-list .submenu-item > a {display: block;font-size: 3rem;padding: 2rem 3rem;transition-duration: 0.3s;transition-property: color;}

    .site-header .site-header-wrapper .site-top-menu .menu-list .menu-item:hover .submenu-list, .site-header .site-header-wrapper .site-top-menu .menu-list .menu-item .submenu-list:has(.submenu-item a:focus) {opacity: 1;transform: none;pointer-events: auto;}
    .site-header .site-header-wrapper .site-top-menu .menu-list .menu-item.active .submenu-list .submenu-item > a, .site-header .site-header-wrapper .site-top-menu .menu-list .menu-item .submenu-list .submenu-item > a:hover {font-weight: 400;color: #333333;}

    /*.site-header .site-header-wrapper .site-top-menu .menu-list .menu-item:hover .submenu-list, .site-header .site-header-wrapper .site-top-menu .menu-list .menu-item .submenu-list:has(.submenu-item a:focus) {height:auto;pointer-events: auto;transform: none;padding:5rem 0;}*/

    body.menuOpen{height: 100%;overflow: hidden;}
    body.menuOpen .site-header {background-color: #ffffff;}
    body.menuOpen .site-header .site-header-wrapper .logo{background-image: url("../images/color-logo.svg");}
    body.menuOpen .site-header .site-header-wrapper .site-top-menu .menu-button .menu-icon .menu-icon-bar{background-color: #333333;}
    body.menuOpen .site-header .site-header-wrapper .site-top-menu .menu-button .menu-icon .menu-icon-bar:nth-of-type(1){transform: rotate(45deg);transform-origin: left top;}
    body.menuOpen .site-header .site-header-wrapper .site-top-menu .menu-button .menu-icon .menu-icon-bar:nth-of-type(2){transform: translateX(200%)}
    body.menuOpen .site-header .site-header-wrapper .site-top-menu .menu-button .menu-icon .menu-icon-bar:nth-of-type(3){width: 30px;transform: rotate(-45deg);transform-origin: left bottom;}
    body.menuOpen .site-header .site-header-wrapper .site-top-menu .language-box .language-text{background-image: url("../images/icons/icon-languange-open.svg");}
    body.menuOpen .site-header .menu-box{pointer-events: auto;opacity: 1;}
    body.menuOpen::before{opacity:1;pointer-events: auto;background-color: #ffffff;}



    body.sitemapOpen {height: auto;overflow: auto;}
    body.sitemapOpen::before{content:none;}
    .sitemap-layer{display: none;}

    .contact-section .section-title {row-gap: 3rem;}
    .contact-section .section-title h2 {font-size: 5.5rem;}
    .contact-section .section-title p {font-size: 2.4rem;}
    .contact-section .section-title .contact-button {width: 22rem;height: 8rem;font-size: 2.4rem;column-gap: 1rem;margin-top: 2rem;}
    .contact-section {width: 100%;aspect-ratio: 720 / 500;height: auto;background-image: url("../images/m-contact-bg.png");background-position: center;}
    .contact-section .section-title .contact-button::after {width: 3.2rem;height: 3.2rem;}


    .site-footer {padding: 5rem 3rem;}
    .site-footer .site-footer-wrapper .site-footer-top {display: flex;justify-content: center;}
    .site-footer .site-footer-wrapper .term-list .term-item > a {font-size: 2.4rem;}
    .site-footer .site-footer-wrapper .site-footer-bottom {margin-top: 3rem;}
    .site-footer .site-footer-wrapper .company-box {row-gap: 3rem;align-items: center;}
    .site-footer .site-footer-wrapper .company-box .company-info ul.info-list li {font-size: 2.4rem;}
    .site-footer .site-footer-wrapper .company-box .footer-logo img {width: 21.7rem;}
    .site-footer .site-footer-wrapper .company-box .company-info {align-items: center;flex-direction: column;row-gap: 3rem;position: relative;padding-right: 0;}
    .site-footer .site-footer-wrapper .sns-list {display: flex;column-gap: 2rem;position: static;right: 0;}
    .site-footer .site-footer-wrapper .company-box .company-info ul.info-list {display: flex;gap: 1rem 3rem;flex-wrap: wrap;justify-content: center;}
    .site-footer .site-footer-wrapper .sns-list .sns-item > a {width: 7rem;height: 7rem;}
    .site-footer .site-footer-wrapper .sns-list .sns-item.linkedin > a {background-size: 2.5rem auto;}
    .site-footer .site-footer-wrapper .sns-list .sns-item.instagram > a {background-size: 2.7rem auto;}
    .site-footer .site-footer-wrapper .company-box .company-info .copyright {font-size: 2.4rem;}

}