/* ============================================================
   NanumSquare 웹폰트 로드
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css');


/* ============================================================
   오른쪽 영역
   ============================================================ */

.wp-block-columns:has(.steel-kboard-marker){
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:0!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
}

.wp-block-columns:has(.steel-kboard-marker)
> .wp-block-column:first-child{
    margin-top:0!important;
    margin-bottom:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
    box-sizing:border-box!important;
}

.wp-block-columns:has(.steel-kboard-marker)
> .wp-block-column:last-child{
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
}


/* ============================================================
   제목 영역 - PC
   왼쪽으로 총 100px 이동
   위로 20px 이동
   ============================================================ */

.steel-page{
    position:relative;

    width:calc(80% + 100px);
    height:auto;

    margin:0 10% 80px;
    margin-left:calc(10% - 100px);

    padding-top:60px;

    overflow:hidden;
    background:#fff;
    box-sizing:border-box;
}

.page_title{
    display:block;
    width:100%;
    margin:0;

    padding:0 20px 0 50px;

    line-height:50px;

    border-bottom:1px solid #e79090;

    color:#222;
    background:#fff;

    box-sizing:border-box;
}

.page_title a{
    display:flex;
    align-items:baseline;
    width:100%;

    color:#222!important;
    text-decoration:none!important;
}


/* ============================================================
   PC 한글 제목
   NanumSquare / 36px / 400 / 흑색
   ============================================================ */

.page_title .steel-title-ko{
    display:inline-block;

    font-family:"NanumSquare", sans-serif;
    font-size:36px;
    font-weight:400;
    line-height:25px;

    color:#000!important;
}


/* ============================================================
   PC 영어 제목
   ============================================================ */

.page_title .steel-title-en{
    display:inline-block;

    margin-left:30px;

    font-size:2em;
    font-weight:normal;
    line-height:50px;

    color:#ccc!important;
}


/* ============================================================
   설명문
   ============================================================ */

.page_title_2{
    display:block;

    width:100%;
    margin:0;

    padding:0 20px 0 50px;

    line-height:45px;
    font-size:1.2em;

    color:#444;
    font-weight:100;

    text-align:left;

    box-sizing:border-box;
}


/* ============================================================
   KBoard
   ============================================================ */

.wp-block-columns:has(.steel-kboard-marker)
> .wp-block-column:last-child
.wp-block-shortcode{
    width:100%!important;
    max-width:none!important;

    margin:0!important;
    padding:0!important;

    box-sizing:border-box!important;
}

.wp-block-columns:has(.steel-kboard-marker)
> .wp-block-column:last-child
.kboard-wrapper,

.wp-block-columns:has(.steel-kboard-marker)
> .wp-block-column:last-child
[id^="kboard-"]{
    width:100%!important;
    max-width:none!important;

    margin:0!important;

    padding:0 10% 10%!important;

    box-sizing:border-box!important;
}

.steel-kboard-marker{
    display:none!important;
}


