@charset "utf-8";

/* root */
:root{
    /* font */
    --main-font: 'Pretendard', sans-serif;
    --point-font: 'Poppins', 'Pretendard', sans-serif;
    /* color */
    --brand-color: #0083CA;
    --bg-color: #121212;
    --text-color: #111;
    --bg-color-gray: #f6f6f6;
}

/* 반응형 */
@media (max-width: 1600px) {
    header .header_wr {
        padding: 0 40px;
    }

    /* index */
    #main_wr .visual .txt-box .tit-txt{
        font-size: 100px;
    }
}

@media (max-width: 1440px) {
    /* index */
    #main_wr .visual .txt-box .tit-txt{
        font-size: 90px;
    }
    #main_wr h3{
        font-size: 50px;
    }
    
}

@media (max-width: 1280px) {
    /* footer */
    footer {
        font-size: 14px;
        padding: 60px 40px;
    }

    /* index */
    #main_wr .visual .txt-box .tit-txt{
        font-size: 80px;
    }
    #main_wr .visual .txt-box .sub-txt{
        font-size: 20px;
        margin-top: 20px;
    }
    #main_wr h3,
    #main_wr .contact .tit-wrap h3{
        font-size: 40px;
    }
    #main_wr .prd-box .tit{
        font-size: 20px;
    }

    #main_wr .capa .card-wrap .card .tit{
        font-size: 28px;
    }
    #main_wr .company .bg-l,
    #main_wr .company .bg-r{
        width: 50%;
    }

    /* sub-page */
    .sub-visual-img-inner .sub-visual-title{
        font-size: 60px;
    }
    .l-tit{
        font-size: 40px;
    }
    .m-tit{
        font-size: 36px;
    }

    /* prd */
    
    .prd .con-key .card-wrap{
        grid-template-columns: repeat(2, 1fr);
    }
    .prd03 .con-key .card-wrap{
        grid-template-columns: repeat(3, 1fr);
    }
    /* .prd .con-key .card-wrap .card{
        padding: 30px 20px;
    } */
    .prd .con-adv .txt-wrap .tit{
        font-size: 20px;
    }
    
    /* prd01 */
    .prd01 .con-model .tc1 .img-wrap{
        margin-right: 0;
    }
    .prd01.en .con-model .tc1 table td{
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .prd01 .con-model .txt-wrap .tit{
        font-size: 24px;
    }
    .prd01 .con-model .tc1 table th{
        padding: 20px;
    }
    .prd01 .con-key .key-wrap .txt-wrap .tit{
        font-size: 20px;
    }
    /* prd02 */
    .prd02 .con-fms .txt-box .tit{
        font-size: 20px;
    }
    .prd02 .con-fms .txt-box .cont{
        font-size: 18px;
    }
    /* prd03 */
    .prd03 .con-model2 .hw .tit,
    .prd .view .tit{
        font-size: 20px;
    }
    .prd03 .con-model2 .hw .hw-card li .tit,
    .prd .view .img-wrap .txt{
        font-size: 18px;
    }
    /* prd-model */
    .prd-model .con-model .txt-wrap .tit{
        font-size: 28px;
    }

    /* capa01 */
    .capa01 .card-tit{
        font-size: 36px;
    }
    /* capa02 */
    .capa02 .con-box .txt-box .tit{
        font-size: 36px;
    }
    /* cert */
    .cert #bo_gall #gall_ul{
        grid-template-columns: repeat(4, 1fr);
        gap: 50px 24px;
    }

    /* prvideo */
    .prvideo #bo_gall .bo_tit{
        font-size: 20px;
    }
    #bo_v_atc{
        padding: 50px;
    }
    #bo_v_title .bo_v_tit{
        font-size: 40px;
    }
    .back-to-list .btn{
        font-size: 18px;
    }

    /* inquiry */
    .inquiry .page-inner .txt-box .tit{
        font-size: 36px;
    }
    .inquiry .page-inner .txt-box p{
        font-size: 18px;
    }
    #email-form-wrap .send_btn{
        width: 200px !important;
    }
}





