div#wrap {
    width: 100%;
    position: relative;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    color: #fff;
    font-size: 16px;
    overflow: hidden;
}

a {
    display: block;
}

.fw-bold {
    font-weight: 500;
}

.ff-pop {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

header {
    position: fixed;
    z-index: 99;
    width: 100%;
}

header .inner {
    width: 96%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
}

header h1 a {
    width: 5.3125em;
    height: 1.25em;
    background: url(../images/logo.png) no-repeat center center;
    text-indent: -9999px;
    background-size: contain;
}

header .hambtn {
    width: 30px;
    height: 19px;
    background: url(../images/hambtn.png) no-repeat center center;
    text-indent: -9999px;
}

nav {
    position: absolute;
    width: 100%;
    max-width: 360px;
    height: 100vh;
    top: 0;
    right: -400px;
    background: #fff;
    color: #000;
    transition: .5s;
}

nav.on {
    right: 0;
    transition: .5s;
}

nav .close {
    width: 24px;
    height: 24px;
    float: right;
    background: url(../images/ico_close.png) no-repeat center center;
    background-size: cover;
    text-indent: -9999px;
    margin: 1em;
}

nav ul {
    margin-top: 4em;
}

nav ul li a {
    height: 80px;
    line-height: 80px;
    padding-left: 30px;
    font-size: 1.25rem;
    border-bottom: 1px solid #efefef;
    color: #222;
}

#fp-nav.fp-right {
    right: 2%
}

#fp-nav ul li a {
    width: 6px;
    height: 40px;
    margin: 0 0 9px 0;
    background: transparent;
    border: 1px solid #fff;
}

#fp-nav ul li a.active {
    background: #fff;
}

#fp-nav ul li a:hover {
    background: rgba(255, 255, 255, .6);
}

.section {
    position: relative;
}

.section .inner {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
}

.section::before {
    content: "";
    display: block;
    width: 26px;
    height: 42px;
    background: url(../images/scrollimg.png) no-repeat center center;
    position: absolute;
    left: 2%;
    bottom: 6.25em;
    background-size: contain;
    animation: scroll .8s infinite alternate;
    opacity: 0;
    z-index: 10;
}

@keyframes scroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-20px);
    }
}

.section::after {
    content: "SCROLL";
    position: absolute;
    width: 26px;
    height: 1.5625em;
    left: 2%;
    bottom: 4em;
    transform: rotate(90deg);
    font-family: 'Poppins', sans-serif;
    opacity: 0;
}

.section.active::before,
.section.active::after {
    opacity: 1;
    transition: .8s .6s
}

.section h2 {
    font-size: 1.125em;
    letter-spacing: .25em;
    position: absolute;
    top: 2.5em;
    left: 50%;
    transform: translateX(-50%);
}


.sec1 {
    background: url(../images/main_bg01.png) no-repeat center center;
    background-size: cover;
    text-align: center;
}

.sec1 .inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sec1 .big {
    font-size: 3.75em;
    line-height: 1.15;
    margin-bottom: .73em;
    opacity: 0;
    transform: translateY(-30px);
    transition: .8s .3s;
}

.sec1 .intro {
    opacity: 0;
    transform: translateY(30px);
    transition: .8s .3s;
}

.sec1.active .big,
.sec1.active .intro {
    opacity: 1;
    transition: .8s .3s;
    transform: translateY(0);
}



.btn {
    width: 140px;
    height: 40px;
    border: 1px solid #fff;
    line-height: 40px;
    text-align: center;
}

.btn:hover {
    background: rgba(255, 255, 255, .2);
    transition: .5s;
}

.sec2 .inner,
.sec4 .inner,
.sec5 .inner {
    padding: 140px 0 30px;
}

.sec2 {
    background: url(../images/main_bg02.png) no-repeat center center;
    background-size: cover;
}

.sec2 .txtwrap {
    display: flex;
    justify-content: space-between;
}

.sec2 .txt-con {
    flex-basis: 47%;
}

.sec2 .tit {
    font-size: 1.375em;
    margin-bottom: 2em;
    padding-top: 108px;
    background: url(../images/company01.png) no-repeat left top;
}