/* ============================================================
   모바일
   기존 상태 그대로 유지
   ============================================================ */

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

    .steel-page{
        width:calc(100% - 20px)!important;
        max-width:none!important;

        margin:0 10px 30px!important;

        padding-top:30px!important;

        overflow:hidden!important;
        background:#fff;

        box-sizing:border-box!important;
    }

    .page_title{
        display:block!important;

        width:100%!important;

        margin:0!important;

        padding:0 5px 1px!important;

        line-height:1.3!important;
        font-size:18px!important;

        border-bottom:1px solid #e79090!important;

        color:#000!important;

        white-space:normal!important;
        word-break:keep-all!important;
        overflow-wrap:break-word!important;

        box-sizing:border-box!important;
    }

    .page_title a{
        display:flex!important;

        flex-direction:column!important;
        align-items:flex-start!important;

        width:100%!important;

        color:#000!important;
        text-decoration:none!important;

        white-space:normal!important;
    }

    .page_title .steel-title-en{
        display:block!important;

        order:1!important;

        margin:0 0 3px 83px!important;
        padding:0!important;

        color:#eaeaea!important;

        font-size:22px!important;
        font-weight:500!important;
        line-height:1.2!important;

        white-space:nowrap!important;
    }

    .page_title .steel-title-ko{
        display:block!important;

        order:2!important;

        margin:0 0 0 15px!important;
        padding:0!important;

        color:#000!important;

        font-size:18px!important;
        font-weight:900!important;
        line-height:1.05!important;

        letter-spacing:-0.3px!important;
    }

    .page_title_2{
        display:block!important;

        width:90%!important;
        margin:0 auto!important;

        padding:10px 0 0!important;

        line-height:1.55!important;
        font-size:12px!important;

        color:#444;
        font-weight:100;

        text-align:left!important;

        white-space:normal!important;
        word-break:keep-all!important;
        overflow-wrap:break-word!important;

        box-sizing:border-box!important;
    }

    .wp-block-columns:has(.steel-kboard-marker)
    > .wp-block-column:last-child
    .wp-block-shortcode{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;

        margin:0!important;
        padding:0!important;

        box-sizing:border-box!important;
        overflow:hidden!important;
    }

    .wp-block-columns:has(.steel-kboard-marker)
    > .wp-block-column:last-child
    .kboard-wrapper,

    .wp-block-columns:has(.steel-kboard-marker)
    > .wp-block-column:last-child
    [id^="kboard-"]{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;

        margin:0!important;

        padding:0 10px 30px!important;

        box-sizing:border-box!important;
    }

    .wp-block-columns:has(.steel-kboard-marker)
    > .wp-block-column:last-child
    .kboard-wrapper *{
        max-width:100%;
        box-sizing:border-box;
    }

    .wp-block-columns:has(.steel-kboard-marker)
    > .wp-block-column:last-child img{
        max-width:100%!important;
        height:auto!important;
    }
}


/* ============================================================
   작은 스마트폰
   ============================================================ */

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

    .page_title{
        font-size:17px!important;
        line-height:1.3!important;
        padding-bottom:1px!important;
    }

    .page_title .steel-title-en{
        font-size:22px!important;
        line-height:1.2!important;
        margin-left:80px!important;
        color:#eaeaea!important;
    }

    .page_title .steel-title-ko{
        font-size:17px!important;
        font-weight:900!important;
        line-height:1.05!important;
        margin-left:15px!important;
        color:#000!important;
    }

    .page_title_2{
        width:90%!important;
        margin:0 auto!important;
        padding-top:10px!important;
        font-size:11px!important;
        line-height:1.5!important;
        text-align:left!important;
    }
}

/* ============================================================
   GeneratePress 기본 여백 제거
   ============================================================ */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
}

.site,
.site-content,
.site-content .inside-site-content,
.site-content .entry-content,
.entry-content,
.container,
.site-content .container,
.site-main,
.inside-article {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.entry-header,
.entry-meta,
.post-navigation,
.comments-area {
    display: none !important;
}


/* ============================================================
   전체 페이지
   ============================================================ */

.steel-works-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;

    background: #ffffff;
    color: #333333;

    box-sizing: border-box;
}


/* ============================================================
   상단 이미지
   ============================================================ */

.steel-works-hero {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #111111;
}

.steel-works-hero img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;
}


/* ============================================================
   이미지 안 설명 글
   우측 정렬
   ============================================================ */

.steel-works-image-text {
    position: absolute;

    left: 6%;
    right: 6%;
    bottom: 5%;

    margin: 0;
    padding: 0;

    color: #ffffff;

    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;

    text-align: right;

    text-shadow:
        0 1px 2px rgba(0,0,0,0.9),
        0 2px 5px rgba(0,0,0,0.7);

    z-index: 2;
}


/* ============================================================
   본문

   이전 : 95px
   현재 : 125px

   전체 본문을 추가로 30px 아래 이동
   ============================================================ */

.steel-works-content {
    width: 69%;
    max-width: 960px;

    margin: 0 auto;

    padding: 125px 0 100px 0;

    box-sizing: border-box;
}


/* ============================================================
   본문 제목
   ============================================================ */

