@charset "utf-8";

/* layout */
header {
    & .wrap {
        & .h-center {
            & .gnb {
                & > ul {align-items: center;
                    & > li {
                        > a {font-size: 18px; line-height: 3;}
                        > .depth2 {top: 100%;
                            > a {line-height: 1.2; padding: 10px;}
                        }
                    }
                }
            }
        }
    }
}

.nav {
    & .pc {
        & .wrap {
            & .list {
                & > ul {
                    > li {
                        > a {width: 250px; font-size: 18px;}
                        > .depth2 {width: calc(100% - 250px); flex-wrap: wrap; gap: 10px 30px;
                            > a {font-size: 16px; padding: 0;}
                        }
                    }
                }
            }
        }
    }
    & .mb {
        & .list {
            & > ul {
                & > li {
                    & .depth2 {
                        & a {line-height: 2;}
                    }
                }
            }
        }
    }
}

.sub-visual {
    &.sv282 {
        & .depth {
            & .pc {
                & .wrap {
                    & a {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: auto;
                        padding: 10px 8px;
                        font-size: 15px;
                        line-height: 1.3;
                    }
                }
            }
            & .mb {
                & .con {
                    & .list {
                        & a {line-height: 1.4; padding: 14px 15px;}
                    }
                }
            }
        }
    }
    @media (width <= 1680px) {

    }
}
.sub-title {
    .inner .tit span{display: none}
    @media (width <= 1280px) {
        .inner .depth{display: none}
    }
}

/* main */
.main-container {
    & .visual {
        & .visual-txt {
            & p {
                & br {display: block;}
            }
        }
        @media (width <= 460px) {
            & .visual-txt {
                & p {font-size: 14px;}
            }
        }
    }
    & .vision {
        @media (width <= 640px) {
            & .vision-txt {
                & .desc {padding: 0 20px;
                    & span {font-size: 16px;
                        & br {display: none;}
                    }
                }
            }
        }
    }
    & .motto {
        & .wrap {
            & .right {
                > ul {
                    > li {
                        & .overlay {
                            & h2 {font-size: 36px; margin: 0 0 30px;}
                            & span {font-size: 16px;}
                        }
                    }
                }
            }
        }
        @media (width <= 640px) {
            & .wrap {
                & .right {
                    > ul {
                        > li {
                            & .overlay {
                                & h2 {font-size: 20px;}
                                & span {font-size: 14px;}
                            }
                        }
                    }
                }
            }
        }
    }
    & .product {
        & .list {
            > ul {
                > li {
                    & .name {padding: 40px 20px;
                        & p {font-size: 20px;}
                    }
                }
            }
        }
        @media (width <= 640px) {
            & .list {
                > ul {
                    > li {
                        & .name {padding: 20px;
                            & p {font-size: 16px;}
                        }
                    }
                }
            }
        }
    }
    & .facility {
        @media (width <= 460px) {
            & .tit {
                & span {
                    & br {display: none;}
                }
            }
        }
    }
}