.sec2 .right .tit {
    background-image: url(../images/company02.png);
}

.sec2 .partner .btn {
    display: inline-block;
    font-size: .8em;
    font-weight: normal;
}

.sec2 .history {
    position: relative;
    margin: 8em 0;
}

.sec2 .history:before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 8px;
    left: 0;
}

.sec2 .fordot {
    position: relative;
    display: block;
}

.sec2 .fordot:before,
.sec2 .fordot:after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 5px;
    position: absolute;
    top: 5px;
}

.sec2 .fordot:before {
    left: 0;
}

.sec2 .fordot:after {
    right: 0;
}

.sec2 .his-con {
    float: left;
    text-align: center;
    margin: 0 2.827em;
}

.sec2 .his-con .ff-pop {
    margin-bottom: 1em;
}

.sec2 .his-con .ff-pop:before {
    content: "";
    display: block;
    width: 1.0625em;
    height: 1.0625em;
    background: url(../images/history_dot.png) no-repeat center center;
    background-size: cover;
    margin: 0 auto 1em;
}

.sec2 .his-con p {
    line-height: 1.2;
}

.sec2 .partner span:after {
    content: "|";
    color: #fff;
    position: absolute;
    font-size: .8em;
    top: .1em;
    left: 7.15em;
}

.sec2 .partner {
    font-size: 1.25em;
    font-weight: 400;
}

.sec2 .partner img {
    vertical-align: sub;
    margin: 0 1.75em 0 2.5em;
}

.sec2 .partner span {
    position: relative;
}


/******연혁추가 시 주석풀어주세요!!******/

/*.slick-prev {display: none !important;}
.sec2 .fordot:after {display: none;}
.sec2 .slick-slide:nth-last-of-type(3) .fordot:before {display: none;}
.sec2 .slick-slide:nth-last-of-type(3) .fordot:after {display: block;}
.slick-next {border:none; width: 100px; height: 28px; background:url(../images/right_arrow2.png) no-repeat right 4px; background-size: 9%; right: 0;top:50px; margin-top: 0; position: absolute; text-indent: -9999px; opacity: 0; transform: translateY(50px); transition: .8s .3s;}
.sec2.active .slick-next {opacity: 1; transform: translateY(0);transition: .8s .7s;}
.slick-next:after {content: '연혁 더 보기'; color:#fff; text-indent: 0; display: block; margin: -20px 20px 0 0;}*/

/******연혁추가 시 주석풀어주세요!!******/




.sec3 {
    background: url(../images/main_bg03.png) no-repeat center center;
    background-size: cover;
}

.sec3 .product {
    height: 100%;
    display: flex;
}

.sec3 .product li {
    flex-basis: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec3 .product li.on {
    background: url(../images/hover.png);
}

.sec3 .product li.on .btn {
    opacity: 1;
}

.sec3 .product a {
    cursor: auto;
}

.sec3 .ff-pop {
    font-size: 1.5em;
    padding-top: 2.5em;
    text-align: center;
}

.sec3 .btn {
    display: block;
    margin: 0 auto;
    margin-top: 2.625em;
    opacity: 0;
    cursor: pointer;
}

.sec3 .product li:hover {
    background: url(../images/hover.png);
}

.sec3 .product li:hover .btn {
    opacity: 1;
    transition: .5s;
}


.sec4 {
    background: url(../images/main_bg04.png) no-repeat center center;
    background-size: cover;
}

.sec4 .recruit {
    display: flex;
    flex-wrap: wrap;
    margin: 2.5em 0 5em;
}

.sec4 .recruit li {
    flex-basis: 21%;
    margin-right: 5.33%;
    margin-bottom: 3em;
}

.sec4 .recruit li:nth-child(4n) {
    margin-right: 0;
}

.sec4 .tit {
    font-size: 1.375em;
    height: 3em;
    position: relative;
    margin-bottom: 3em;
}

.sec4 .tit:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 4px;
    background: #fff;
    left: 0;
    bottom: -1.5em;
}

.sec4 .tit.line1 {
    padding-top: 1.5em;
}

