@font-face {
    font-family: 'SUIT-Medium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SUIT-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SUIT-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NanumBarunGothic';
    font-style: normal;
    font-weight: 400;
    src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot');
    src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.ttf') format('truetype');
   }

#wrap {
    width: 100%;
    height: 100%;
    background-color: #fafafa;
}

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #555559;
}

ul {
    list-style: none;
    height: 50px;
}

.gnb {
    list-style: none;
    height: 50px;
    position: absolute;
    z-index: 40;
    display: flex;
    top: 0;
    right: 0;
    margin-right: 40px;

}

.gnb>li {
    /* float: right; */
    text-align: center;
    position: relative;
}

.gnb>li>a {
    display: block;
    width: 200px;
    height: 50px;
    line-height: 50px;
    color: #555559;
    font-family: 'SUIT-Regular';
    font-size: 18px;
}

.gnb>li:hover>a {
    font-family: 'SUIT-Bold';
}

.gnb .sub {
    display: none;
}

.gnb .sub a {
    display: block;
    height: 40px;
    line-height: 40px;
    font-family: 'SUIT-Regular';
}

.gnb .sub li:hover a {
    color: #FBAB00;
    font-weight: 600;
    letter-spacing: 0.055em;
}

/* ==================================== */


.main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 15%;
    cursor: pointer;
}

.bounce {
    animation: bounce 0.8s;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
    animation-iteration-count: infinite;
    transition: all 0.4s;
  }

  @keyframes bounce {
    from {
      transform: translateY(-70%) translateX(-50%);
    }
  
    to {
      transform: translateY(-30%) translateX(-50%);
    }
  }

.main img {
    width: 100%;
}

.circleBox {
    position: absolute;
    z-index: -10;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 50%;
    height: 70%;
}

.circle {
    position: absolute;
    z-index: -10;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: #FBAB00;
    cursor: pointer;
    right: auto;
    bottom: auto;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.circle a{
    width: 100px;
    height: 100px;
}

.circleBox a{
    transition: all 1s ease-in-out ;
    transition-property: top left bottom right;
}

.circle span{
    font-family: 'NanumBarunGothic';
    color: #333;
    font-size: 1.2rem;
    float: left;
}

.main:hover ~ .circleBox a:nth-child(1),
.circleBox:hover .circle:nth-child(1){
    top: 0px;
    transform: translateX(-50%);
}

.main:hover ~ .circleBox a:nth-child(2),
.circleBox:hover .circle:nth-child(2){
    left: 0;
    transform: translateY(-50%);
}

.main:hover ~ .circleBox a:nth-child(3),
.circleBox:hover .circle:nth-child(3){
    top: 100%;
    Bottom: 0;
    transform: translateX(-50%) translateY(-100%);
}

.main:hover ~ .circleBox a:nth-child(4),
.circleBox:hover .circle:nth-child(4){
    right: 0;
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-100%);
}

.circleBox a:nth-child(1) span{
    transform: translateX(40%) translateY(50%);
}

.circleBox a:nth-child(2) span{
    transform: translateY(120%) translateX(-40%);
}

.circleBox a:nth-child(3) span{
    transform: translateY(160%) translateX(75%);
}

.circleBox a:nth-child(4) span{
    transform: translateY(190%) translateX(-5%);
    width: 270px;
}