/* 태블릿 */
@media (max-width: 1080px) {
    /* reset */
    body{
        font-size: 16px;
    }

    /* header */
    header .header_wr {
        height: 70px;
        padding: 0 20px;
    }
    header .gnb nav {
        transition: all .5s ease .5s;
        display: none;
        opacity: 0;
    }
    header .logo{
        width: 40px;
    }
    header .r-inset{
        display: flex;
        align-items: center;
    }
    header .gnb .toggle-btn {
        display: block;
    }
    header.open .gnb .toggle-btn > span {
        position: absolute;
        width: 100%;
        top: 50%;
        background: #333;
    }
    header.open .gnb .toggle-btn > span + span {
        margin: 0;
    }
    header.open .gnb .toggle-btn > span:nth-child(1) {
        transform: rotate(45deg);
    }
    header.open .gnb .toggle-btn > span:nth-child(2) {
        display: none;
    }
    header.open .gnb .toggle-btn > span:nth-child(3) {
        transform: rotate(135deg);
    }
    header .nav-bg {
        opacity: 0;
        position: fixed;
        top: 0;
        left: 0;
        background: #fff;
        width: 100%;
        height: 100%;
        z-index: -10000000;
        transition: all .3s ease;
        visibility: hidden;
    }
    header.open .nav-bg {
        opacity: 1;
        visibility: visible;
    }
    header.open .logo .white{
        display: none;
    }
    header.open .logo .black{
        display: block;
    }
    header.open .lang-wrap .arrow{
        background-image: url(../img/qlab/arrow-black.png);
    }
    header.open .gnb{
        color: var(--text-color);
    }
    header.open .gnb nav {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* z-index: -1; */
        /* background: #FFF; */
        opacity: 1;
    }
    header.open .gnb nav .navlist{
        flex-direction: column;
        padding: 0 20px;
        position: relative;
        padding-top: 80px;
    }
    nav .navlist li.depth1 {
        width: 100%;
        padding: 28px 0;
        border-bottom: 1px solid #d9d9d9d9;
        display: block;
        position: relative;
    }
    header.open .gnb nav .navlist li .dp1 {
        text-align: left;
        padding: 22px 30px;
        color: var(--text-color);
        text-align: left;
        padding: 0;
        width: 100%;
        font-size: 20px;
        font-weight: 600;
        height: auto;
        justify-content: flex-start;
    }
    header nav .lnb li a{
        padding: 12px;
    }
    header nav .lnb {
        display: none;
        position: inherit;
        height: auto;
        font-size: inherit;
        opacity: 1;
        overflow: visible;
        transition: none;
    }
    nav .navlist li .lnb .dp2 {
        background: inherit;
        box-shadow: none;
        padding-top: 20px;
    }
    nav .navlist li .lnb .dp2 li {
        display: block;
        padding: 0;
        text-align: left;
    }


    /* index */
    #main_wr .visual .txt-box .tit-txt{
        font-size: 60px;
    }
    #main_wr .visual .txt-box .sub-txt{
        font-size: 18px;
    }
    #main_wr h3,
    #main_wr .contact .tit-wrap h3{
        font-size: 32px;
    }

    #main_wr .product,
    #main_wr .capa,
    #main_wr .media{
        padding: 0 0 100px;
    }
    #main_wr .contact{
        padding: 80px 0;
    }
    #main_wr .prd-box .tit{
        font-size: 18px;
    }
    #main_wr .capa .card-wrap .card .tit{
        font-size: 24px;
    }

    /* sub-page */
    .sub-visual-img{
        height: 560px;
    }
    #sub-page{
        padding: 100px 0 120px;
    }
    #sub-page.prd04{
        padding: 100px 0 0;
    }
    .prd04 .prd04-2{
        padding: 100px 0 120px;
    }
    .prd-model .con-intro{
        margin-bottom: 100px;
    }
    .prd-model .con-model .gallery{
        margin-top: 100px;
    }
    .l-tit{
        font-size: 32px;
    }
    .page-inner .intro-txt p{
        font-size: 18px;
    }
    .m-tit{
        font-size: 30px;
    }

    /* location */
    .map .info-wrap{
        padding-left: 50px;
    }

    /* prd */
    .page-prd-head-wrap,
    .prd .video-wrap{
        margin-bottom: 100px;
    }
    .prd01 .con-paly{
        margin: 100px 0;
        padding: 100px 0 150px;
    }
    .prd02 .con-install,
    .prd02 .con-fms,
    .prd03 .con-adv{
        margin: 90px 0;
        padding: 80px 0;
    }
    .prd .con-gallery,
    .prd .con-model2{
        margin-top: 100px;
    }
    .tab-btn button{
        font-size: 18px;
    }

    .prd .con-key .card-wrap .tit{
        font-size: 18px;
    }
    .prd .con-adv .txt-wrap .tit{
        font-size: 18px;
    }
    
    
    /* prd01 */
    .prd01 .con-paly .btn-wrap button{
        font-size: 18px;
    }
    .prd01 .con-model .txt-wrap .tit{
        font-size: 24px;
    }
    .prd01 .con-model .tc1 .table-wrap .table-tit{
        font-size: 18px;
    }
    .prd01 .con-key .key-wrap .txt-wrap .tit,
    .prd01 .con-model .tc2 .model-list .tit,
    .prd01 .con-model .tc2 .model-box .txt{
        font-size: 18px;
    }
    .prd01 .con-model .tc2 .model-list{
        padding: 30px 20px;
    }
    .prd01 .con-model .tc2 .model-list-wrap{
        grid-template-columns: 1fr 1fr;
    }
    .prd01 .con-model .tc2 .model-box:last-child {
        grid-column: span 2;
    }
    .prd01 .con-model .tc2 .model-box:not(:last-of-type)::after{
        right: -55px;
        top: calc(100% + 15px);
    }
    .prd01 .con-model .tc2 .model-box:nth-of-type(2)::after{
        content: none;
    }

    /* prd02 */
    .prd02 .con-fms .txt-wrap{
        display: flex;
        flex-direction: column;
        gap: 100px;
    }
    .prd02 .con-fms .m-tit{
        align-self: flex-start;
    }
    .prd02 .con-fms .txt-box{
        align-self: flex-end;
        margin: 0;
    }
    .prd02 .con-fms .txt-box .tit{
        font-size: 18px;
    }
    .prd02 .con-fms .txt-box .cont{
        font-size: 16px;
    }
    /* prd03 */
    .prd03 .con-model2 .hw .tit,
    .prd .view .tit{
        font-size: 18px;
    }

    /* prd04 */
    .page-prd-head-wrap .page-prd-head{
        padding-left: 50px;
    }
    .prd04 .prd04-2 .page-prd-head-wrap .page-prd-head{
        padding: 0;
        padding-right: 50px;
    }
    /* prd-model */
    .prd-model .con-model .txt-wrap .tit{
        font-size: 24px;
    }


    /* capa01 */
    .capa01 .card-tit{
        font-size: 30px;
    }
    .capa01 .card-box .card .tit{
        font-size: 20px;
    }

    /* capa02 */
    .capa02 .con-box .txt-box .tit{
        font-size: 30px;
    }
    .capa02 .con-box .txt-box p{
        font-size: 18px;
    }


    /* prvideo */
    .prvideo #bo_gall #gall_ul{
        gap: 50px 20px;
    }
    .prvideo #bo_gall .bo_tit{
        font-size: 18px;
    }
    #bo_v_title .bo_v_tit{
        font-size: 32px;
    }

    /* inquiry */
    .inquiry .page-inner .txt-box .tit{
        font-size: 36px;
    }    
}