.sec4 .con {
    color: #efefef;
}

.sec4 .rec-contact {
    font-size: 1.125em;
    padding: 1.75em;
    background: rgba(0, 0, 0, .6);
    border-radius: 1em;
}

.sec4 .rec-contact p:first-child {
    margin-bottom: .5em;
}

.sec4 .rec-contact li {
    display: inline-block;
}

.sec4 .cate {
    position: relative;
    margin-right: 1.75em;
}

.sec4 .cate:after {
    content: "|";
    display: block;
    font-size: .75em;
    position: absolute;
    right: -1.15em;
    top: .15em;
}

.sec4 .cate-con {
    margin-right: 1.75em;
}



.sec5 {
    background: #181e20;
}

.sec5 .address {
    display: flex;
    justify-content: space-around;
    margin-bottom: 4.5em;
}

.sec5 .address li {
    text-align: center;
    margin: 3em 0;
    color: #dfdfdf;
}

.sec5 .address .ff-pop {
    margin-bottom: 1.5em;
    font-size: 1.125em;
    color: #fff;
}

.sec5 .copy {
    font-size: .875em;
    text-align: center;
}


.section .transition {
    opacity: 0;
    transform: translateY(50px);
    transition: .8s .3s;
}

.section.active .transition {
    opacity: 1;
    transform: translateY(0);
}

.section.active .tran-first {
    transition: .8s .5s;
}

.section.active .tran-second {
    transition: .8s .7s;
}

.section.active .tran-third {
    transition: .8s .9s;
}



@media screen and (max-width: 1366px) {
    body {
        font-size: 15px;
    }

    .section::before {
        height: 35px;
        left: 50%;
        transform: translateX(-50%);
        bottom: 1.25em;
        animation: scroll2 .8s infinite alternate;
    }

    .section::after {
        display: none;
    }

    .sec5.active::before {
        display: none;
    }

    .sec2 .tit {
        padding-top: 86px;
        background-size: 8%;
    }

    .sec2 .history {
        margin: 5em 0 4em;
    }

    .sec2 .his-con {
        margin: 0 4.18%;
    }

    .slick-next {top:8px;}

    .sec4 .recruit {
        margin: 0 0 1em;
    }

    .sec5 .address {
        margin-bottom: 0;
    }

    .sec5 .address li {
        margin: 2.5em 0 3em;
    }

    .sec5 .address .ff-pop {
        margin-bottom: 1em;
    }
}

@keyframes scroll2 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}


@media screen and (max-width: 1280px) {
    header .inner {
        width: 96%;
    }

    #fp-nav.fp-right {
        display: none;
    }

    .section .inner {
        width: 97%;
    }

    .sec1 .big {
        font-size: 3em;
    }

    .sec2 .his-con {
        margin: 0 3%;
        width: 14%;
    }

    .sec5 .address li {
        margin: 1.5em 0;
    }

    .sec5 .copy {
        margin-bottom: 0;
        margin-top: .5em;
    }

    .sec5 .transition {
        transform: translateY(0);
    }

}

@media screen and (max-width: 980px) {
    .sec2 .tit {
        padding-top: 70px;
        font-size: 1.17em;
        margin-bottom: 1.5em;
    }

    .sec2 .his-con {
        margin: 0 1%;
        width: 18%;
    }

    .sec2 .partner img {
        height: 20px;
        padding-bottom: 2px;
    }

    .sec2 .partner:before {
        top: .5em;
    }

    .sec4 .tit {
        font-size: 1.2em;
    }

    .sec4 .tit:after {
        height: 3px;
    }

}

