@media screen and (max-width:1399px) {
    .company-subtitle{
        font-size: 64px;
    }
}
@media screen and (max-width:1299px) {
    /* common responsive style */
    .con-width {
        padding: 0 5%;
    }
    .page-wrap{
        padding: 100px 0;
    }
    .sub-hd{
        margin-bottom: 40px;
        flex-direction: column;
        align-items: flex-start;
    }
    .sub-title{
        font-size: 36px;
    }
    .visual-txt h2{
        font-size: 100px;
    }
    .visual-txt p{
        font-size: 28px;
    }
    .scroll-circle{
        width: 120px;
        height: 120px;
    }
    .circle-arrow{
        width: 32px;
        height: 32px;
    }
    /* common responsive style */

    /* header responsive style */
    .gnb {
        display: none;
    }
    .hd-con {
        padding: 0 5%;
    }
    /* header responsive style */

    /* footer responsive style */
    #footer{
        padding: 60px 0;
    }
    .ft-con{
        padding: 0;
    }
    .ft-add{
        margin-top: 40px;
    }
    .ft-add ul li{
        font-size: 16px;
        margin-bottom: 6px;
    }
    .cpright{
        margin-top: 40px;
    }
    /* footer responsive style */

    /* main responsive style */
    .main-visual>.main-visual-txt>h2 {
        font-size: 66px;
    }
    .main-visual>.main-visual-txt>p{
        font-size: 22px;
        margin-top: 16px;
    }
    .section1{
        padding-top: 100px;
        padding-bottom: 130px;
    }
    .sec1-con {
        padding-top: 80px;
    }
    .sec1-title{
        font-size: 100px;
    }
    .sec1-txt > p{
        margin-top: 42px;
        margin-bottom: 30px;
        font-size: 20px;
    }
    .sec2-txt > span{
        font-size: 50px;
    }
    .sec2-txt>p{
        font-size: 16px;
    }
    .sec2-summ{
        flex-direction: column;
        margin-top: 44px;
    }
    .sec2-summ-box{
        width: 100%;
    }
    .section3{
        padding: 100px 0;
    }
    .sec3-txt>h2{
        font-size: 50px;
    }
    .section4{
        padding:100px 0;
    }
    .section5{
        height: 580px;
    }
    .sec5-txt{
        margin-bottom: 60px;
    }
    .sec5-txt h2{
        font-size: 60px;
    }
    .sec3-txt>p{
        font-size: 18px;
    }
    /* main responsive style */
    /* sub responsive style */
    .company1-txt{
        flex-direction: column;
    }
    .company-subtitle{
        font-size: 54px;
        text-align: center;
    }
    .company1-txt p{
        font-size: 18px;
        text-align: center;
        margin-top: 40px;
    }
    .company2-img{
        width: 100%;
        margin-left: 0;
        height: 550px;
    }
    .company3{
        padding-top: 100px;
    }
    .company3-wrap{
        flex-direction: column;
    }
    .history-wrap{
        max-width: 100%;
        margin-top: 40px;
    }
    .map-add-wrap{
        margin-top: 40px;
    }
    .map-add{
        margin-left: 0;
        margin-right: 20px;
    }
    .map-add span{
        font-size: 20px;
    }
    .map-add p{
        font-size: 16px;
    }
    .map-box iframe{
        height: 500px;
    }
    .pic-list{
        gap: 30px;
    }
    .sub-more-btn span{
        width: 40px;
        height: 40px;
    }
    .sub-more-btn p{
        font-size: 16px;
    }
    .pic-info span{
        font-size: 20px;
    }
    .brand-txt span{
        font-size: 50px;
    }
    .brand-txt p{
        font-size: 16px;
    }
    .brand-img{
        margin-top: 40px;
    }
    .brand1{
        padding-bottom: 100px;
    }
    .brand-swiper{
        width: 100%;
        height: 90vh;
    }
    .swiper-button-prev {
        left: 5% !important;
    }
    .swiper-button-next {
        right: 5% !important;
    }
    .slide-title{
        font-size: 50px;
    }
    .slide-con p{
        font-size: 16px;
    }
    .swiper-button-prev, .swiper-button-next{
        font-size: 18px;
    }
    .brand3{
        padding-top:100px;
    }
    .contact-bg{
        height: 530px;
    }
    .contact-text p{
        font-size: 30px;
        margin-bottom: 30px;
    }
    .pdc-con{
        gap:60px;
        margin-bottom: 100px;
    }
    .pdc-name{
        font-size: 30px;
    }
    .pdc-txt{
        font-size: 20px;
    }
    .pdc-list-wrap{
        margin: 44px 0;
    }
    .pdc-list:first-of-type{
        margin-bottom: 24px;
    }
    .pdc-list-title{
        font-size: 18px;
    }
    .pdc-list-txt{
        font-size: 16px;
    }
    .detail2{
        padding-top: 100px;
    }
    .detail-title{
        font-size: 30px;
    }
    .detail2-txt p{
        font-size: 20px;
    }
    .detail-br{
        display: none;
    }
    .detail-list{
        gap:30px 60px;
    }
    .detail-list-txt{
        font-size: 18px;
    }
    .detail3, .detail4{
        padding-top: 100px;
    }
    .info-table th{
        font-size: 18px;
    }
    .info-table td{
        font-size: 16px;
    }
    .gall_list_style{
        grid-template-columns: repeat(3, 1fr);
    }
    .board_list_txt{
        padding: 30px 20px;
    }
    .list-date{
        margin-bottom: 80px;
    }
    .inquiry-txt{
        font-size: 36px;
    }
    .inquiry-info{
        padding: 30px;
        margin-top: 30px;
    }
    .inquiry-info p{
        font-size: 20px;
    }
    .inquiry-add span{
        font-size: 16px;
    }
    .inquiry-add p{
        font-size: 16px;
    }
    .form-box label{
        font-size: 18px;
    }
    /* sub responsive style */
}

