@media screen and (max-width: 1400px) {
    #sec05 .sec05Tt {
        padding: 140px 20px;
    }
}
@media screen and (max-width: 1200px) {
    header .gnb {
        gap: 25px;
    }
}
@media screen and (max-width: 997px) {
    h1 a {
        width: 140px;
        height: 30px;
    }
    nav {
        position: fixed;
        top: 50px;
        width: 100%;
        padding: 30px 20px;
        background: rgba(0, 0, 0, 0.8);
        right: -120%;
        height: calc(100vh - 50px);
        transition: 0.5s;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        overflow: auto;
    }
	header .wrap,
    header .flexSb {
        padding-left: 5px;
    }
    h1 a {
        margin-left: 0;
    }
    header.active h1 a {
        background-image: url("../img/main/logo.png");
    }
    header {
        height: 50px;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        background-color: rgba(0, 0, 0, 0.1);
    }
    header h1 img {
        height: 24px;
    }

    header.on nav {
        right: 0;
    }

    header.on #bar span:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

    header.on #bar span:nth-child(2) {
        opacity: 0;
    }

    header.on #bar span:nth-child(3) {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
    }

    header .gnb a {
        text-align: left;
    }
    header .gnb > li {
        width: 100%;
    }
    header .gnb > li > a {
        padding-bottom: 12px;
        display: block;
        padding-left: 15px;
        position: relative;
    }
    header .gnb > li.hasDepth02 > a:after {
        content: "";
        position: absolute;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #fff;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        transition: 0.5s;
        background: url("../img/main/arrow_down.svg") no-repeat center / contain;
    }
    header .gnb > li.on > a:after {
        transform: translateY(-50%) rotate(180deg);
    }
    .hasDepth03 {
        width: 100%;
    }
    .hasDepth03 > a {
        width: 100%;
        display: block;
        position: relative;
    }
    .hasDepth03 > a:after {
        content: "";
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        transition: 0.5s;
        background: url("../img/main/arrow_down.svg") no-repeat center / contain;
    }

    .hasDepth03.on > a:after {
        transform: translateY(-50%) rotate(180deg);
    }

    header .gnb {
        flex-direction: column;
        align-items: baseline;
        gap: 20px;
        height: auto;
    }
    header .snb {
        position: static;
        background:none;
        border-top: 1px solid rgba(255,255,255,0.2);
    }
    .header_title {
        display: none;
    }
    header .depth02 {
        background: rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        align-items: start;
        gap:12px;
        padding: 15px 0;
        width: 100%
    }
    header .depth02 > li {
        border-right: none
    }
    header .depth02 > li > a {
        display: block;
        padding: 0 0 0 15px;
        font-size:14px;
        font-weight: 600;
        color: #fff;
    }
    header li:hover > a {
        color: var(--mainColor);
    }
    header .depth02 > li:last-child {
        border-right: 0;
    }
    .depth03 {
        padding: 8px 0 0 30px;
        display: none;
    }
    .depth03 li + li {
        margin-top: 8px;
    }
    .depth03 li a {
        color: #ccc;
        font-size:12px;
        font-weight: 600;
    }

    header.on {
        background: #000;
    }

    .shop_btn {
        font-size: 12px;
        gap: 4px;
        border-radius: 23px;
        width: 80px;
        height: 28px;
    }
    .shop_icon {
        width: 12px;
        height: 10px;
    }
    .header_right {
        gap: 12px;
    }


    /* main */

    .section:not(#sec01) {
        height: auto;
        padding: 70px 0;
    }
    .tt h3 {
        font-size: 35px;
    }
    .tt p {
        font-size: 12px;
        margin-top: 15px;
    }

    .main_swiper .swiper-slide img {
        object-position: right center
    }
    .main_swiper .swiper-slide .txt {
        width: 100%;
        padding-bottom: 70px;
    }
    .main_swiper .swiper-slide .txt img {
        width: 50%;
        max-width: 380px;
    }
    .main_swiper .swiper-slide .txt p {
        font-size:14px
    }
    .main_swiper .swiper-slide .txt h2 {
        font-size:36px
    }
    .swiper-btm {
        top: calc(50% + 100px);
    }
    .swiper-btm .flex {
        gap:10px;
        width: 100%;
    }

    .swiper-btm .playBtn {
        width: 40px;
        height: 40px;
    }
    .scroll {
        bottom:30px;
        font-size: 14px;
    }
    .scroll span {
        width: 20px;
        height: 32px;
    }
    .scroll span:after {
        width: 3px;
        height: 3px;
        top: 6px;
    }

    @keyframes scrolling {
        0% {
            top: 6px;
        }
        100% {
            top: 18px;
        }
    }

    .tt span {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .tt h3 {
        font-size: 24px;
        white-space: inherit;
    }
    #sec02 {
        padding: 70px 0;
    }
    #sec02 .tt {
        margin-bottom: 35px;
    }
    #sec02 .con ul {
        flex-wrap: wrap;
        gap: 10px;
    }
    #sec02 .con ul li {
        flex: inherit;
        width: calc(100% / 2 - 5px);
        border-radius: 12px;
    }
    #sec02 .con ul li img {
        width: 100%;
    }
    #sec02 .con ul li a {
        padding: 30px 15px;
    }
    #sec02 .conTt span {
        font-size:14px;
    }
    #sec02 .conTt h4 {
        font-size:24px;
        margin-top: 8px;
    }
    #sec02 .con .btn {
        width: 40px;
        height: 40px;
    }
    #sec02 .con .btn span {
        font-size:12px;
    }
    #sec02 .con .btn:after {
        width: 12px;
        height: 6.5px;
    }


    #sec03 {
        padding: 70px 0;
    }
    #sec03 .con {
        padding:0 50px;
        position: relative;
    }
    .product_swiper {
        margin-top: 35px;
    }
    .product_swiper .swiper-slide a {
        padding: 12px;
        border-radius: 12px;
    }
    .product_swiper .txt {
        padding: 20px 0 40px;
        position:relative;
    }
    .product_swiper .txt h4 {
        font-size: 18px;
        margin-bottom: 6px;
    }
    .product_swiper .txt p {
        font-size:14px;
    }
    .product_swiper .txt button {
        gap: 6px;
        font-size:12px;
        border-radius: 27.5px;
        width: 70px;
        height: 27px;
    }
    .product_swiper .txt button img {
        width: 12px;
    }
    .product_swiper .swiper-slide:hover a {
        background: #fff;
        outline: 5px solid var(--mainColor);
    }
    .product_swiper .swiper-button-next, .product_swiper .swiper-button-prev {
        width: 30px;
        height: 30px;
    }
    .product_swiper .swiper-button-next img, .product_swiper .swiper-button-prev img {
        width: 12px;
    }


    #sec04 ul{
        padding: 70px 0;
        display: flex;
        gap:25px;
        flex-direction: column;
    }
    #sec04 ul li {
        flex: 1;
    }
    #sec04 ul li a {
        gap:12px;
        height: auto;
        border-radius: 12px;
        padding: 15px 30px;
    }
    #sec04 ul li:hover a {
        padding: 15px 30px;
    }
    #sec04 ul li img {
        height: 40px;
    }
    #sec04 ul li a h4 {
        font-size: 18px;
    }
    #sec04 ul li a span {
        font-size:14px;
    }
    #sec04 ul li a p {
        margin-top: 8px;
        font-size:12px;
    }



    #sec05 > .flex {
        flex-direction: column;
    }
    #sec05 .sec05Tt {
        padding: 70px 20px 35px
    }
    #sec05 .sec05Con {
        padding: 35px 20px 70px;
        border-radius: 30px;
    }
    #sec05 .tt span {
        margin-bottom: 4px;
    }
    #sec05 .tt h3 {
        font-size:32px;
    }
    #sec05 .sec05Tt ul {
        padding: 25px 0;
        margin-bottom: 20px;
    }
    #sec05 .sec05Tt ul li a{
        gap: 12px;
        font-size:24px;
        font-weight: 600;
    }
    #sec05 .sec05Tt ul li a img {
        width: 40px;
    }
    #sec05 .sec05Tt ul li + li {
        margin-top: 8px;
    }
    .csCenter h4 {
        font-size:14px;
        margin-bottom: 5px;
    }
    .csCenter p {
        font-size:12px;
    }
    #sec05 .sec05Con .inputBox input , #sec05 .sec05Con textarea {
        padding: 8px 0;
        font-size:14px;
    }
    #sec05 .sec05Con .flex > div {
        flex: 1;
        width: 100%
    }

    #sec05 .sec05Con .con {
        margin: 25px 0;
    }
    #sec05 .sec05Con .con .flex {
        gap:15px;
        flex-direction: column;
    }
    #sec05 .sec05Con .con .flex.emailInput {
        flex-direction: row;
    }
    #sec05 .sec05Con .con > div + div{
        padding-top: 15px;
    }
    .telInput {
        align-items: center;
    }
    #sec05 .sec05Con span {
        font-size:14px;
    }
    .consultingContent label {
        font-sizE:12px;
    }
    .consultingContent textarea {
        height: 60px;
    }
    .checkItem {
        gap:8px;
        font-sizE:14px;
    }
    #sec05 .sec05Con button {
        border-radius: 39.5px;
        gap: 15px;
        width: 180px;
        height: 50px;
        font-size:14px;
    }
    #sec05 .sec05Con button:hover {
        gap:15px
    }
   
    /* sub top */
    
    .subImg01 {
      height: 320px;
    }
    .subImg02 {
      height: 320px;
    }
    .subImg03 {
      height: 320px;
    }
    .subImg04 {
      height: 320px;
    }
    .subTop .wrap h2 {
        font-size: 36px;
        padding-top: 140px;
    }

    /*CEO인사말*/
            
    .ceo_tit {
      margin: 70px 0 25px;
    }
    .ceo_tit h4 {
        font-size: 20px;
        line-height: 28px;
    }
    .ceo_tit p {
        font-size: 50px;
        margin: 20px 0;
    }
    .ceo_tit em {
        font-size: 12px;
        padding: 10px 0 15px;
    }
    .ceo {
      margin-top: 10px;
    }
    .ceo_img {
      width: 30%;
    }
    .ceo_con {
      width: 100%;
      font-size: 12px;
      padding: 15px 0 0 0;
      line-height: 20px;
      margin-bottom: 70px;
    }
    .ceo_con span.tit {
      font-size: 17px;
    }
    .mission_wrap {
      padding: 70px 0;
    }
    .mission {
      flex-direction: column;
    }
    .mission_con {
      border-radius: 15px;
      width: 100%;
      margin-bottom: 40px;
      margin-right: 0;
    }
    .mission_con:nth-child(even) {
      width: 100%;
    }
    .mission_con img {
      padding: 0 0 10px 0;
      width: 39px;
    }
    .mission_con em {
      font-size: 15px;
      margin: 0 0 10px 0;
    }
    .mission_con p {
      line-height: 20px;
      font-size: 12px;
      line-height: 20px;
      white-space: normal;
    }
    .mission_con b {
      margin: 0 0 5px 0;
      font-size: 12px;
    }
    .mT8 {
      margin-top: 4px;
    }
    .mT5 {
      margin-top: 3px;
    }
    .mB20 {
      margin-bottom: 10px;
    }
    

    /* 연혁 */
    .history {
      margin: 70px 0;
    }
    /* 주요사업 */
    .busi_wrap01 {
      height: 150px;
      background-image: url(../img/busi_middle_img01.jpg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .busi_wrap02 {
      height: 150px;
      background-image: url(../img/busi_middle_img02.jpg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .busi_wrap03 {
      height: 150px;
      background-image: url(../img/busi_middle_img03.jpg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .busi_wrap04 {
      height: 150px;
      background-image: url(../img/busi_middle_img04.jpg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .mB120 {
      margin-bottom: 40px;
    }
    
    /* 오시는 길 */
    .map_con {
      width: 100%;
      margin-right: 0;
      margin-bottom: 30px;
      display: flex;
      justify-content: space-between;
      align-content: center;
    }
    .map_con .sImg {
      width: 40%;
    }
    .map_con .sTxt {
      width: 60%;
      margin-left: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .map_con h4 {
      margin: 0 0 20px 0;
      font-size: 18px;
    }
    .map_con p {
      font-size: 12px;
      line-height: 26px;
    }
    .map_con p .address {
      margin-right: 10px;
    }

    /* 제품소개 서브메뉴 */
    
    .navSub ul {
      padding: 25px 0 50px;
    }
    .navSub li a {
      font-size: 14px;
      margin-right: 30px;
    }
    .navSub li.active a::before {
      height: 3px;
    }
    
    /* 제품소개 */
    .pd_tit {
      margin: 20px 0 0 0;
    }
    .pd_tit em {
      font-size: 14px; 
      font-style: normal;
    }
    .pd_tit h3 {
      margin: 8px 0 30px;
      font-size: 22px; 
    }
    .product {
      height: 100%;
      margin: 0 0 60px 0;
      background:#fff;
    }
    .product01 {
      height: 100%;
      margin: 0 0 60px 0;
      background:#fff;
    }
    .product_wrap {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
    }
    .product_con {
      padding: 0;
      margin-right: 20px;
    }
    .product_con01 {
      padding: 0;
      margin-right: 20px;
    }
    .product_con .Img {
      padding: 0;
    }
    .product_con .Txt {
      font-size: 12px;
      border-radius: 50px;
      margin: 20px 0 30px;
      padding: 7px 18px;
    }
    .product_con01 .lTxt .Txt {
      font-size: 12px;
      border-radius: 50px;
      margin: 15px 6px 25px 6px;
      padding: 7px 18px;
    }
    .merit {
      margin: 50px 0;
    }
    .merit_wrap {
      flex-direction: column;
      padding: 0;
      margin: 0 auto;
    }
    .busi_wrap h4 {
      font-size: 15px;
      margin-bottom: 0;
    }
    .merit .left {
      width: 100%;
      font-size: 15px;
      margin-bottom: 5px;
      white-space: nowrap;
    }
    .merit .right {
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    .merit .right1 {
     width: 100%;
     display: flex;
     flex-direction: column;
    }
    .merit .right .rImg .lImg {
      width: 100%;
      border-radius: 10px;
      padding: 15px 15px 20px 15px;
      margin-right: 0;
    }
    .merit .right .sImg {
      background: #fff;
      width: 100%;
      border-radius: 20px;
      padding: 60px 25px;
    }
    .merit .right .sTit {
      font-size: 14px;
      margin: 24px 0 0 0;
    }
    .merit .right .rTxt {
      width: 100%;
      margin: 25px 0 25px;
    }
    .merit .right .rTxt h5 {
      font-size: 14px;
      margin: 0 0 20px 0;
    }
    .merit .right .rTxt em {
      font-size: 14px;
      background-size: 10px;
      background-position: left 0 top 5px;
      padding-left: 20px;
    }
    .merit .right .rTxt p {
      font-size: 12px;
      margin: 5px 0 25px;
      line-height: 20px;
    }
    .merit .right1 .rTxt p {
      font-size: 12px;
      margin: 5px 0 25px;
      line-height: 20px;
    }
    .merit .right .rTxt p.two {
      font-size: 12px;
      margin: 5px 0 7px;
      line-height: 20px;
    }
    .merit .right .rTxt .rsImg .bsImg {
      margin-right: 13px;
    }
    .merit .right .rTxt .rsImg .bsImg p {
      font-size: 12px;
    }
    .merit .right .rTxt .rsImg .bsImg img {
      border-radius: 10px;
    }
    .merit .right02 {
      width: 100%;
      margin-bottom: 20px;
    }
    .merit .right02 table {
      font-size: 12px;
    }
    .merit .right02 tr th {
      padding: 8px 0;
    }
    .merit .right02 tr td {
      padding: 12px;
    }
    .merit .right02 p {
      margin-top: 15px;
      font-size: 12px;
      line-height: 20px;
    }

    .merit .right03 {
      width: 100%;
      margin-bottom: 20px;
    }
    .merit .right03 table {
      font-size: 12px;
    }
    .merit .right03 tr th {
      padding: 8px 0;
    }
    .merit .right03 tr td {
      padding: 12px;
    }
    .merit .right03 p {
      margin-top: 15px;
      font-size: 12px;
      line-height: 20px;
    }
    .mB50 {
      margin: 25px 0 35px;
    }
    .mB60 {
  margin: 0 0 25px 0;
}
/* 모바일 게시판 좌우 여백 */
    #bo_list, #bo_v, #bo_w, #bo_gall,
    .bo_cate, #bo_cate {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }


    /* footer */

    .footerTop {
        height: auto;
        padding:15px 0;
        flex-direction: column;
        align-items: start;
    }
    footer .termList ul {
        gap:10px;
        margin-bottom: 10px;
    }
    footer .termList ul  li a {
        font-size:12px;
    }
    .footerRight a.footerTel {
        font-size:12px
    }
    .footerRight a.footerTel img {
        width: 12px;
    }
    .footerRight a.footerTel b {
        font-size: 18px;
        margin-left: 5px;
    }
    .footerRight  {
        gap: 18px
    }
    .footerBtm  {
        padding: 25px 0 30px;
        align-items: start;
        gap:20px;
        flex-direction: column;
    }
	.footerBtm h2 a img {
        width: 110px;
        height: auto;
    }
    .footerBtmRight p {
        margin-top: 8px;
    }

    /* ===== [서브] 신규 페이지 반응형 (PBB / Technology / Seaports / 연혁 / 오시는길) ===== */

    /* 제품/기술 탭 (pbbNav) */
    .pbbNav ul {
        width: 100%;
        padding: 30px 0 20px;
        gap: 10px;
    }
    .pbbNav li a {
        font-size: 15px;
        padding: 11px 16px;
    }
	.pbbNav li.active a,
    .pbbNav li.pbbTabBtn.active a {
        font-size: 18px;
        padding: 12px 16px;
        white-space: normal;      /* 긴 라벨 줄바꿈 허용 */
        top: 0;                   /* PC의 top:-15px 상쇄 */
    }

    /* PBB 상세 : 소개/특장점 좌우 → 상하 */
    .pbbIntro { padding: 50px 0; }
    .pbbIntro_inner { flex-direction: column; gap: 24px; }
    .pbbIntro_txt h5 { font-size: 22px; }
    .pbbFeature { padding: 40px 0 70px; }
    .pbbFeature_inner { flex-direction: column; gap: 24px; }

    /* Our Technology : 좌 텍스트 / 우 이미지 → 상하, 이미지 2개도 세로 */
    .techWrap { padding: 50px 0 70px; }
    .techRow { flex-direction: column; gap: 24px; }
    .techTxt h5 { font-size: 22px; }
    .techImgs { width: 100%; flex-direction: column; }

    /* Seaports : 좌우 → 상하 */
    .seaportWrap { padding: 40px 0 70px; }
    .seaportInner { flex-direction: column; gap: 24px; }
    .seaportImgs { width: 100%; }
    .seaportTxt { font-size: 18px; }

    /* 연혁 타임라인 : 지그재그 → 왼쪽 한줄 정렬 */
    .hs_tit { padding: 90px 0 40px; }
    .hs_tit h4 { font-size: 30px; }
    .hs_tit p { font-size: 28px; }
    .hs_banner { height: auto; }
    .hs_banner span { font-size: 48px; left: 20px; }
    .hs_timeline { padding: 70px 0 90px; }
    .hs_timeline::before { left: 8px; }
    .hs_year { width: 100%; padding-bottom: 50px; }
    .hs_year.hs_right,
    .hs_year.hs_left {
        margin: 0;
        padding-left: 40px;
        padding-right: 0;
        text-align: left;
    }
    .hs_year.hs_right::before,
    .hs_year.hs_left::before { left: 1px; right: auto; }
    .hs_year.hs_left .hs_list li { flex-direction: row; }
    .hs_yearNum { font-size: 34px; margin-bottom: 20px; }
    .hs_list li p { font-size: 16px; }

    /* 오시는 길 : 본사정보 좌우 → 상하 */
    .mapWrap { padding: 60px 0; }
    .mapBox { height: 300px; }
    .mapInfo { flex-direction: column; gap: 24px; margin-top: 40px; padding-top: 40px; }
    .mapInfoTit { font-size: 28px; }
    .mapLabel { font-size: 17px; }
    .mapList li p { font-size: 20px; }
}