@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
    }

    header .inner {
        padding-top: 20px;
    }

    header .hambtn {
        width: 24px;
        background-size: contain;
    }

    .section .inner {
        width: 96%;
    }

    .section::before {
        display: none;
    }

    .sec1 .big {
        font-size: 2.25em;
    }


   
    .sec2 .txtwrap {
        display: block;
    }

    .sec2 .tit {
        background-size: 36px;
        background-position: center top;
        padding-top: 50px;
        margin-bottom: 1em;
    }

    .sec2 .txt-con {
        text-align: center;
    }

    .sec2 .txt-con.left {
        margin-bottom: 3em;
    }

    .sec2 .mo-hide {
        display: none;
    }

    .sec2 .history {
        padding: 20px;
    }

    .sec2 .history:before {
        width: 1px;
        height: 100%;
        top: 0;
        left: 50%;
        transform: translateX(-50%; );
    }

    .sec2 .his-con {
        width: 100%;
        margin: 0 0 2em;
    }

    .sec2 .his-con.left {
        padding-right: 50%;
        text-align: left;
    }

    .sec2 .his-con.right {
        padding-left: 50%;
        text-align: right;
    }

    .sec2 .fordot:before,
    .sec2 .fordot:after {
        display: none;
    }

    .sec2 .his-con .ff-pop {
        position: relative;
    }

    .sec2 .his-con .ff-pop:before {
        position: absolute;
        margin: 0;
        bottom: -15px;
    }

    .sec2 .his-con.left .ff-pop:before {
        right: -7px;
    }

    .sec2 .his-con.right .ff-pop:before {
        left: -7px;
    }

    .sec2 .his-con .ff-pop:after {
        content: "";
        display: block;
        height: 1px;
        width: 50%;
        background: #fff;
        position: absolute;
        bottom: -8px;
    }

    .sec2 .his-con.left .ff-pop:after {
        right: 0;
    }

    /*******연혁추가 시 주석 풀어주세요*******/
    
    /*.sec2 .history {margin:0;}
    .sec2 .history:first-of-type {margin-top: 5em;}
    .sec2 .history:last-of-type {margin-bottom: 4em;}*/

    /*******연혁추가 시 주석 풀어주세요*******/


    .sec2 .partner {
        text-align: center;
    }

    .sec2 .partner span:after {
        left: auto;
        right: -1.25em;
    }

    .sec2 .partner img {
        margin: 0 1.75em;
    }


    .sec3 .fp-scroller {
        height: 100%;
    }

    .sec3 .product {
        flex-wrap: wrap;
        padding-top: 120px;
    }

    .sec3 .product li {
        flex-basis: 100%;
        height: 20%;
    }

    .sec3 .product li.on {
        background: none;
    }

    .sec3 .product a {
        cursor: pointer;
    }

    .sec3 .btn {
        display: none;
    }

    .sec3 .product li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    .sec3 .product li:first-child {
        border-top: 1px solid rgba(255, 255, 255, .3);
    }

    .sec3 .product li:last-child {
        border: none;
    }

    .sec3 .product li a {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sec3 .ff-pop {
        padding-top: 0;
    }

    .sec4 .recruit li {
        flex-basis: 47%;
        margin-right: 6%;
        margin-bottom: 3.5em;
    }

    .sec4 .recruit li:nth-child(2n) {
        margin-right: 0;
    }

    .sec5 .address li {
        width: 20%;
    }
}


@media screen and (max-width: 500px) {
    .section h2 {top:4.5em;}

    .sec2 .partner img {
        margin: 0 1em 0 1.75em;
    }

    .sec2 .partner .btn {
        width: 80px;
    }

    .sec4 .recruit li {
        flex-basis: 100%;
        margin-right: 0;
    }

    .sec4 .tit:after {
        height: 2px;
        bottom: -.5em;
    }

    .sec4 .tit {
        margin-bottom: 1em;
        height: auto;
    }

    .sec4 .tit.line1 {
        padding-top: 0;
    }

    .sec4 .rec-contact {
        padding: 1.25em;
    }

    .sec4 .rec-contact li {
        display: block;
    }

    .sec5 .inner {padding-top:120px;}
    
    .sec5 .mo-hide {
        display: none;
    }

    .sec5 .address {
        flex-wrap: wrap;
    }

    .sec5 .address li {
        width: 100%;
        margin: 1.25em 0 0;
    }

    .sec5 .address li:first-child {
        margin-top: 2.5em;
    }

    .sec5 .address li:last-child {
        margin-bottom: 2.5em;
    }

    .sec5 .address .ff-pop {
        margin-bottom: 0;
    }
}