/*******************************************************
 * sub 페이지 narrow
 */
.main > .sub-header ~ * {
    margin: 0 15px;
}

/*--------------------------------------
 * 공통 헤더
 */
 .sub-header {
    padding: 10px 0;
}
.sub-header > h2 {
    font-size: 1.5rem;
}

/*--------------------------------------
 * 공통 메뉴 탭
 */
.sub-tab {
    margin-top: -10px !important;
    font-size: 0.9rem;
    grid: "about vision merit"
            "media media location" / 1fr 1fr 1fr;
}
.sub-tab > li {
    height: 40px;
    line-height: 40px;
}
.sub-tab > li:nth-of-type(1) {
    grid-area: about;
    border-right: 1px solid #CCC
}
.sub-tab > li:nth-of-type(2) {
    grid-area: vision;
    border-right: 1px solid #CCC
}
.sub-tab > li:nth-of-type(3) {
    grid-area: merit;
}
.sub-tab > li:nth-of-type(4) {
    grid-area: media;
    border-top: 1px solid #CCC;
    border-right: 1px solid #CCC
}
.sub-tab > li:nth-of-type(5) {
    grid-area: location;
    border-top: 1px solid #CCC;
}
.sub-tab > li > a:link,
.sub-tab > li > a:visited {
    font-family: NanumSquareB;
}

@media screen and (max-width: 340px) {
    .sub-tab {
        font-size: 0.8rem;
    }
    .sub-tab > li:nth-of-type(1) {
        word-break: keep-all;
    }
}
@media screen and (max-width: 277px) {
    .sub-tab > li:nth-of-type(1) {
        line-height: 20px;
    }
}
@media screen and (max-width: 208px) {
    .sub-tab > li:nth-of-type(4) {
        word-break: keep-all;
        line-height: 20px;
    }
}

/*--------------------------------------
 * 공통 타이틀
 */
.sub-title > h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}
.sub-title > ul {
    padding-left: 20px;
    font-size: 0.8rem;
}
.sub-title > ul > li:first-of-type::before {
    top: 0;
}

/*--------------------------------------
 * 공통 콘텐츠
 */
.sub-content > h4 {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 15px;
}
.sub-content > ul {
    margin-bottom: 25px;
    font-size: 1rem;
    line-height: 1.8rem;
}

/*--------------------------------------
 * 청년피자 이야기
 */
.about-content > div {
    margin: 15px 0;
}
@media screen and (max-width: 660px) {
    .about-content > div:nth-of-type(1) {
        margin: 15px -15px;
    }
    .about-content > div:nth-of-type(2) > img {
        margin-right: 15px;
    }
}

/*--------------------------------------
 * 비전
 */
.vision-content > div {
    margin: 15px 0;
}
.vision-content > h5 {
    font-size: 1.2rem;
    line-height: 1.5rem;
}
@media screen and (max-width: 660px) {
    .vision-content > div {
        margin: 15px -15px;
    }
}

/*--------------------------------------
 * 정성
 */
.merit-content > div {
    margin: 15px 0;
}
.merit-content div {
    margin-bottom: 40px;
}
.merit-content div > div {
    margin: 0;
}
.merit-content ul {
    line-height: 1.8rem;
}
.merit-content ul > li:first-of-type {
    font-size: 1.6rem;
    padding-bottom: 15px;
}
@media screen and (max-width: 660px) {
    .merit-content div {
        grid: auto / 1fr;
        margin: 0 -15px;
    }
    .merit-content > div:nth-of-type(1) {
        margin-top: 15px;
    }
    .merit-content > div:nth-of-type(2) {
        grid: "img" 
                "text" / 1fr;
    }
    .merit-content > div:nth-of-type(2) > ul {
        grid-area: text;
    }
    .merit-content > div:nth-of-type(2) > div {
        grid-area: img;
    }
    .merit-content > div:nth-of-type(3) {
        margin-bottom: 40px;
    }
    .merit-content ul {
        margin: 30px 10px;
    }
}

/*--------------------------------------
 * 사회와 함께하는 발걸음
 */
.board {
    margin: 20px 0;
}
.news {
    padding: 20px;
}
.news-img {
    margin-right: 20px;
}
.news-title {
    font-size: 1.4rem;
}
@media screen and (max-width: 660px) {
    .media-content > div {
        margin: 15px 0;
    }
    .search > select {
        font-family: NanumSquareR;
        font-size: 0.9rem;
        padding: 5px 10px;
    }
    .search > input {
        padding: 6px 10px;
        font-family: NanumSquareR;
        font-size: 0.9rem;
    }
    .search > button {
        font-family: NanumSquareR;
        font-size: 0.9rem;
        padding: 7px 15px;
    }
    .news {
        grid: "img"
                "content";
    }
    .news-img {
        margin-right: 0;
        margin-bottom: 20px;
    }
    .news-img > img {
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
    .news-content > button {
        float: none;
        display: block;
        margin: 0 auto;
    }
}
@media screen and (max-width: 450px) {
    .board {
        display: block;
    }
    .board > div:nth-of-type(1) {
        display: none;
    }
    .search {
        text-align: center;
        display: grid;
        grid: "select input button" / 75px auto 50px;
        gap: 3px;
    }
    .search > select {
        grid-area: select;
        padding: 5px;
    }
    .search > input {
        grid-area: input;
        padding: 6px;
        width: 100%;
    }
    .search > button {
        grid-area: button;
        padding: 7px 0;
    }
    .news:last-of-type {
        margin-bottom: 60px;
    }
    .news-title {
        font-size: 1.2rem;
    }
    .news-date {
        font-size: 0.8rem;
    }
    .news-summary {
        font-size: 0.9rem;
        line-height: 1.3rem;
    }
    .news-content > button {
        padding: 8px 10px;
    }
    .news-content > button > a:link,
    .news-content > button > a:visited {
        font-size: 0.8rem;
    }
}

/*--------------------------------------
 * 오시는 길
 */
.map {
    margin-top: 20px;
}
.map > iframe {
    height: 450px;
}

/* 공통 */
.info {
    display: block;
    height: auto;
    margin-bottom: 40px;
}
.info > div {
    text-align: left;
}

/* 주소 */
.adress {
    height: 100px;
    padding: 20px;
}
.adress > ul::before {
    top: calc(50% - 24px);
    width: 48px;
    height: 48px;
}
.adress > ul > li > br {
    display: none;
}
.tel {
    height: 100px;
    padding: 20px;
}
.tel > ul::before {
    top: calc(50% - 24px);
    width: 48px;
    height: 48px;
}
.tel > ul > li:nth-of-type(2) {
    font-family: NanumSquareB;
    font-size: 1.6rem;
}

@media screen and (max-width: 660px) {
    .map > iframe {
        height: 250px;
    }
    .info > div > ul {
        padding-left: 50px;
    }
    .info > div > ul > li:first-of-type {
        font-size: 0.8rem;
    }
    .adress > ul::before {
        top: calc(50% - 18px);
        width: 36px;
        height: 36px;
    }
    .adress > ul > li:nth-of-type(2) {
        font-size: 1rem;
    }
    .tel > ul::before {
        top: calc(50% - 18px);
        width: 36px;
        height: 36px;
    }
    .tel > ul > li:nth-of-type(2) {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 500px) {
    .info > div > ul {
        line-height: 1.5rem;
    }
    .adress {
        height: auto;
    }
    .tel {
        height: auto;
    }
}