@media screen and (max-width:991px){
    .section2{
        padding: 100px 0;
    }
    .sec2-slide-wrap{
        display: none
    }
    .sec2-mobile-wrap{
        display: block;
    }
    .sec2-mobile{
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    .sec2-mobile-box:first-of-type{
        margin-bottom: 50px;
    }
    .sec2-mobile .sec2-img{
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .sec2-mobile .sec2-box{
        position: relative;
        opacity: 1;
        height: 50%;
        margin-top: 30px;
    }
    .sec2-slide{
        flex-direction: column;
        height: auto;
    }
    .sec2-img-wrap{
        width: 100%;
        height: auto;
    }
    .sec2-img-cover{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #00000020;
    }
    .sec2-box-wrap{
        position: relative;
        width: 100%;
        height: auto;
    }
    .sec2-box{
        padding-left: 0;
        padding-right: 0;
    }
    .sec2-txt{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        background-color: #ffffff40;
        backdrop-filter: blur(2px);   
        z-index: 1;
        box-shadow: 0px 2px 10px #eaeaea; 
    }
    .sec2-txt>span{
        color: var(--main-color);
    }
    .sec2-txt>p{
        color: var(--main-color);
    }
    .sec2-summ{
        flex-direction: unset;
        margin-top: 0;
        gap: 12px;
    }
    .sec2-summ-box{
        max-width: calc(50% - 6px);
    }
    .pic-box{
        width: 100%;
        min-width: 0;
        height: auto;
        flex-direction: column;
        grid-column: auto;
        grid-row: auto;
        max-height: 100%;
        aspect-ratio: unset;
    }
    .pic-thumb{
        max-width: 100%;
        width: 100%;
        height: 70%;
    }
    .sub-more-btn{
        margin-top: 20px;
    }
    .brand-con{
        flex-direction: column;
    }
    .brand-txt{
        margin-top: 0;
    }
    .brand-swiper{
        height: 80vh;
    }
    .arrow-icon::before{
        width: 36px;
        height: 36px;
    }
    .nav-text{
        display: none;
    }
    .pdc-con{
        gap: 40px;
        flex-direction: column-reverse;
    }
    .pdc-con:nth-of-type(even){
        flex-direction: column-reverse;
    }
    .pdc-img{
        max-width: 80%;
        margin: 0 auto;
    }
    .detail2-hd{
        flex-direction: column;
        align-items: flex-start;
    }
    .detail2-txt{
        margin-bottom: 20px;
    }
    .detail3-txt{
        flex-direction: column;
        align-items: flex-start;
    }
    .detail3-txt p{
        margin-top: 20px;
    }
    .detail-use{
        flex-direction: column;
    }
    .use-box{
        display: flex;
    }
    .use-img{
        width: 40%;
    }
    .use-txt{
        margin-left: 20px;
        flex:1
    }

    .info-table,
    .info-table tbody,
    .info-table tr {
        display: block;
        width: 100%;
    }

    .info-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .info-table th {
        font-weight: 600;
        border-bottom: none;
        width: 100%;
    }

    .info-table tr {
        display: grid;
        grid-template-columns: 20% 80%;  
    }

    .info-table tr > th:nth-of-type(3),
    .info-table tr > td:nth-of-type(4) {
        grid-row: span 1;
    }
    
    .inquiry-wrap{
        flex-direction: column;   
    }
    .inquiry-left{
        max-width: 100%;
    }
    .inquiry-right{
        max-width: 100%;
    }
    .inquiry-form{
        margin-top: 40px;
    }
    .form-box textarea{
        margin-bottom: 30px;
    }
    .inquiry-form .view-more-btn{
        margin: 0 auto;
    }
}

@media screen and (max-width:800px) {
    .visual-txt h2{
        font-size: 70px;
    }
    .visual-txt p{
        font-size: 26px;
    }
    .sec1-title{
        font-size: 76px;
    }
    .sec1-con{
        padding-top: 0;
    }
    .sec1-txt{
        position: relative;
    }
    .sec1-img{
        width: 100%;
        position: relative;
        top:0;
        margin-top: 50px;
        height: auto;
        padding-bottom: 56.25%;
    }
    .sec3-txt>h2{
        font-size: 38px;
    }
    .sec3-thumb-wrap{
        margin-top: 44px;
        grid-template-columns: repeat(2, auto);
        gap:10px;
    }
    .section5{
        height: 480px;
    }
    .sec5-txt{
        margin-bottom: 50px;
    }
    .sec5-txt h2{
        font-size: 52px;
    }
    .contact-bg{
        height: 430px;
    }
    .company1-txt p{
        font-size: 16px;
    }
    .company2-img{
        height: 450px;
    }
    .map-add-wrap{
        flex-direction: column;
        align-items: flex-start;
    }
    .map-add span{
        font-size: 18px;
        min-width: 50px;
    }
    .map-box iframe{
        height: 400px;
    }
    .detail-list-box{
        flex: 1 1 100%;
    }
    .gall_list_style{
        grid-template-columns: repeat(2, 1fr);
    }
    .board_common_btn_list ul{
        flex-wrap: wrap;
    }
    .board_common_btn_list a, .board_common_btn_list button{
        font-size: 14px;
    }
}


@media screen and (max-width:600px) {
    /* common responsive style */
    .con-width {
        padding: 0 4%;
    }
    .page-wrap{
        padding: 80px 0;
    }
    .sub-hd{
        margin-bottom: 30px;
    }
    .view-more-btn span{
        width: 40px;
        height: 40px;
    }
    .view-more-btn p{
        font-size: 16px;
        margin-left: 12px;
    }
    .sub-visual{
        height: 60vh;
        padding-top: 0;
    }
    .visual-con{
        padding-top: 0;
    }
    .visual-txt{
        margin-bottom: 50px;
    }
    .visual-txt h2{
        font-size: 46px;
    }
    .visual-txt p{
        font-size: 22px;
    }
    .scroll-circle{
        width: 80px;
        height: 80px;
        margin-bottom: 50px;
    }
    .circle-arrow{
        width: 24px;
        height: 24px;
    }
    /* common responsive style */

    /* header responsive style */
    .hd-con {
        padding: 0 4%;
    }
    .side-nav {
        padding-top: 100px;
        max-width: 100%;
    }
    .snb {
        padding-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .hd-logo {
        width: 156px;
    }

    .snb-link {
        font-size: 20px;
        text-align: center;
    }

    .side-menu>li {
        text-align: center;
    }
    /* header responsive style */

    /* footer responsive style */
    /* footer responsive style */
    #footer{
        padding: 50px 0;
    }
    .ft-add{
        margin-top: 30px;
    }
    .ft-add ul{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .ft-add ul li{
        font-size: 14px;
        margin-bottom: 5px;
    }
    .ft-add ul:last-of-type li::after{
        display: none;
    }
    .cpright{
        margin-top: 30px;
    }
    /* footer responsive style */
    .ft-logo{
        width: 156px;
    }
    /* footer responsive style */

    /* main responsive style */
    .main-visual>.main-visual-txt>h2 {
        font-size: 48px;
    }
    .main-visual>.main-visual-txt>p{
        font-size: 18px;
        margin-top: 12px;
    }
    .section1{
        padding-top: 80px;
        padding-bottom: 100px;
    }
    .sec1-txt>h2 {
        font-size: 58px;
    }
    .sec1-txt > p{
        font-size: 16px;
        margin-top: 24px;
    }
    .section2{
        padding: 80px 0;
    }
    .sec2-mobile .sec2-box{
        margin-top: 20px;
    }
    .sec2-txt > span{
        font-size: 40px;
    }
    .sec2-txt>p{
        font-size: 14px;
    }
    .sec2-summ-box{
        padding: 12px;
    }
    .sec2-summ-icon{
        width: 24px;
        height: 24px;
    }
    .sec2-summ-box>span{
        font-size: 18px;
    }
    .sec2-summ-box>p{
        font-size: 15px;
    }
    .section3{
        padding: 80px 0;
    }
    .sec3-txt>h2{
        font-size: 32px;
    }
    .sec3-txt>p{
        font-size: 16px;
        margin-top: 18px;
    }
    .section4{
        padding: 80px 0;
    }
    .section5{
        height: 380px;
    }
    .sec5-txt h2{
        font-size: 36px;
    }
    .sec5-txt p{
        font-size: 20px;
    }
    /* main responsive style */
    .company-subtitle{
        font-size: 44px;
        text-align: left;
    }
    .br-hide{
        display: none;
    }
    .company1-txt{
        align-items: flex-start;
    }
    .company1-txt p{
        margin-top: 30px;
        text-align: left;
    }
    .company2-img{
        height: 350px;
    }
    .company3{
        padding-top: 80px;
    }
    .history{
        margin-left: 30px;
    }
    .year{
        font-size: 24px;
        margin-right: 14px;
    }
    .date{
        font-size: 16px;
    }
    .content{
        font-size: 16px;
    }
    .sub-title{
        font-size: 30px;
    }
    .map-add-wrap{
        margin-top: 30px;
    }
    .map-box iframe{
        height: 320px;
    }
    .modal-box {
        max-width: 80%;
        width: 100%;
    }
    .brand1{
        padding-bottom:80px;
    }
    .brand-txt span{
        font-size: 40px;
    }
    .brand-txt p{
        font-size: 14px;
    }
    .brand-swiper{
        height: 70vh;
    }
    .slide-num{
        font-size: 16px;
    }
    .slide-title{
        font-size: 40px;
    }
    .slide-con {
        padding: 0 36px;
    }
    .slide-con p{
        font-size: 14px;
    }
    .swiper-button-prev, .swiper-button-next{
        font-size: 16px;
    }
    .brand3{
        padding-top:80px;
    }
    .contact-bg{
        height: 0;
        padding-bottom: 56.25%;
    }
    .contact-text p{
        font-size: 20px;
        margin-bottom: 20px;
    }
    .pdc-con{
        gap: 30px;
        margin-bottom: 80px;
    }
    .pdc-img{
        max-width: 100%;
    }
    .pdc-txt{
        font-size: 18px;
    }
    .pdc-list-wrap{
        margin: 34px 0;
    }
    .pdc-list:first-of-type{
        margin-bottom: 20px;
    }
    .pdc-list-title{
        font-size: 16px;
    }
    .pdc-list-txt{
        font-size: 14px;
    }
    .detail-list-txt{
        font-size: 16px;
    }
    .detail2{
        padding-top: 80px;
    }
    .detail-list{
        gap: 50px;
    }
    .detail2-txt p{
        font-size: 16px;
    }
    .detail3, .detail4{
        padding-top: 80px;
    }
    .detail3-txt p{
        font-size:14px;
    }
    .use-txt span{
        font-size: 18px;
    }
    .use-txt p{
        font-size: 16px;
    }
    .info-table th{
        font-size: 16px;
    }
    .info-table td{
        font-size: 14px;
    }
    .board_list_txt h3{
        font-size: 18px;
    }
    .board-list-content{
        font-size: 15px;
        margin-top: 10px;
    }
    .list-date{
        font-size: 14px;
    }
    .board_list_txt2 h3{
        font-size: 18px;
    }
    .list-date2{
        font-size: 14px;
    }
    .more_btn{
        padding: 12px 28px;
        font-size: 16px;
    }
    .inquiry-txt{
        font-size: 28px;
    }
    .inquiry-info{
        padding: 20px;
        margin-top: 20px;
    }
    .inquiry-info p{
        font-size: 18px;
    }
    .inquiry-add span{
        font-size: 14px;
    }
    .inquiry-add p{
        font-size: 14px;
    }
    .inquiry-form{
        margin-top: 30px;
    }
    .form-box label{
        font-size: 18px;
    }
    .form-box input{
        padding: 12px 14px;
        font-size: 14px;
    }
    .form-box textarea{
        margin-bottom: 20px;
    }
}


@media screen and (max-width:499px){
    .main-visual>.main-visual-txt>h2 {
        font-size: 42px;
    }
    .sec1-txt>h2{
        font-size: 50px;
    }
    .sec2-summ-box{
        max-width: 100%;
    }
    .sec3-txt>h2 {
        font-size: 26px;
    }
}