/*guide*/
.fw700{
    font-weight:700;
}

/******************************
********** 배너 banner **********
******************************/
.sub_banner{
    padding-top:100px;
    height:400px;
    display:none;
}
.sb_1{
    background:url('/asset/img/gts/main_metapo03.png') no-repeat;
    background-position:50% 50%;
    background-size:cover;
}
.sb_2{
    background:url('/asset/img/gts/sub05_03.jpg') no-repeat;
    background-position:50% 50%;
    background-size:cover;
}
.sb_3{
    background:url('/asset/img/gts/main_metapo06.jpg') no-repeat;
    background-position:50% 50%;
    background-size:cover;
}
.sb_4{
    background:url('/asset/img/gts/main_metapo02.jpg') no-repeat;
    background-position:50% 70%;
    background-size:cover;
}
.sb_5{
    background:url('/asset/img/sub/sub_banner_05.jpg') no-repeat;
    background-position:50% 50%;
    background-size:cover;
}
.sb_6{
    background:url('/asset/img/sub/sub_banner_05.jpg') no-repeat;
    background-position:50% 50%;
    background-size:cover;
}
.sub_banner > .sb_top_text{
    width:100%;
    height:calc(100% - 60px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    font-weight:700;
    font-size:55px;
    color:#fff;
}

@media screen and (max-width:850px){
    .sub_banner{
        padding-top:60px;
        height:300px;
    }
    .sub_banner > .sb_top_text{
        height:calc(100% - 50px);
        font-size:45px;
    }
}

@media screen and (max-width:600px){
    .sub_banner{
        height:250px;
    }
    .sb_1 > .sb_top_text , .sb_4 > .sb_top_text{
        height:calc(100% - 80px);
        font-size:35px;
    }
    .sb_2 > .sb_top_text , .sb_3 > .sb_top_text , .sb_5 > .sb_top_text{
        height:calc(100% - 40px);
        font-size:35px;
    }
}

/******************************
******* 탭메뉴 tab menu  *******
******************************/

.sub_banner_tab{
    width:100%;
    background-color:rgba(0,0,0,0.7);
}
.sub_banner_tab > ul{
    width:fit-content;
    margin:0 auto;
}
.sub_banner_tab > ul::after{
    content:'';
    display:block;
    clear:both;
}
.sub_banner_tab > ul > li{
    float:left;
}
.sub_banner_tab > ul > li > a{
    padding:0 20px;
    height:60px;
    line-height:60px;
    color:#fff;
    font-weight:300;
}
.sub_banner_tab > ul > li.active > a{
    color:#ef7c1a;
    position:relative;
    font-weight:700;
}
.sub_banner_tab > ul > li.active > a::before{
    content:'';
    display:block;
    width:calc(100% - 40px);
    height:1px;
    background-color:#ef7c1a;
    position:absolute;
    left:20px;
    bottom:-3px;
}
@media screen and (max-width:850px){
    .sub_banner_tab > ul > li > a{
        padding:0 15px;
        height:50px;
        line-height:50px;
        font-size:16px;
    }
    .sub_banner_tab > ul > li.active > a::before{
        width:calc(100% - 30px);
        left:15px;
    }
}
@media screen and (max-width:600px){
    .sub_banner_tab > ul{
        width:100%;
    }
    /* 회사정보 / 연구기술 tab */
    .sb_1 .sub_banner_tab > ul > li , .sb_3 .sub_banner_tab > ul > li{
        width:calc(100% / 4);
    }
    .sb_1 .sub_banner_tab > ul > li.sub_tab_1_5 , .sb_1 .sub_banner_tab > ul > li.sub_tab_1_6 , .sb_1 .sub_banner_tab > ul > li.sub_tab_1_7{
        width:calc(100% / 3);
    }

    /* 제품정보 / 인사채용 tab */
    .sb_2 .sub_banner_tab > ul > li , .sb_5 .sub_banner_tab > ul > li{
        width:calc(100% / 2);
    }

    /* 투자정보 tab */
    .sb_4 .sub_banner_tab > ul > li{
        width:calc(100% / 3);
    }
    .sb_4 .sub_banner_tab > ul > li.sub_tab_4_4 , .sb_4 .sub_banner_tab > ul > li.sub_tab_4_5{
        width:calc(100% / 2);
    }
    .sub_banner_tab > ul > li > a{
        height:40px;
        line-height:40px;
        padding:0;
        width:100%;
        display:inline-block;
        text-align:center;
        font-size:14px;
    }
    .sub_banner_tab > ul > li.active > a{
        background-color:#ef7c1a;
        color:#fff;
    }
    .sub_banner_tab > ul > li.active > a::before{
        display:none;
    }
}
/******************************
*** 타이틀 레이아웃 title layout ***
******************************/
.title_layout > h5{
    display:inline-block;
    background-color:#313799;
    padding:5px 10px;
    font-size:14px;
    font-weight:500;
    color:#fff;
    border-radius:0 10px 0 10px;
}
.title_layout > h1{
    font-size:50px;
    font-weight:700;
    padding:20px 0;
    line-height: 120%;
}
.title_layout > p{
    line-height:1.5;
}
@media screen and (max-width:850px){
    .title_layout > h1{
        font-size:40px;
        padding:15px 0;
    }
}
@media screen and (max-width:600px){
    .title_layout > h5{
        font-size:12px;
    }
    .title_layout > h1{
        font-size:30px;
        padding:10px 0;
    }
    .title_layout > p{
        font-size:16px;
    }
}

/******************************
** 섹션 레이아웃 section layout **
******************************/
.sc_title{
    font-size:30px;
    line-height: 130%;
}
.sc_title > span.financial{
    font-weight:300;
    font-size:25px;
    padding-left:10px;
}
@media screen and (max-width:850px){
    .sc_title{
        font-size:25px;
    }
    .sc_title > span.financial{
        font-size:22px;
        padding-left:7px;
    }
}
@media screen and (max-width:600px){
    .sc_title{
        font-size:20px;
    }
    .sc_title > span.financial{
        font-size:18px;
        padding-left:5px;
    }
}

.left_layout::after{
    content:'';
    display:block;
    clear:both;
}
.left_layout > h2{
    width:400px;
    float:left;
}
.left_layout > div{
    width:calc(100% - 400px);
    float:left;
}

@media screen and (max-width:1200px){
    .left_layout > h2{
        width:350px;
    }
    .left_layout > div{
        width:calc(100% - 350px);
    }
}

@media screen and (max-width:1000px){
    .left_layout > h2{
        width:300px;
    }
    .left_layout > div{
        width:calc(100% - 300px);
    }
}
@media screen and (max-width:850px){
    .left_layout > h2{
        width:100%;
        float:none;
    }
    .left_layout > div{
        width:100%;
        float:none;
        padding-top:50px;
    }
}
@media screen and (max-width:600px){
    .left_layout > div{
        padding-top:30px;
    }
}

/******************************
*** 페이지네이션 page nation ***
******************************/
.btns_num > ul{
    width:fit-content;
    margin:0 auto;
}
.btns_num > ul::after{
    content:'';
    display:block;
    clear:both;
}
.btns_num > ul > li{
    float:left;
}
.btns_num > ul > li:not(:first-child){
    margin-left:3px;
}
.btns_num > ul > li > a{
    border:1px solid #d4d4d4;
    box-sizing:border-box;
    display:block;
    width:30px;
    height:30px;
    line-height:30px;
    text-align:center;
    color:#b8bbba;
}
.btns_num > ul > li > a.active{
    background-color:#d7d7d7;
    color:#666;
}
@media screen and (max-width:850px){
    .btns_num > ul > li > a{
        width:25px;
        height:25px;
        line-height:25px;
        font-size:16px;
    }
}

/******************************
*** 이전글 다음글 prev next ***
******************************/
.prev_next > ul > li:first-child{
    border-top:1px solid #dddddd;
}
.prev_next > ul > li{
    border-bottom:1px solid #dddddd;
}
.prev_next > ul > li > a{
    padding:15px;
    display:block;
}
.prev_next > ul > li > a > .left{
    display:inline-block;
    width:100px;
    font-weight:700;
}
.prev_next > ul > li > a > .right{
    width:calc(100% - 100px);
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prev_next > ul > li > a > span > svg{
    padding-right:5px;
}

@media screen and (max-width:850px){
    .prev_next > ul > li > a{
        padding:12px;
        font-size:16px;
    }
    .prev_next > ul > li > a > .left{
        width:80px;
    }
    .prev_next > ul > li > a > .right{
        width:calc(100% - 80px);
    }
}
@media screen and (max-width:600px){
    .prev_next > ul > li > a{
        padding:10px;
        font-size:14px;
    }
    .prev_next > ul > li > a > .left{
        width:70px;
    }
    .prev_next > ul > li > a > .right{
        width:calc(100% - 70px);
    }
}


/******************************
*** 글쓰기 버튼 write button ***
******************************/
.btn{
    text-align:right;
}
.btn > a , .btn > input , .btn > button{
    display:inline-block;
    width:150px;
    height:50px;
    line-height:50px;
    text-align:center;
    border-radius:3px;
    font-weight:500;
    font-size:20px;
    margin-left:5px;
    color:#fff;
}

.btn > .black{
    background-color:#1c1c1c;
}
.btn > .gray{
    background-color:#999999;
}
.btn > .blue{
    background-color:#313799;
}
@media screen and (max-width:850px){
    .btn > a , .btn > input, .btn > button{
        width:120px;
        height:45px;
        line-height:45px;
        font-size:18px;
    }
}
@media screen and (max-width:600px){
    .btn > a , .btn > input, .btn > button{
        width:100px;
        height:40px;
        line-height:40px;
        font-size:16px;
        margin-left:3px;
    }
}
@media screen and (max-width:450px){
    .btn > a , .btn > input, .btn > button{
        width:80px;
        height:30px;
        line-height:30px;
        font-size:14px;
        margin-left:2px;
    }
}