@charset "UTF-8";
*{
    font-family: 'Noto Sans KR', sans-serif!important;
}

.header--wrapper{
    width:100%;
    height:130px;
    background:url(../img/top_bg.jpg) no-repeat center;
    position:relative;
    z-index: 1;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}
.header--wrapper .logo{
    width:172px;
    height:51px;
    background: rgba(255,255,255,0);
    position:absolute;
    top: 14px;
    left: 31px;
    z-index: 9;
}
.header--wrapper .head--sub--menu{
    position:absolute;
    top: 99px;
    left: 19px;
}
.header--wrapper .head--sub--menu > a{
    font-weight: 500;
    font-size: 11px;
    line-height: 100%;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-right:10px;
    text-align:left;
    letter-spacing: 0px;
}
.header--wrapper .gnb--menu--wrap{
    width:769px;
    height:41px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin-top:8px;
}
.header--wrapper .gnb--menu--wrap > ul{
    list-style:none;
    padding:0px;
    margin:0px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    position:relative;
    z-index: 1;
}.header--wrapper .gnb--menu--wrap > ul >li{

    display:flex;
    align-items:center;
    justify-content:center;
    width:calc(100% / 4);
    height:41px;
    cursor:pointer;
}

.header--wrapper .gnb--menu--wrap > ul >li:nth-of-type(1){
    width:210px;
}
.header--wrapper .gnb--menu--wrap > ul >li:nth-of-type(2){
    width:155px;
}
.header--wrapper .gnb--menu--wrap > ul >li:nth-of-type(3){
    width:170px;
}
.header--wrapper .gnb--menu--wrap > ul >li:nth-of-type(4){}

.header--wrapper .gnb--menu--wrap > ul >li > a{
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    text-align: center;
    color: #FFFFFF;
}
.header--wrapper .gnb--menu--wrap > ul >li.actv > a,
.header--wrapper .gnb--menu--wrap > ul >li:hover > a{
    color:#FAFF00;
}
.header--wrapper .gnb--menu--wrap > ul >li:hover{
    z-index: 9999;
}


.header--wrapper .gnb--menu--wrap > ul >li > div{
    position:absolute;
    top:41px;
    left:0px;
    display: none;
    width:769px;
    height:40px;
    align-items: center;
    justify-content:flex-start;
    padding-left:75px;
    background:#fff;
}
.header--wrapper .gnb--menu--wrap > ul >li:hover > div{
    z-index: 999;
}

.header--wrapper .gnb--menu--wrap > ul >li > div > a{
    font-weight: 500;
    font-size: 13px;
    line-height: 100%;
    text-decoration: none;
    color: #555555;
    margin-right:48px;
}
.header--wrapper .gnb--menu--wrap > ul >li > div > a:last-child{
    margin-right:0px;
}
.header--wrapper .gnb--menu--wrap > ul >li > div > a.actv,
.header--wrapper .gnb--menu--wrap > ul >li > div > a:hover{
    text-decoration: underline;
}

.header--wrapper .gnb--menu--wrap > ul >li.actv > div,
.header--wrapper .gnb--menu--wrap > ul >li:hover > div{
    display:flex;
}

.main--visual--wrap{
    width:710px;
    height:462px;
    background:url(../img/m_vs_bg.png) no-repeat center;
    position:relative;
    overflow:hidden;
}

.main--visual--wrap .text--items{
    position:absolute;
    bottom:0px;
    left:0px;
    width:713px;
    height:352px;
    background:url(../img/m_vs05.png) no-repeat center;
}

.main--visual--wrap .captions--wrap{
    position:absolute;
    top:35px;
    right:40px;
    width:400px;
    height:137px;
    background:url(../img/m_vs01.png) no-repeat center;
    animation-duration: 2s;
    animation-name: captions;
}

@keyframes captions{
    from {right : -100%;}
    to {right : 40px;}
}

.main--visual--wrap .arrow--01{
    width:74px;
    height:58px;
    position:absolute;
    top:30px;
    left:143px;
    background:url(../img/m_vs02.png) no-repeat center;
    animation-duration: 2s;
    animation-name: arrow01;
}

@keyframes arrow01{
    from {left : -100%;}
    to {left : 143px;}
}

.main--visual--wrap .arrow--02{
    width:105px;
    height:109px;
    position:absolute;
    top:63px;
    left:0px;
    background:url(../img/m_vs03.png) no-repeat center;
    animation-duration: 1s;
    animation-name: arrow02;
}

@keyframes arrow02{
    from {left : -100%;}
    to {left : 0px;}
}

.main--visual--wrap .arrow--03{
    width:196px;
    height:195px;
    position:absolute;
    top:118px;
    left:123px;
    background:url(../img/m_vs04.png) no-repeat center;
    animation-duration: 3s;
    animation-name: arrow03;
}

@keyframes arrow03{
    from {left : -100%;}
    to {left : 123px;}
}


.aside--wrap{
    width:154px;
    height:187px;
    list-style: none;
}
.aside--wrap li{
    border-bottom:1px solid #eee;
    height:30px;
    text-align: left;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding-left:10px;
}
.aside--wrap li:last-child{
    border-bottom:0px;
}
.aside--wrap li:before{
    content:'';
    display:inline-flex;
    width:4px;
    height:4px;
    border-radius:4px;
    background: #FF4D0B;
    margin-right:8px;
}
.aside--wrap li a{
    font-weight: 400!important;
    font-size: 12px!important;
    color: #555555!important;
}
.aside--wrap li.actv a,
.aside--wrap li:hover a{
    font-weight: 700!important;
    text-decoration-line: underline;
    color: #FF5C00!important;
}