@media (max-width: 905px){
    /* cert */
    .cert #bo_gall #gall_ul{
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 22px;
    }
}

/* 모바일 */
@media (max-width: 768px) {
    /* reset */
    body {
        font-size: 14px;
    }

    /* header */
    header .lang-wrap .lang{
        gap: 12px;
    }
    header .lang-wrap .arrow{
        width: 12px;
    }
    nav .navlist li.depth1 {
        padding: 20px 0;
    }
    header.open .gnb nav .navlist li .dp1 {
        font-size: 18px;
    }
    

    /* footer */
    footer {
        font-size: 14px;
        padding: 60px 20px;
    }
    footer .footer-wrap{
        flex-direction: column;
    }
    footer .bottom{
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #333;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    footer .bottom .top-btn-wrap{
        width: 44px;
        height: 44px;
    }
    footer .bottom .top-btn-wrap img{
        width: 20px;
        height: 20px;
    }

    /* index */
    #main_wr .inner{
        padding: 0 20px;
    }
    #main_wr .visual .txt-box .tit-txt{
        font-size: 44px;
    }
    #main_wr .visual .txt-box .sub-txt{
        font-size: 16px;
    }
    #main_wr h3,
    #main_wr .contact .tit-wrap h3{
        font-size: 28px;
    }
    #main_wr .btn{
        margin-top: 40px;
    }
    
    #main_wr .product-wrap {
        flex-direction: column;
        gap: 50px;
    }
    #main_wr .left{
        position: static;
        top: auto;
        height: auto;
    }
    #main_wr .prd-box .tit{
        font-size: 16px;
    }
    #main_wr .prd-box p {
        margin-botto: 30px;
    }
    
    #main_wr .capa .card-wrap{
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    #main_wr .capa .card-wrap .card{
        padding: 50px 0;
    }
    #main_wr .capa .card-wrap .card .tit{
        font-size: 20px;
        margin-bottom: 12px;
    }

    #main_wr .capa .tit-wrap,
    #main_wr .media .tit-wrap{
        margin-bottom: 30px;
    }
    #main_wr .media .conset .lt_gal{ 
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }
    #main_wr .media .conset .lt_gal .video-con{
        flex: 0 0 280px;
        scroll-snap-align: start;
    }
    #main_wr .media .conset .lt_gal::-webkit-scrollbar {
        display: none;
    }

    #main_wr .company{
    max-height: 500px;
    }

    /* sub-page */
    .sub-visual-img{
        height: 360px;
    }
    .sub-visual-img-inner .sub-visual-title{
        font-size: 44px;
    }
    .sub-visual-btn .sub-visual-btn-wrap{
        font-size: 14px;
    }
    .sub-visual-btn .sub-visual-btn-wrap{
        height: 60px;
    }
    .page-inner{
        padding: 0 20px;
    }
    .page-head{
        margin-bottom: 50px;
    }
    .l-tit{
        font-size: 28px;
        line-height: 1.5;
    }
    .s-tit{
        margin-bottom: 0;
    }
    .page-inner .intro-txt p{
        font-size: 16px;
    }
    .page-inner .intro-txt{
        margin-top: 30px;
        margin-bottom: 50px;
    }
    .m-tit{
        font-size: 26px;
    }

    /* company */
    .company .card-wrap{
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    .company .card-wrap .card{
        margin-bottom: 0;
    }
    .company .card-wrap .card:nth-of-type(2){
        margin-top: 0;
    }
    .company .card-wrap .card .txt-box{
        bottom: 35px;
        left: 30px;
        right: 30px;
    }
    .company .card-wrap .card .txt-box .tit{
        font-size: 22px;
        margin-bottom: 12px;
    }
    

    /* history */
    .history .timeline-wrap:before{
        left: 0;
        height: calc(100% - 110px);
    }
    .history .timeline{
        width: 100%;
        padding: 0 50px;
    }
    .history .timeline .year{
        font-size: 32px;
        margin-bottom: 20px;
    }
    .history .timeline ul li{
        padding-bottom: 10px;
        gap: 15px;
    }
    .history .timeline:nth-of-type(odd){
        margin-left: 0;
    }
    .history .timeline:nth-of-type(even){
        text-align: left;
    }
    .history .timeline:nth-of-type(even) ul li{
        flex-direction: row;
    }
    .history .timeline .year::after{
        left: -58px;
    }
    .history .timeline:nth-of-type(even) .year::after{
        right: auto;
        left: -58px;
    }

    /* location */
    .map .map-wrap{
        flex-direction: column;
        gap: 30px;
    }
    .map .map-box{
        height: 400px;
        flex: initial;
    }
    .map .map-box iframe{
        height: 100%;
    }
    .map .info-wrap{
        padding-left: 0;
    }
    .map .info-wrap .info{
        margin-top: 12px;
    }

    /* prd */
    .page-prd-head-wrap{
        flex-direction: column;
        gap: 30px;
    }
    .page-prd-head-wrap .head-img{
        width: 100%;
    }
    .page-prd-head-wrap .page-prd-head{
        width: 100%;
        padding: 0;
        text-align: center;
    }
    .sub-tit-wrap p, .page-prd-head p{
        margin-top: 12px;
    }
    .sub-tit-wrap{
        margin-bottom: 30px;
    }
    .tab-btn{
        margin-bottom: 50px;
        gap: 8px;
    }
    .tab-btn button{
        font-size: 16px;
        max-width: 200px;
        flex: 1;
    }

    .prd .con-key .card-wrap .tit{
        font-size: 16px;
        margin-bottom: 10px;
    }
    .prd .con-key .card-wrap{
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    .prd .con-key .card-wrap img{
        width: 80px;
        height: 80px;
    }
    .prd .con-key .card-wrap .card{
        padding: 30px 20px;
    }
    .prd .con-adv .txt-wrap{
        padding: 0;
    }
    .prd .con-adv .txt-wrap .tit{
        font-size: 16px;
    }
    
    
    /* prd01 */
    .prd01 .con-key .key-wrap{
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    .prd01 .con-key .key-wrap .txt-wrap .tit{
        font-size: 16px;
        margin: 20px 0 8px;
    }
    .prd01 .con-paly .btn-wrap{
        position: relative;
        margin-top: 30px;
    }
    .prd01 .con-paly .btn-wrap .btn{
        position: static;
    }
    .prd01 .con-paly .btn-wrap button{
        width: 180px;
        height: 60px;
        font-size: 16px;
    }
    .prd01 .con-paly .btn-wrap .desc{
        width: 100%;
        padding: 0 20px;
        white-space: normal;
    }

    .prd01 .con-model .tc1 .tab-wrap{
        flex-direction: column;
    }
    .prd01 .con-model .tc1 .img-wrap{
        width: 100%;
        margin-right: 0;
        height: 350px;
    }
    .prd01 .con-model .tc1 .txt-wrap{
        width: 100%;
    }
    .prd01 .con-model .txt-wrap .tit{
        font-size: 20px;
        margin-bottom: 12px;
    }
    .prd01 .con-model .tc1 .table-wrap .table-tit{
        font-size: 16px;
        margin-bottom: 12px;
    }
    .prd01 .con-model .tc1 .table-wrap{
        margin-top: 30px;
    }
    .prd01 .con-model .tc1 table{
        font-size: 14px;
    }
    .prd01 .con-model .tc1 table th,
    .prd01 .con-model .tc1 table td{
        padding: 12px;
    }
    .prd01 .con-model .tc1 table .pad{
        padding: 5px 12px;
    }

    .prd01 .con-model .tc2 .model-list .tit,{
        font-size: 16px;
    }
    .prd01 .con-model .tc2 .model-box .txt{
        font-size: 16px;
        margin-bottom: 12px;
    }
    .prd01 .con-model .tc2 .model-list-wrap{
        gap: 20px;
        margin-top: 30px;
    }
    .prd01 .con-model .tc2 .model-box:not(:last-of-type)::after{
        width: 60px;
        height: 60px;
        right: -40px;
        top: calc(100% + 10px);
    }
    
    .prd .con-model2 .btn{
        width: 200px;
        margin: 30px auto 0;
        height: 50px;
    }
    .prd .view .img-wrap{
        gap: 20px;
    }

    /* prd02 */
    .prd02 .con-fms .txt-wrap{
        gap: 50px;
    }
    .prd02 .con-fms .txt-box .cont{
        font-size: 16px;
    }
    .prd02 .con-fms .m-tit{
        margin: 0 50px;
    }
    .prd02 .con-fms .m-tit::before,
    .prd02 .con-fms .m-tit::after{
        width: 24px;
        height: 24px;
    }
    .prd02 .con-fms .m-tit::before{
        left: -50px;
    }
    .prd02 .con-fms .m-tit::after{
        right: -50px;
    }
    .prd02 .con-fms .txt-box .tit{
        margin-bottom: 12px;
    }
    .prd02 .con-install .page-inner{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .prd02 .con-install .sub-tit-wrap{
        text-align: center;
        padding: 0;
    }
    .prd02 .con-install .img-wrap{
        width: 75%;
    }

    /* prd03 */
    .prd03 .con-model2 .hw .hw-card li .tit,
    .prd .view .img-wrap .txt{
        font-size: 16px;
    }
    .prd03 .con-model2 .hw .hw-card{
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .prd03 .con-model2 .hw .hw-card li{
        padding: 30px 20px;
    }
    .prd03 .con-model2 .hw .hw-card li img{
        width: 80px;
        height: 80px;

    }
    

    /* prd04 */
    .page-prd-head .age{
        margin-bottom: 10px;
        padding: 8px 24px;
    }
    .prd04 .page-prd-head-wrap{
        flex-direction: column;
    }
    .prd04 .prd04-2 .page-prd-head-wrap{
        flex-direction: column-reverse;
    }
    .prd04 .prd04-2 .page-prd-head-wrap .page-prd-head{
        padding: 0;
    }

    /* prd-model */
    .prd-model .con-model .txt-wrap .tit{
        font-size: 20px;
    }
    .prd-model .con-model .txt-wrap .hash li{
        font-size: 14px;
    }
    .prd-model .con-model .txt-wrap p{
        margin: 12px 30px;
    }
    .prd-model .con-model .gallery .gallery-no-swiper{
        gap: 20px;
    }

    /* capa01 */
    .capa01 .card-tit{
        font-size: 26px;
    }
    .capa01 .card-box .card .num{
        margin-bottom: 12px;
    }
    
    .capa01 .card-box{
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    .capa01 .card-box .card{
        gap: 20px;
        padding: 40px 30px;
        height: 300px;
    }
    .capa01 .c2 .card{
        height: 300px;
    }
    
    .capa01 .card-box .card .icon-wrap{
        width: 60px;
        height: 60px;
    }
    .capa01 .c2{
        margin-top: 50px;
    }
    .capa01 .card-box .card .tit{
        font-size: 18px;
    }

    /* capa02 */
    .capa02 .con-box .txt-box .tit{
        font-size: 26px;
        margin-bottom: 12px;
    }
    .capa02 .con-box{
        flex-direction: column-reverse;
        gap: 20px;
        margin-bottom: 75px;
    }
    .capa02 .con-box .txt-box{
        width: 100%;
        padding: 0;
    }
    .capa02 .con-box .capa-swiper{
        width: 100%;
    }
    .capa02 .con-box:nth-of-type(even){
        flex-direction: column-reverse;
    }
    .capa02 .con-box:nth-of-type(even) .txt-box{
        padding: 0;
    }
    .capa02 .con-box .txt-box p{
        font-size: 16px;
    }

    /* prvideo */
    .pg_wrap{
        margin-top: 50px;
    }
    .prvideo #bo_gall #gall_ul{
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
    }
    .prvideo #bo_gall .bo_tit{
        font-size: 16px;
        margin: 20px 0 8px;
    }
    .prvideo #bo_gall .gall_date{
        font-size: 14px;
    }
    #bo_v_atc{
        padding: 0;
    }
    .if_date{
        padding: 15px 0;
    }
    #bo_v_title .bo_v_tit{
        font-size: 28px;
        padding: 20px 10px;
    }
    .back-to-list .btn{
        font-size: 16px;
        width: 160px;
    }
    .back-to-list{
        margin-top: 50px;
    }

    /* inquiry */
    .inquiry .page-inner{
        flex-direction: column;
        gap: 30px;
    }
    .inquiry .page-inner .txt-box{
        padding: 0;
    }
    .inquiry .page-inner .txt-box .tit{
        font-size: 26px;
        margin-bottom: 12px;
    }
    .inquiry .page-inner .txt-box p{
        font-size: 16px;
    }
    .inquiry #email-form-wrap .send_btn{
        margin: 50px auto 0;
        height: 50px !important;
    }
    
   
}