/* sub */
.sub-container {
    & .company {
        & .company-intro {
            padding: 100px 0 670px;
            & .txt {
                & span {font-size: 18px; line-height: 1.6;}
            }
        }
        @media (width <= 860px) {
            & .company-intro {
                padding: 0 0 450px;
                & .txt {
                    & span {font-size: 14px;}
                }
            }
        }
        @media (width <= 640px) {
            & .company-intro {
                padding: 0 0 250px;
            }
        }
    }
    & .history {
        & .history-con {
            & .con {
                & .list {
                    > ul {
                        > li {
                            & .desc {
                                & p {
                                    & span {width: 130px;}
                                    & em {width: calc(100% - 130px);}
                                }
                            }
                        }
                    }
                }
            }
        }
        @media (width <= 640px) {
            & .history-con {
                & .con {
                    & .list {
                        > ul {
                            > li {
                                & .desc {
                                    & p {
                                        & span {width: 100%;}
                                        & em {width: 100%;}
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    & .product {
        & .product-list {
            & > ul {
                & > li {align-items: unset;
                    & .txt {padding: 60px;
                        & p {font-size: 30px; flex-wrap: wrap; gap: 10px;}
                        & span {font-size: 16px;}
                    }
                }
            }
        }
        & .product-tab {
            & > ul {
                & > li {
                    & button {height: unset; padding: 10px;
                    }
                }
            }
        }
        & .product-con {
            & .con {
                & .desc {
                    & .txt {
                        & p {line-height: 1.4;}
                    }
                }
            }
        }
        & .product-detail {
            & .info {
                & .txt {
                    & .desc {
                        > ul {
                            > li {width: 50%;
                                &:nth-child(3n) {border-right: 1px solid #eee; padding-right: 30px;}
                                &:nth-child(3n + 1) {padding-left: 30px;}
                                &:nth-child(odd) {padding-left: 0;}
                                &:nth-child(even) {border-right: 0; padding-right: 0;}
                            }
                        }
                    }
                }
            }
        }
        @media (width <= 1280px) {
            & .product-list {
                & > ul {
                    & > li {
                        & .txt {
                            & p {font-size: 24px;}
                        }
                    }
                }
            }
            & .product-tab {display: none;}
            & .product-detail {
                & .info {
                    & .txt {
                        & .desc {
                            > ul {
                                > li {
                                    &:nth-child(3n) {padding-right: 0}
                                    &:nth-child(even){padding-left: 20px;}
                                    &:nth-child(odd) {padding-right: 20px}
                                }
                            }
                        }
                    }
                }
            }
        }
        @media (width <= 860px) {
            & .product-list {
                & > ul {
                    & > li {
                        & .txt {padding: 30px;
                            & p {font-size: 18px;}
                            & span {font-size: 14px;}
                        }
                    }
                }
            }
            & .product-detail {
                & .info {
                    & .txt {
                        & .desc {
                            > ul {
                                > li {width: 100%; border: 0;
                                    &:nth-child(3n) {border-right: 0; padding-right: 0;}
                                    &:nth-child(3n + 1) {padding-right: 0}
                                    &:nth-child(odd) {padding-right: 0}
                                    &:nth-child(even) {padding-left: 0}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    & .special {
        & .special-box {
            & .info {
                & table {
                    & tr {
                        & td {
                            & p {word-break: keep-all;}
                        }
                    }
                }
            }
        }
    }
    & .dia {
        & .dia-box {
            & .point {
                & > ul {
                    & > li {
                        & p {line-height: 1.2;}
                    }
                }
            }
            & .list {
                & > ul {
                    & > li {
                        & p {font-size: 18px; padding: 0 20px;}
                    }
                }
            }
        }
        @media (width <= 860px) {
            & .dia-box {
                & .list {
                    & > ul {
                        & > li {
                            & p {font-size: 14px;}
                        }
                    }
                }
            }
        }
    }
    & .mat {
        & .mat-box {
            & .tit {
                & p {
                    &::before {top: 12px; transform: none;}
                }
            }
            & .list {
                & > ul {
                    & > li {
                        & .cate {
                            & p {font-size: 16px; line-height: 1.2;}
                        }
                    }
                }
            }
        }
        @media (width <= 640px) {
            & .mat-box {
                & .tit {
                    & p {
                        &::before {top: 8px;}
                    }
                }
            }
        }
    }
    & .rubber {
        & .rubber-box {
            & .tit {
                & p {
                    &::before {top: 12px; transform: none;}
                }
            }
        }
        @media (width <= 640px) {
            & .rubber-box {
                & .tit {
                    & p {
                        &::before {top: 8px;}
                    }
                }
            }
        }
    }
    & .connect {
        & .connect-box {
            & .tit {
                & p {
                    &::before {top: 12px; transform: none;}
                }
            }
            & .con {
                & .list {
                    & > ul {
                        & > li {
                            & span {flex-wrap: wrap; gap: 5px;
                                & strong {width: 100%;}
                                & em {width: 100%;}
                            }
                        }
                    }
                }
            }
        }
        @media (width <= 640px) {
            & .connect-box {
                & .tit {
                    & p {
                        &::before {top: 5px;}
                    }
                }
            }
        }
    }
    & .rnd {
        & .rnd-list {
            & > ul {
                & > li {
                    & .con {padding: 50px 30px;
                        & p {font-size: 20px;}
                        & span {font-size: 14px;}
                    }
                }
            }
        }
        & .rnd-intro {
            & .txt {
                & p {padding: 0 20px;}
            }
        }
    }
}


/*board*/
.sub-container {
    @media (width <= 860px) {
        .bo_top .search input[type="text"]{calc(100% - 90px)}
        .bo_top .search input[type="submit"]{width: 87px; padding: 0 10px;}
    }
}