.steel-works-title {
    margin: 0 0 42px 0;

    padding: 0 0 17px 0;

    font-size: 32px;
    line-height: 1.3;
    font-weight: 500;

    color: #222222;

    border-bottom: 1px solid #dddddd;
}


/* ============================================================
   업무 특징
   ============================================================ */

.steel-work-section {
    margin: 0 0 75px 0;
    padding: 0;
}

.steel-work-heading {
    margin: 0 0 30px 0;
    padding: 0;

    font-size: 23px;
    line-height: 1.4;
    font-weight: 600;

    color: #333333;
}

.steel-work-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.steel-work-list li {
    position: relative;

    margin: 0;

    padding: 0 0 17px 22px;

    font-size: 16px;
    line-height: 1.9;
    font-weight: 400;

    color: #444444;

    word-break: keep-all;
}

.steel-work-list li::before {
    content: "•";

    position: absolute;

    left: 2px;
    top: 0;

    color: #777777;
}


/* ============================================================
   업무 내용
   ============================================================ */

.steel-work-detail {
    margin: 0;
    padding: 0;
}

.steel-work-item {
    display: flex;
    align-items: flex-start;

    width: 100%;

    margin: 0;
    padding: 24px 0;

    border-bottom: 1px solid #eeeeee;

    box-sizing: border-box;
}

.steel-work-number {
    flex: 0 0 70px;

    width: 70px;

    font-size: 22px;
    line-height: 1.6;
    font-weight: 500;

    color: #999999;
}

.steel-work-description {
    flex: 1;

    min-width: 0;
}

.steel-work-main {
    margin: 0 0 10px 0;

    font-size: 18px;
    line-height: 1.7;
    font-weight: 600;

    color: #333333;
}

.steel-work-sub {
    margin: 4px 0;
    padding: 0;

    font-size: 16px;
    line-height: 1.8;

    color: #555555;
}


/* ============================================================
   대표 문구

   현재 위치에서 20px 위로 이동
   ============================================================ */

.steel-work-signature {
    position: relative;

    top: -20px;

    margin: 70px 0 0 0;
    padding: 30px 0 0 0;

    text-align: right;

    font-size: 15px;
    line-height: 1.8;

    color: #555555;
}


/* ============================================================
   모바일
   ============================================================ */

@media (max-width: 768px) {

    .steel-works-hero {
        width: 100%;
    }

    .steel-works-hero img {
        width: 100%;

        min-height: 300px;

        object-fit: cover;
        object-position: center;
    }

    .steel-works-image-text {
        left: 5%;
        right: 5%;
        bottom: 5%;

        font-size: 13px;
        line-height: 1.5;

        text-align: right;
    }


    /* ========================================================
       모바일 본문

       이전 : 75px
       현재 : 105px

       추가 30px 아래 이동
       ======================================================== */

    .steel-works-content {
        width: 88%;
        max-width: none;

        padding: 105px 0 70px 0;
    }

    .steel-works-title {
        margin-bottom: 32px;

        padding-bottom: 13px;

        font-size: 25px;
    }

    .steel-work-section {
        margin-bottom: 55px;
    }

    .steel-work-heading {
        margin-bottom: 23px;

        font-size: 20px;
    }

    .steel-work-list li {
        padding-left: 18px;
        padding-bottom: 15px;

        font-size: 14px;
        line-height: 1.85;
    }

    .steel-work-item {
        padding: 20px 0;
    }

    .steel-work-number {
        flex: 0 0 45px;

        width: 45px;

        font-size: 18px;
    }

    .steel-work-main {
        font-size: 16px;
    }

    .steel-work-sub {
        font-size: 14px;
    }


    /* 대표 문구 20px 위 */

    .steel-work-signature {
        position: relative;

        top: -20px;

        margin-top: 50px;

        font-size: 14px;
    }

}


/* ============================================================
   작은 모바일
   ============================================================ */

@media (max-width: 480px) {

    .steel-works-hero img {
        min-height: 260px;
    }

    .steel-works-content {
        width: 90%;
    }

    .steel-works-image-text {
        left: 5%;
        right: 5%;
        bottom: 4%;

        font-size: 12px;

        text-align: right;
    }

}