/*
 * 기존 layout/sub_top.php 안 <style> — 서브 페이지 상단.
 * 기존에는 <body> 안(분야 CSS 보다 뒤)에 있었다. 분야 CSS(vision.css 등)에 .sub_top 규칙이 있어
 * 순서가 바뀌면 상단 높이가 달라진다 → SubPage 에서 분야 CSS 다음에 읽는다.
 */
.sub_top{
    padding: 430px 0 40px;
}
.sub_top .inner{
    width: 90%; max-width: 1720px; margin: 0 auto;padding: 0;
}
.sub_top_tit{border-bottom: 1px solid #fff; margin-bottom: 30px;
}
.sub_top_tit1{
    color: var(--grayscale-00-white, #FFF);
    font-family: Pretendard;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 35.2px */
    letter-spacing: -0.44px;
}
.sub_top_tit2{
    color: #FFF;
    font-family: "Noto Serif KR";
    font-size: 90px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -5.4px;
}
.sub_top_remote{
    display: flex; 
    align-items: center; 
    padding: 12px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.15);
    box-sizing: border-box;
    width: fit-content;
}
.sub_tab{
    color: #FFF;
    text-align: center;
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 28px */
    padding: 14px 2.6vw;
    box-sizing: border-box;
}
.sub_tab.on{
    border-radius: 9999px;
    background: #1C5C6B;
}
@media screen and (max-width: 1024px) {
    .sub_top_tit2{font-size: 80px;}
}
@media screen and (max-width: 768px) {
    .sub_top_remote.pc_block{
        display: none;
    }
    .sub_top{
        padding: 290px 0 30px;
    }
    .sub_top_tit{
        margin-bottom: 20px;
    }
    .sub_top_tit1{
        font-size: 15px;
        letter-spacing: -0.3px;
        margin-bottom: 6px;
    }
    .sub_top_tit2{
        font-size: 34px;letter-spacing: -2.04px;
    }
    .sub_top .selectBox {
        padding: 8px; border-radius: 999px;
        background: rgba(255, 255, 255, 0.10);
        width: 100%; 
        max-width: 400px;  
        box-sizing: border-box;
    }
    .sub_top .selectBox .label{
        border-radius: 999px;
        /* background:#1C5C6B; */
        padding: 6px 20px;
        width: 100%;
        text-align: center;
        color: var(--grayscale-00-white, #FFF);
        text-align: center;
        font-family: Pretendard;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 140%; /* 16.8px */
        background:  url('/new/img/sub/arrow_drop_down.svg') no-repeat right 20px center, #1C5C6B;
        }
    .selectBox .optionList{
        width: calc(100% - 16px);
        top: 100%; 
        background: #247e93; 
        left: 8px;
        }
    .selectBox .optionList ul{
        padding: 6px;
        font-size: 12px;
        font-family: Pretendard;
        font-size: 12px;
        font-style: normal;
        text-align: center;
        font-weight: 400;
        color: #fff;
        line-height: 140%; 
    }
    .selectBox .optionList ul li:not(:last-child){
        margin-bottom: 6px;
    }
    .selectBox .optionList ul li a{display: block; width: 100%;padding: 5px 0;}
}