@charset "utf-8";



*{margin: 0;padding: 0;}
body{font-family: 'Noto Sans KR', '맑은고딕', 'Malgun Gothic', sans-serif; color:#333;}
img{vertical-align: top;}
ul{list-style: none;}
h1,h2,h3,h4,h5,h6,p,ul{margin: 0;}
/* .row{margin: 0;} */
a{text-decoration: none;color: inherit;}
a:hover{text-decoration: none;color: inherit;}
button, button:active, button:focus{border:none; outline:none; background:transparent; cursor: pointer;}


.inner{
    max-width:940px;
    padding:0 20px;
    margin-left:auto;
    margin-right:auto;
}

/*header*/

header{
    position: fixed;
    top:0;
    width:100%;
    background:#fff;
    z-index:999;
}

header .tit-wrap{
    display: flex;
    align-items:center;
    justify-content:center;
    height:125px;
}

header h1{
    transform:translateY(-7px);
}

header .tit-wrap .vol{
    position: relative;
    margin-left:16px;
    padding-left:16px;
    /* line-height:1; */
}

header .tit-wrap .vol::after{
    position: absolute;
    top:50%;
    left:0;
    width:1px;
    height:39px;
    background:#e5e5e5;
    content:'';
    transform:translateY(-50%);
}

header .tit-wrap .vol li:nth-child(1){
    color:#555;
    font-size:18px;
    font-weight:700;
}

header .tit-wrap .vol li:nth-child(2){
    color:#919191;
    font-family: 'Lato', sans-serif;
    font-size:15px;
    line-height:1.4;
}

header .m_menu{
    display: none;
}

header nav{
    border-top:1px solid #dfdfdf;
    border-bottom:1px solid #dfdfdf;
}

header nav>ul{
    display: flex;
    align-items:center;
    justify-content:space-between;
    height:60px;
}

header nav>ul>li{
    font-size:16px;
    font-weight:500;
}

header nav>ul>li .sub-depth{
    display: none;
}

.contents{
    padding-top:187px
}


footer{
    background:#1a1b20;
}

footer>ul>li:first-of-type{
    display: flex;
    align-items:center;
    height:91px;
    border-bottom:1px solid #333438;
}

footer>ul>li:first-of-type h1{
    opacity: 0.6;
}

footer>ul>li:first-of-type>ul>li{
    margin-right:10px;
}

footer>ul>li:first-of-type>ul>li:last-of-type{
    margin-right:0;
}

footer>ul>li:first-of-type>ul>li>a{
    display: flex;
    align-items:center;
    justify-content:center;
    width:45px;
    height:45px;
    border-radius:100%;
    background:#131418;
}

footer>ul>li:last-child{
    height:100px;
}

footer>ul>li:last-child p{
   color:#999;
   font-size:13px;
   font-weight:700;
   letter-spacing:-0.02em;
   line-height:1.8;
}

footer>ul>li:last-child p span{
    font-weight:normal;
   font-family:Verdana, sans-serif;
   text-transform:uppercase;
}

footer>ul>li:last-child select{
    display: flex;
    align-items:center;
    width:153px;
    height:43px;
    padding:0 13px;
    color:#fff;
    border:1px solid #fff;
    background:url(../images/sel_arr.png) center right 13px no-repeat;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

footer>ul>li:last-child select option{
    color:#333;
}

.m-show,
.t-show{
    display: none;
}

.video-wrap {
    position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;
}

.video-wrap iframe,
.video-wrap object,
.video-wrap embed {
    position:absolute; top:0; left:0; width:100%; height:100%;
}

@media (max-width:767px) {
    
    header .tit-wrap{
        margin-left:-30px;
        padding:0 40px;
        height:106px;
        border-bottom:1px solid #dfdfdf;
    }

    header .m_menu{
        display: flex;
        flex-direction:column;
        justify-content: space-between;
        position: absolute;
        top:50%;
        right:20px;
        width:27px;
        height:23px;
        transform:translateY(-50%);
        z-index:9999;
    }

    header .m_menu span{
        width: 100%;
        height: 5px;
        background-color: #2d2a2a;
        display: block;
        transition: .3s
    }

    header .m_menu.active span{
        background:#fff;
    }

    header .m_menu.active span:nth-of-type(1){
        transform:translateY(9px) rotate(45deg);
    }

    header .m_menu.active span:nth-of-type(2){
        transform:translateX(100%);
        opacity:0;
    }

    header .m_menu.active span:nth-of-type(3){
        transform:translateY(-9px) rotate(-45deg);
    }

    header nav{
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        padding:57px 0;
        background:#231f20;
        z-index: 9998;
        transform:translateY(-100%);
        opacity:0;
    }

    header nav.active{
        transform:translateY(0);
        opacity:1;
    }

    header nav>ul{
        height:auto;
        flex-direction:column;
        align-items: flex-start;
        color:#fff;
    }

    header nav>ul>li{
        margin-bottom:17px;
        
        font-size:25px;
    }

    header nav>ul>li a{
        padding-bottom:4px;
    }

    header nav>ul>li a:hover{
        /* color:#fff; */
        border-bottom:4px solid #fff;
    }

    header nav>ul>li .sub-depth{
        margin-top:10px;
    }

    header nav>ul>li .sub-depth a{
        font-size:16px;
        padding:10px 0;
        font-weight:400;
    }

    footer>ul>li:last-child select{
        display: none;
    }

    .contents{
        padding-top:106px;
    }

    .t-show{
        display: block;
    }

    .t-hide{
        display: none;
    }
}

@media (max-width:575px) {
    header .tit-wrap{
        height:58px;
    }

    header .tit-wrap h1{
        display: flex;
        align-content:center;
        max-width:172px;
        /* font-size:0; */
        transform: translateY(4px);
    }

    header .tit-wrap .vol{
        margin-left:9px;
        padding-left:9px;
    }

    header .tit-wrap .vol::after{
        height:24px;
    }

    header .tit-wrap .vol li:nth-child(1){
        font-size:13px;
    }

    header .tit-wrap .vol li:nth-child(2){
        font-size:11px;
        line-height:1;
    }

    footer h1{
        max-width:176px;
    }

    footer>ul>li:last-child{
        padding-top:20px;
        padding-bottom:20px;
        height:auto
    }

    footer>ul>li:first-of-type>ul>li>a{
        width:40px;
        height:40px;
        padding:10px;
    }
    footer>ul>li:first-of-type>ul>li{
        margin-right:5px;
    }
    
    .contents{
        padding-top:58px;
    }

    .m-show{
        display: block;
    }
}