@charset "utf-8";

@media (max-width:1200px){
    /* header */
    .header-main .gnb {margin-right: 40px;}
    .header-main .gnb > ul > li > a {font-size: 16px; padding: 0 16px;}

    /* main */
    .main-slide .swiper-slide {padding: 50px 30px;}
    .main-quick .quick-item a {padding: 30px 30px;}
    .main-quick .quick-item a:before {right: 25px;}

    .main-quick-menu .wrap {display: block; align-items: center;}
    .main-quick-menu .section-title {max-width: none; width: 100%; padding-left: 0; text-align: center; margin-bottom: 30px;}
    .main-quick-menu .section-cont {flex: auto;}
}

@media (max-width:1024px){
    /* header */
    .header {height: 100px;}
    .header-util {display: none;}
    .header-main {height: 100px;}
    .header-main .gnb {display: none;}
    .header-main .menu-btn button.opened span:nth-of-type(1) {transform: rotate(0); top: 0; margin-top: 0;}
    .header-main .menu-btn button.opened span:nth-of-type(2) {opacity: 1;}
    .header-main .menu-btn button.opened span:nth-of-type(3) {transform: rotate(0); bottom: 0; margin-bottom: 0;}

    .sitemap {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #fff; padding: 0; overflow-y: auto; border-top: 0; z-index: 200;}
    .sitemap-mobile-utils,
    .sitemap-mobile-utils .header-util {display: block;}
    .sitemap-menu {display: block; margin-top: 20px;}
    .sitemap-menu > li {text-align: left;}
    .sitemap-menu > li > a {position: relative; padding: 20px 0; border: 0; border-radius: 0; font-size: 20px; font-weight: 700; line-height: 1.5em;}
    .sitemap-menu > li > a:after {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; width: 20px; height: 20px; background: url('../images/layout/icon-menu-down.png') no-repeat 50% 50%; transition: all 0.5s;}
    .sitemap-menu > li > a.opened:after {transform: rotate(180deg);}
    .sitemap-sub-menu {display: none; margin-top: 0; margin-bottom: 20px;}
    .sitemap-sub-menu > ul > li:not(:last-child) {margin-bottom: 0;}
    .sitemap-sub-menu > ul > li > a {font-size: 18px; font-weight: 500; line-height: 1.5em; padding: 10px;}
    .sitemap-sub-menu > ul > li > a:hover {font-weight: 500; color: var(--font02);}

    /* main */
    .main-visual {margin-top: 120px;}
    .main-visual .wrap {display: block;}
    .main-visual .wrap > div {height: auto;}
    .main-slide {width: 100%; height: 350px !important; margin-bottom: 10px;}
    .main-slide .swiper-slide {padding: 50px 30px;}
    .main-slide .swiper-slide .text-box {padding-bottom: 30px;}
    .main-slide .swiper-slide .text-box p {font-size: 16px; margin-bottom: 10px;}
    .main-slide .swiper-slide .text-box h2 {font-size: 38px;}
    
    .main-slide .swiper-controls {bottom: 30px; left: 30px; padding: 6px 16px;}
    .main-slide .swiper-controls .swiper-pagination-bullet-active {width: 16px;}
    .main-slide .swiper-controls .visual-button-prev {margin-right: 8px;}

    .main-quick {flex-direction: row; gap: 10px; width: 100%;}
    .main-quick .quick-item a {padding: 40px 30px 50px; border-radius: 24px;}
    .main-quick .quick-item a:before {right: 10px; margin-top: 15px; background-position: 50% 50%; background-size: 80px auto;}    
    .main-quick .quick-item .text-box h3 {font-size: 20px;}
    .main-quick .quick-item .text-box h3 span {background-size: 18px auto;}

    .main .section-title h3 {font-size: 26px;}

    .main-quick-menu {margin: 50px 0 60px;}
    .main-quick-menu .wrap {display: block; align-items: center;}
    .main-quick-menu .section-title {max-width: none; width: 100%; padding-left: 0; text-align: center; margin-bottom: 30px;}
    .main-quick-menu .section-cont {flex: auto;}
    .quick-menu-slide .swiper-wrapper {display: flex; justify-content: flex-start; gap: 20px;}
    .quick-menu-slide figure {margin: 0 auto 10px;}
    .quick-menu-slide figure img {width: 84px; height: 84px; border-radius: 24px;}
    .quick-menu-slide a:hover img {border: 2px solid var(--primary);}
    .quick-menu-slide figcaption {font-size: 18px; font-weight: 600;}

    .main-work-life {padding: 60px 0; border-radius: 20px 20px 0 0; overflow: hidden;}
    .main-work-life .section-bg:after {display: none;}
    .main-work-life .wrap {display: block;}
    .main-work-life .work-life-left {max-width: none; height: 200px; border-radius: 16px; margin-bottom: 50px;}
    .main-work-life .work-life-left .backdrop {background: url('../images/main/main-work-life-bg-mob.jpg') no-repeat 50% 50%/cover;}
    .main-work-life .work-life-left .text-box {position: absolute; top: 50%; left: 30px; transform: translate(0,-50%); text-align: left;}
    .main-work-life .work-life-left .text-box p {font-size: 16px; color: #FFE779; margin-bottom: 4px;}
    .main-work-life .work-life-left .text-box strong {font-size: 28px; margin-bottom: 10px;}
    .main-work-life .work-life-right {width: 100%; flex: auto;}

    .main-work-life .section-title h3 {font-size: 24px; text-align: center;}
    .main-work-life .tabs-wrap {justify-content: center; align-items: center;}
    .main-work-life .tabs {margin-bottom: 30px;}
    .main-work-life .tabs li button {width: 105px;}
    .main-work-life .slide-buttons button {display: none !important;}
    .main-work-life .tab-panels .swiper-slide a {border-radius: 16px;}
    .main-work-life .tab-panels .swiper-slide a:hover:after {opacity: 0;}
    .main-work-life .swiper-pagination {display: block; position: relative; margin-top: 30px;}
    .main-work-life .swiper-pagination-bullet {width: 10px; height: 10px; background: #d3d3d3; margin: 0 5px; transition: all 0.5s;}
    .main-work-life .swiper-pagination-bullet-active {background: var(--primary);}

    .main-board-gallery {padding: 70px 0 100px;}
    .main-board-gallery .wrap {display: block;}
    .main-board-gallery .wrap > div {width: 100%;}
    .main-board-gallery .section-title {margin-bottom: 20px;}
    .main-board-gallery .section-title h3 {font-size: 24px;}
    .main-board-gallery .section-cont ul {display: flex; gap: 20px;}
    .main-board-gallery .section-cont ul li {width: 50%;}
    .main-board {margin-bottom: 60px;}
    .main-board .section-cont ul li a:hover:after {opacity: 0;}
    .main-board .section-cont ul li .card-title {margin-bottom: 50px; height:calc(1.5em * 1 * 2); -webkit-line-clamp:2;}
}

@media (max-width:768px){
    /* header */
    .header {height: 56px;}
    .header-main {height: 56px;}
    .header-main .logo img {width: 180px;}

    .sitemap-mobile-utils {height: 56px;}

    /* main */
    .main-visual {margin-top: 66px;}
    .main-slide {height: 240px !important; border-radius: 16px;}
    .main-slide .swiper-slide {justify-content: start; padding: 40px 20px;}
    .main-slide .swiper-slide .text-box {padding-bottom: 0;}
    .main-slide .swiper-slide .text-box p {font-size: 16px; margin-bottom: 8px;}
    .main-slide .swiper-slide .text-box h2 {font-size: 28px;}
    
    .main-slide .swiper-controls {bottom: 20px; left: 20px; padding: 3px 16px;}

    .main-quick .quick-item a {padding: 20px 20px 32px; border-radius: 16px;}
    .main-quick .quick-item a:before {margin-top: 10px; background-position: 100% 50%; background-size: 54px auto;}    
    .main-quick .quick-item .text-box h3 {font-size: 16px; margin-bottom: 0;}
    .main-quick .quick-item .text-box h3 span {display: none;}
    .main-quick .quick-item .text-box h3 .mob-only {display: block;}
    .main-quick .quick-item .text-box p {display: none;}

    .main .section-title h3 {font-size: 24px;}

    .main-quick-menu {margin: 40px 0;}
    .main-quick-menu .section-title {max-width: none; width: 100%; padding-left: 0; text-align: center; margin-bottom: 30px;}
    .main-quick-menu .section-cont {flex: auto;}
    .quick-menu-slide {overflow: hidden;}
    .quick-menu-slide .swiper-wrapper {flex-wrap: nowrap; justify-content: normal; gap: 0;}
    .quick-menu-slide .swiper-slide {width: auto !important; flex: none;}
    .quick-menu-slide figure {margin: 0 auto 10px;}
    .quick-menu-slide figure img {width: 80px; height: 80px;}
    .quick-menu-slide a:hover img {border: 2px solid var(--bg01);}
    .quick-menu-slide figcaption {font-size: 16px;}
    
    .main-work-life {padding: 40px 0 50px;}
    .main-work-life .work-life-left {height: 160px;}
    .main-work-life .work-life-left .text-box p {font-size: 14px;}  
    .main-work-life .work-life-left .text-box strong {font-size: 24px;}
    .main-work-life .swiper {overflow: visible;}

    .main-board-gallery {padding: 60px 0 80px;}
    .main-board-gallery .section-cont ul {flex-direction: column; gap: 20px;}
    .main-board-gallery .section-cont ul li {width: 100%;}
    .main-board {margin-bottom: 60px;}
    .main-gallery .section-cont ul li:nth-child(1) {margin-bottom: 20px;}

    /* 푸터 */
    .footer-terms .container {padding: 0;}
    .footer-terms ul li {width: 50%;}
    .footer-terms ul li a {width: 100%;}
    .footer-info {padding: 50px 0;}
    .footer-info .wrap {display: block;}
    .footer-info .logo {margin-bottom: 20px;}
    .footer-info .info {margin: 0 -16px 16px;}
    .footer-info .info li {padding: 0 16px;}
    .footer-info .copyright {margin-bottom: 44px;}
    .footer-info .family-site {margin-bottom: 17px;}
    .footer-info .btn-family {width: 100%;}
    .footer-info .sns-link {justify-content: flex-start;}

    /* 팝업 */
    .pop-arrows .pop-prev {left: 10px;}
    .pop-arrows .pop-next {right: 10px;}
}

@media (max-width:480px){

}