@media (max-width: 599px) {
    /* reset */
    br.mo{
        display: none;
    }
    span.mo{
        display: none;
    }
    /* header */
    header .util{
        gap: 12px;
    }
    /* footer */
    footer .info .info-tit{
        width: 100px;
    }
    /* index */
    #main_wr .visual .txt-box .tit-txt{
        font-size: 36px;
    }
    #main_wr .visual .txt-box .sub-txt{
        font-size: 14px;
    }
    #main_wr h3,
    #main_wr .contact .tit-wrap h3{
        font-size: 22px;
    }
    #main_wr .product,
    #main_wr .capa,
    #main_wr .media{
        padding: 0 0 75px;
    }
    .prd .con-gallery{
        margin-top: 75px;
    }
    #main_wr .contact{
        padding: 60px 0;
    }

    /* sub-page */
    
    #sub-page{
        padding: 75px 0 100px;
    }
    #sub-page.prd04{
        padding: 75px 0 0;
    }
    .prd .con-model2,
    .prd-model .con-model .gallery{
        margin-top: 75px;
    }
    .prd04 .prd04-2{
        padding: 75px 0 100px;
    }
    .prd-model .con-intro{
        margin-bottom: 75px;
    }
    .l-tit{
        font-size: 24px;
    }
    .m-tit{
        font-size: 22px;
    }
    

    /* history */
    .history .timeline{
        padding: 0;
        padding-left: 30px;
    }
    .history .timeline .year::after{
        left: -38px;
    }
    .history .timeline:nth-of-type(even) .year::after{
        left: -38px;
    }
    .history .timeline .year{
        font-size: 24px;
    }
    .history .timeline-wrap:before {
        top: 20px;
        height: calc(100% - 90px);
    }

    /* location */
    .map .info-wrap .info li .tit{
        width: 80px;
    }

    /* prd */
    .page-prd-head-wrap,
    .prd .video-wrap{
        margin-bottom: 75px;
    }
    .prd01 .con-paly{
        margin: 75px 0;
        padding: 75px 0 120px;
    }
    .prd02 .con-install,
    .prd02 .con-fms,
    .prd03 .con-adv{
        margin: 50px 0;
        padding: 50px 0;
    }
    .tab-btn button{
        height: 45px;
        font-size: 14px;
    }
    .prd .con-adv .img-wrap{
        display: none;
    }
    .prd .con-adv .txt-wrap{
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }
    .prd .con-adv .txt-wrap .tit{
        margin-top: 20px;
        margin-bottom: 12px;
    }
    .prd .con-adv .txt-box .adv-img{
        display: block;
        width: 50%;
        margin: 0 auto;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.18);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .prd .con-adv .txt-box:nth-of-type(1) .adv-img{
        background: linear-gradient(90deg, #75EEEB, #62DDE5, #48C6DD, #3CBCD9);
    }
    .prd .con-adv .txt-box:nth-of-type(2) .adv-img{
        background: linear-gradient(90deg, #33B4D6, #3EA7D1, #6577BE, #7168B8);
    }
    .prd .con-adv .txt-box:nth-of-type(3) .adv-img{
        background: linear-gradient(90deg, #7366B7, #8154B0, #933FA8, #9937A5);
    }
    .prd .con-adv .txt-box .adv-img img{
        object-fit: contain;
        width: 40%;
        /* min-width: 100px; */
        aspect-ratio: 1 / 1;
    }


    /* prd01 */
    @keyframes light-solid{
        0%, 100% {border: 2px dashed #fff;}
        50% {border: 2px dashed var(--brand-color);}
    }
    .prd01 .con-paly .light-wrap .light{
        animation: light-solid 1.2s infinite;
    }
    .prd01 .con-paly .btn-wrap{
        gap: 8px;
    }
    .prd01 .con-paly .btn-wrap .btn{
        flex: 1;
    }
    .prd01 .con-paly .btn-wrap button{
        width: 100%;
        height: 45px;
        font-size: 14px;
    }
    .prd01 .con-model .tc2 .model-list-wrap{
        grid-template-columns: 1fr;
    }
    .prd01 .con-model .tc2 .model-box:last-child {
        grid-column: auto;
        flex-wrap: wrap;
    }
    .prd01 .con-model .tc2 .model-box:last-of-type .model-list{
        width: 100%;
    }
    .prd01 .con-model .tc2 .model-box:nth-of-type(2)::after{
        content: '';
    }
    .prd01 .con-model .tc2 .model-box:not(:last-of-type)::after{
        right: auto;
        top: calc(100% + -20px);
        transform: none;
    }

    /* prd02 */
    .prd02 .con-fms .m-tit{
        margin: 0 30px;
    }
    .prd02 .con-fms .m-tit::before,
    .prd02 .con-fms .m-tit::after{
        width: 20px;
        height: 20px;
    }
    .prd02 .con-fms .m-tit::before{
        left: -30px;
    }
    .prd02 .con-fms .m-tit::after{
        right: -30px;
    }
    /* prd03 */
    .prd03 .con-model2 .hw .hw-card{
        grid-template-columns: repeat(1, 1fr);
    }
    .prd .view .img-wrap{
        grid-template-columns: repeat(1, 1fr);
    }
    .prd .con-cont .cont-detail{
        margin-top: 12px;
    }
    /* prd-model */
    .prd-model .con-intro .bg-img{
        height: 250px;
    }
    .prd-model .con-intro .panel-list .pannel{
        position: relative;
        top: auto;
        left: auto;
        display: block;
        opacity: 1;
        margin: 10px 0;
        white-space: normal;
        transform: none;
        padding: 20px;
    }
    .prd-model .con-intro .panel-list .pannel::after{
        /* content: '1'; */
        position: absolute;
        top: 20px;
        left: 20px;
        color: rgba(0, 0, 0, 0.12);
        font-size: 24px;
        font-weight: 700;
    }
    .prd-model .con-intro .panel-list .pannel:nth-of-type(1)::after{
        content: '1';
    }
    .prd-model .con-intro .panel-list .pannel:nth-of-type(2)::after{
        content: '2';
    }
    .prd-model .con-intro .panel-list .pannel:nth-of-type(3)::after{
        content: '3';
    }
    .prd-model .con-intro .panel-list .pannel:nth-of-type(4)::after{
        content: '4';
    }
    .prd-model .con-intro .dot-img::before{
        /* content: '1'; */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        color: #fff;
        background: var(--brand-color);
        border-radius: 50%;
        font-size: 12px;
        z-index: 10;
        line-height: 20px;
        text-align: center;
    }
    .prd-model .con-intro .dot-box:nth-of-type(1) .dot-img::before{
        content: '1';
    }
    .prd-model .con-intro .dot-box:nth-of-type(2) .dot-img::before{
        content: '2';
    }
    .prd-model .con-intro .dot-box:nth-of-type(3) .dot-img::before{
        content: '3';
    }
    .prd-model .con-intro .dot-box:nth-of-type(4) .dot-img::before{
        content: '4';
    }

    /* capa01 */
    .capa01 .card-tit{
        font-size: 22px;
    }

    /* capa02 */
    .capa02 .con-box .txt-box .tit{
        font-size: 22px;
    }
    .capa02 .con-box .txt-box p{
        font-size: 14px;
    }
    .capa02 .con-box{
        margin-bottom: 50px;
    }
    .prd02 .con-install .img-wrap{
        width: 100%;
    }

    /* cert */
    .cert #bo_gall #gall_ul{
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 20px;
    }
    .cert #bo_gall .gall_text_href{
        margin: 12px;
    }

    /* prvideo */
    .prvideo #bo_gall .bo_tit{
        margin: 12px 0 8px;
    }
    .prvideo #bo_gall #gall_ul{
        grid-template-columns: repeat(1, 1fr);
        /* gap: 20px; */
    }
    #bo_v_title .bo_v_tit{
        font-size: 24px;
    }

    /* inquiry */
    .inquiry .page-inner .txt-box .tit{
        font-size: 22px;
    }

    /* popup */
}