@charset "utf-8";


@media screen and (max-width:1440px) {

.sec-02 h2 {font-size: 3rem;}
.sub-tit p br{ display: none;}
.main-tit h1 {font-size: 4rem;}
.sec-03 .sub-tit {width: 40%;     margin-right: 10%;}
.contact {flex: 1;}
.info-left-top {padding: 40px 70px 40px 0;}
.sec-04-con {width: 90%;}
.item-con {padding: 94px 0 0 96px;}

.subTit {padding-left: 40px;}
#sv #sub-lnb.add .menu03.depth2 {display: flex; gap: 28px;}
#subConents {padding: 0 40px;}
#subConents .sub-page .top-area h2 {font-size: 40px; margin-bottom: 50px;}
#subConents {margin: 100px 0;}


}

@media screen and (max-width:1406px) {
.sec-03 .sub-tit {
    padding: 100px 56px 0 60px;}
}

@media screen and (max-width:1024px) {

    #header {height: 80px;}
    .menu_btn {display: block;}
    .menu_btn img{width: 24px; }

    #main-container {    margin-top: 80px}
    .logo {width: 160px;}
    #gnb ul {display: none;}
    section.sec-01 {height: 580px;}    
    section.sec-02 {flex-wrap: wrap;}
    .sub-tit {position: unset;}

    .sec-02 h2 {/* text-align: center; */         padding-top: 50px;}
    .sub-tit span {color: #fff;  position: absolute; top: 12px; left: 4%; font-size: 18px; transform: translate(0%, 0);}
    .sub-tit span::before {background: var(--main-color02);}
    .sec-03-con .sub-tit span {color: var(--main-color); }
    .sec-03-con.sub-tit span::before {background: var(--main-color);}
    .swiper.project {width: 100%;}
    .sec-03 .sub-tit {left: 50%;transform: translate(-50%, 0); margin-right: unset; position: absolute;  background: none; color: #fff; width: 100%;    /*  padding: 100px 56px 0 60px; */}
    .sec-03 .sub-tit p {color: #fff;}
    a.gall {    bottom: -142px;}
    .sec-04-con {width: 100%;    flex-direction: column-reverse;}
    .item-con {width: 100%; padding: 48px 56px 70px;}
    .sec-04 .sub-tit {width: 100%;            padding: 48px 56px;}
    .sec-04 .sub-tit span {margin-bottom: 0; font-size: 32px;         position: unset;}
    .tit-inner {display: flex; align-items: center; justify-content: center; gap: 36px; flex-wrap: wrap;}
    .sec-04 .sub-tit p {margin-bottom: 0;}
    .item-con span {display: block; /* text-align: center; */     margin-bottom: 48px; font-size: 24px;         padding-bottom: 24px; border-bottom: 1px solid #efefef;}
    .btn-news {left: 50%;height: 20px;transform: translate(-50%, 20px);max-width: 160px;}

    .info-left-top {/* padding: 40px 40px 40px 0; */}
    .ft-con {margin-left: 4%; width: 100%;}
    .info-left-top{}
    .contact {flex: 1;}

    .sec-03 h3 {margin-bottom: 96px;}

    .btn-con.txt { position: absolute; bottom: 80px; width: 150px; right: 0; left:unset; transform: translate(-50%, 0);}

    .btn-con.txt .swiper-button-prev, .btn-con.txt .swiper-button-next { color: #fff!important;}
    .main-tit p {font-size: 1.15rem;}

    p.copy {margin-left: 0;}
    .info-bt { padding: 12px 40px;  }
    .priv-wr {margin-right: 0;}


    .lnb-bg {display: none;}
    #sv .add {display: none;}
    #subConents .sub-page .top-area h2 {font-size: 36px;}
    .item.greet-txt h3 {font-size: 28px;}
    .item.greet-txt p {font-size: 17px;}
    #subConents {margin: 80px 0;}

    .gall_row .col-gn-4 {width: 33.333%;}
    .subTit h1 {font-size: 56px;}

    .tab__item {font-size: 16px;}

    #subConents .sub-page .top-area h2 { margin-bottom: 36px;}
    .glass-detail {margin-left: 0;}
    .glass-con h3 {padding-left: 0; font-size: 24px;}
    .glass-detail li {font-size: 17px;}


    .product-item-con ul > li {width: calc(50% - 10px);}

    .txt-item-group {flex-direction: column; overflow-x: scroll;}
    .outline-txt h3 {font-size: 20px;}

    .outline-img-area img {height: 340px;}
    .outline-img-area {margin-bottom: 50px;}

    #bo_gall .gall_li {
        width: calc(33.333% - 10px);}

    .swiper.project .swiper-slide img {
        filter: brightness(0.8);
    }

}


@media screen and (max-width:768px) {

    #site_Map.on {width: 100%;}
    .all_menu {width: 100%;}

    .sec-02 h2 , .sec-03 h3{font-size: 2.5rem;}


    .ft-con {margin-left: 0;         flex-direction: column;}
    .ft-info {padding: 0 0 0 40px;     gap: 32px;}
    .info-left-top {padding: 40px 40px 40px 0;}
    #footer {border-top: 1px solid #efefef;}
    .ft-top {flex-direction: column;}
    .contact {width: 100%; padding: 40px 40px 30px; text-align: center; justify-content: center;}
    .contact dl > .d-flex{justify-content: center;}
    .info-right {flex-wrap: wrap;     gap: 32px;}
    .item-con {padding: 48px 40px 56px;}
    a.about.en-mon {right: 20%}
    .main-tit h1 {font-size: 3.5rem;}
    a.about.en-mon {font-size: 20px;}

    dd.ct {margin-bottom: 12px;}
    .info-left {width: 100%;}
    .ft-logo {text-align: center;}
    .sec-03 .sub-tit {padding: 160px 40px 0 40px;}

    .gall_row .col-gn-4 {width: 50%;}
    #subConents {margin: 50px 0;}
    .subTit h1 {font-size: 48px;}
    #subConents .sub-page .top-area h2 {font-size: 32px;}
    .tab__item {padding: 1rem 1.4rem;}
    .tab {padding: 0;}
   
    .glass-con {justify-content: center;  flex-direction: column;  gap: 24px;     padding: 30px;}
    .glass-con h3 {padding-left: 0;         font-size: 24px;}
    .glass-con img {width: 100%;}


    .product-item-con ul > li {width: calc(100% - 10px);}
    .product-item-con ul > li img {height: unset;}

    .loction {flex-wrap: wrap; gap: 0;}
    .loction-desc {width: 100%;}
    .map_area {width: 100%;height: 330px;}

    .loction-desc dl {padding-bottom: 14px; font-size: 16px;}

    .tab {margin-bottom: 50px;}

    .item.greet-txt h3 {font-size: 24px;}

    .outline-dl .d-flex {line-height: 1.8;         border-bottom: 1px solid #efefef; flex-wrap: wrap;}
    .outline-dl dd {font-size: 16px;}
    .outline-txt p {font-size: 16px;}

    .outline-txt h3 {margin: 50px 0 30px;}
    
    .loction h3 {font-size: 20px;     padding-bottom: 12px;}
    .loction span {margin-bottom: 12px;         font-size: 18px;} 

    section.sec-01::before {bottom: -32px;}
    .sub-tit span {top:15%;}
    .swiper.product {        padding-top: 0;}


    .product-item-con ul {gap: 20px 0;justify-content: center;}
    #bo_gall .gall_li { width: calc(50% - 8px);}
}





@media screen and (max-width:644px) {
    
    .tbl_head01{overflow-x: scroll;}

}

@media screen and (max-width:426px) {
    #header {height: 60px;}

    section.sec-01 {height: 420px;}
    .swiper.main .swiper-pagination {left: -32% !important;}
    .main-tit h1 {    font-size: 2.5rem;}
    a.about.en-mon {top: 62%;}
    .ft-info {padding-left:20px;         justify-content: center;}
    .info-left-top {padding: 40px 20px 40px 0;}
    .info-right {justify-content: center;         gap: 24px;}
    .dl-info {text-align: center;         width: 100%;}

    .contact {padding: 40px 20px 24px;}
    .item-box h5 {font-size: 1rem;}
    dd.ct {font-size: 28px;}
    .contact dl > .d-flex {line-height: 1.7;}
    .info-bt {justify-content: center;  padding: 12px 20px;}
    .d-flex.d-wrap {flex-wrap: wrap; gap: 0 8px;}
    .sec-04 .sub-tit {padding: 48px 20px;}
    .item-con {padding: 48px 20px 40px;}
    p.copy {font-size: 12px;}
    .sec-03 .sub-tit p {line-height: 1.5;         font-size: 14px;}
    a.gall {bottom: -94px;}
    .tit-inner {gap: 8px 36px}
    .sec-03 .sub-tit { transform: translate(-50%, 0); padding: 0 20px; bottom: -40%;}
    .sec-03 h3 {margin-bottom: 24px; font-size: 36px;}
    a.gall { width: 48px; height: 48px;         right: -20px; bottom: -21px}
    .sec-04 .sub-tit span {font-size: 24px;}
    .sec-02 h2 {font-size: 36px;}
    .btn-con.txt {transform: translate(-20%,  96px);}
    .item-con span {text-align: center; font-size: 1.25rem;}
    .main-tit h1::before {left: -40px; display: none;}
    .sec-03 { height: 480px;}

    .sec-04::before {    width: 67px; height: 62px;}
    .gall_row .col-gn-4 {width: 100%;}
    #subConents {padding: 0 20px;}
    #sv .sv-box {height: 250px;}

    
    .subTit h1 {font-size: 32px;}
    #subConents .sub-page .top-area h2 {font-size: 28px;}
    .tab__item {padding: 0.7rem 0.8rem;text-align: center;}
    #subConents .sub-page .top-area h2 {margin-bottom: 24px; font-size: 1.5rem;}
    .tab__item {font-size: 15px;}

    .glass-detail {line-height: 1.7; padding-left: 0;}

    .glass-detail li {font-size: 16px;}
    .glass-con img {height: 180px;}

    .item.greet-txt h3 { text-align: center; margin-top: 50px; margin-bottom: 40px;}

    .item.greet-txt p {font-size: 15px;}

    .tab {gap: 8px;}

    .item.greet-txt h3 {font-size: 20px;}
    
    .main-tit p {text-indent: 0;}
    .main-tit p::before {left: -20px;}

    section.sec-02 {height: 690px; padding-top: 2rem;}

    .tabs {margin-bottom: 20px;}
    .tabs ul {display: flex; flex-direction: column;}

    .outline-dl {font-size: 16px;margin-bottom: 70px;padding: 40px 30px;}
    .outline-txt h3 {font-size: 20px;}
    .outline-txt p {font-size: 15px; line-height: 1.6;}
    .outline-img-area img {height: 224px;}

    .tab {margin-bottom: 30px;}

    .glass-con h3 {font-size: 20px;}

    #bo_v_title .bo_v_tit {font-size: 1.2em;}

    .tabs li.active {
        background: #fff;
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-bottom: 0;
    }

    .tabs li {border-left: 1px solid #ddd;}
    #bo_gall .gall_li {width: 100%;}
    
}


@media screen and (max-width:376px) {
}

@media screen and (max-width:320px) {
.sec-03 {height: 424px;}
.sec-03 .sub-tit {bottom: -22%;}


}