/* 공통 Header, 공통 Footer */
img {
    width: 100%;
}
body { 
    font:15px/1.3 'PTSerif-regular';
    letter-spacing: -0.05px;
    background-color: #fff;
    word-break: keep-all;
}
@media screen and  (max-width: 767px) {
    body{ font-size:0.5em; }
}
/* 공통 HEADER */
.page-header {
    width: 100%;
    /* background: url("resources/images/common/bg_white.png");
    background-size: cover;
    backdrop-filter: brightness(10); */
}

.base-wrap {
    width: calc(100% - 30px);
    max-width: 1200px;
    margin: 0 auto;
}

.__flex {
    display: flex;
}

.col {
    flex-direction: column;
}

/* 네비게이션 =======================*/
.page-header .nav_flex { 
    display: flex;
    gap: 50px;
    height: 100px;
   
}

.page-header .gnb {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 100%;
}

.page-header .gnb .depth1_wrap {
    display: flex;
    gap: 20px;
    height: 100%;
}

.page-header .gnb .item {
    width: calc(100% / 4);
    height: 100%;
    text-align: center;
    border-bottom: 5px solid transparent;
    font-size: 1.2em;
}
.page-header .gnb .item:hover{
    border-bottom: 5px solid #050047;
}

.page-header .gnb li a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.depth1_wrap .item > a {
    margin-bottom: 4px;
}

.item .item_list {
    display: none;
    width: 100%;
    height: 4em;
}

.depth2_wrap {
    flex-direction: column;
    background:rgb(0 0 0 / 50%);
    color:#fff;
    font-size: 0.833em;
}

.item:hover .item_list {
   display: inline-block;
}

.item .item_list:hover {
    background:rgba(0, 1, 73, 0.5);
}


/* // 네비게이션 =======================*/
/* 로고*/

.h1_logo {
    display: flex;
    align-items: center;
    width: 22.5em;
}

.h1_logo img{
    width: 100%;
}

 /* visual_bar_header */
.page_header {  
    width: 100%;
    height: 20vh;
    color: #fff;
    padding: 50px;
    background: url('resources/images/index/Visual_D.jpg') no-repeat center/cover;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.page_header .base-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.page_header h2 {
    font-size: 2em;
}



@media screen and  (max-width: 767px) {
    .h1_logo{
        width: 180px;
        padding-top:10px;
    }
    #header{
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    #header .gnb {
        width:100vw;
        background: #eee;
        
    }
    #header .gnb ul {
        
        gap: 10px;
    }
    .page-header .gnb .item {
        height: 4em;
        border-bottom: none;
    }
} 

/* Footer */
.footer {
    padding: 50px 0;
    color:#fff;
    background: #353535;
}

.footer .base-wrap{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer .__flex{
    display: flex;
}

.footer .txt-wrap {
    display: flex;
}

.footer .txt {
    gap:10px;
}

.footer .title {
    width: 7.5em;
    display: inline-block;
    font-weight: 500;
    font-size: 1.3em;
}

.footer .sm-txt .by{
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-left: 5px;
    border-radius: 2200px;
}

.footer .sm-txt .by:hover {
    background: #fff;
    color:#353535;
    transition: all 0.3s;
}

.red {
    color: red;
    margin-right: 5px;
}

.icon-wrap img {
    width: 100%;
}

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

        .footer .title  {
        font-size:1em;
    }
}


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

    .footer .txt-wrap {
    display: flex;
    flex-direction: column;
}
    .footer .txt {
    gap: 10px;
    flex-direction: column;
}



.footer .txt .none {
    display: none;
}
}



@media screen and  (max-width: 767px) {
    .footer{ padding:50px 0; }
}