@charset "utf-8";



/********************
// tablet 분기점
********************/
@media only screen and (max-width: 1200px) {
    /** common **/
    .inner{width:calc(100dvw - 120px)}
    .menuBox{left:100dvw; top:0; background:#fff; transition: ease-in-out 0.3s;}
    .menuBox.active{left:0}
    .menu{color:#222; border-bottom:1px solid #d9dade}
    .toggleBtn{cursor: pointer;}
    .mobileGnb img{transform: rotate(180deg);}
    .mobileGnb.active img{transform: rotate(0);}
    .mobileSnb{overflow-y:hidden;transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;max-height:0;  padding-top:0 !important; padding-bottom:0 !important; box-sizing: content-box; border-bottom:0}
    .mobileSnb.open{padding-top:24px !important; padding-bottom: 24px !important;border-bottom:1px solid #d9dade}
    .toggleBtn > span{transition: ease-in-out 0.3s; background:#fff}
    header.scrolled .toggleBtn > span{background:#222}
    .toggleBtn > span:nth-child(1){left:0;top:0;}
    .toggleBtn > span:nth-child(2){left:50%;top:50%; transform: translate(-50%, -50%);}
    .toggleBtn > span:nth-child(3){left:0;top:28px;}

    .toggleBtn.active > span:nth-child(1){left:50%;top:50%; transform: translate(-50%, -50%) rotate(45deg);}
    .toggleBtn.active > span:nth-child(2){left:100000px}
    .toggleBtn.active > span:nth-child(3){left:50%;top:50%; transform: translate(-50%, -50%) rotate(-45deg);}

    /** main **/
    .technologyBox{width:calc(50% - 12px)}
    .productBox{background-size: auto 60% !important;}

    /** history **/
    .line_area::before{bottom:-120px}
    
    /** map **/
    .tab-item{border-radius:0 !important}
    .tab-item:first-child{border-radius:16px 0 0 16px !important}
    .tab-item:last-child{border-radius:0 16px 16px 0 !important}
    .map-wrapper{border-radius:24px 24px 0 0}
    .address-bar{border-radius:0 0 24px 24px}

    /** product **/
    .productBnr{background-size:auto 45%}
    .swiperBtnBox .custom-pagination .swiper-pagination-bullet {width: 8px;height: 8px;}
    .swiperBtnBox .custom-pagination .swiper-pagination-bullet-active {transform: scale(1.7);}

}    

/********************
// 모바일 분기점
********************/
@media only screen and (max-width: 768px) {     
    /** common **/
    .inner{width:calc(100dvw - 40px)}
    .mobileSnb.open{padding-top:20px !important; padding-bottom: 20px !important;}

    /** main **/
    .technologyBox{width:100%}
    .partnershipBox, .valuesBox, .menberBox, .ciBox{grid-template-columns:repeat(1 , 1fr)}
    .companyBox{grid-template-columns:repeat(2 , 1fr)}

    /** history **/
    .line_area::before{bottom:-44px}
    .dot{border:4px solid #5C4742}

    /** map **/
    .map-wrapper{border-radius:16px 16px 0 0}
    .address-bar{border-radius:0 0 16px 16px}

}