@charset "utf-8";

#main{}
#main .section{overflow: hidden;}
#main .section01{position: relative;}
#main .section01 .bg{position:absolute;top:0;left:0;width:100%;height:100%;background: url(../images/main/bg01.png) no-repeat;background-size: cover;}
#main .section02{position: relative;}
#main .section02 .bg{position:absolute;top:0;left:0;width:100%;height:100%;background: url(../images/main/bg02.png) no-repeat;background-size: cover;}
#main .section03{position: relative}
#main .section03 .bg{position:absolute;top:0;left:0;width:100%;height:100%;background: url(../images/main/bg03.png) no-repeat;background-size: cover;}
#main .section04{height:auto !important}
#main .layout{height:100%;}
#main .txt-box{position: absolute;top:50%;transform:translateY(-50%);left:0;width:100%;padding:0 20px;}
#main .txt-box h3{font-size: 60px;font-weight: bold;line-height: 1.17;letter-spacing: -1.5px;color: #fff;}
#main .txt-box p{margin-top:40px;font-size: 20px;font-weight: 500;letter-spacing: -0.5px;color: #fff;}
#main .txt-box a{position:relative;display: inline-block;margin-top:75px;font-size: 16px;font-weight: 500;letter-spacing: -0.4px;color: #fff;padding-right: 19px;}
#main .txt-box a:after{content: "";position:absolute;top:4px;right:0;display: inline-block;width:10px;height:16px;background: url(../images/icon/view_more.png) no-repeat;background-size: cover;}
#main .scroll{position: absolute;left:50%;transform: translateX(-50%);bottom:60px;}

#myMenu{position: fixed;top:50%;transform: translateY(-50%);right:100px;z-index: 10;}
#myMenu li{}
#myMenu li + li{margin-top:25px;}
#myMenu li a{position:relative;padding-left:30px;display: block;font-size: 16px;font-weight: 500;color: #fff;}
#myMenu li a:before{content: "";position:absolute;top:0;left:0;display: inline-block;width:20px;height:20px;border:2px solid transparent;box-sizing: border-box;border-radius: 100%;}
#myMenu li a:after{content: "";position:absolute;top:8px;left:8px;display: inline-block;width:4px;height:4px;box-sizing:border-box;background:#fff;border-radius: 100%;}

.fp-viewing-section01 #myMenu li:nth-child(1) a:before{border-color:#fff;}
.fp-viewing-section02 #myMenu li:nth-child(2) a:before{border-color:#fff;}
.fp-viewing-section03 #myMenu li:nth-child(3) a:before{border-color:#fff;}
.fp-viewing-section04 #myMenu li:nth-child(3) a:before{border-color:#fff;}

.fp-viewing-section01 .section01 .bg{-webkit-animation: scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;animation: scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;}
.fp-viewing-section01 .section01 .txt-box h3{-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both; }
.fp-viewing-section01 .section01 .txt-box p{-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;}
.fp-viewing-section01 .section01 .txt-box a{-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;}

.fp-viewing-section02 .section02 .bg{-webkit-animation: scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;animation: scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;}
.fp-viewing-section02 .section02 .txt-box h3{-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both; }
.fp-viewing-section02 .section02 .txt-box p{-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;}
.fp-viewing-section02 .section02 .txt-box a{-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;}

.fp-viewing-section03 .section03 .bg{-webkit-animation: scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;animation: scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;}
.fp-viewing-section03 .section03 .txt-box h3{-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both; }
.fp-viewing-section03 .section03 .txt-box p{-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;}
.fp-viewing-section03 .section03 .txt-box a{-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;}



/* tablet */
@media all and (max-width:1280px) {
    #myMenu{display: none;}

    #main .txt-box{padding:0 24px;}
    #main .txt-box h3{font-size: 28px;line-height: 1.27;letter-spacing: -0.7px;}
    #main .txt-box p{margin-top:20px;font-size: 16px;font-weight: 500;line-height: 1.31;letter-spacing: -0.4px;}
    #main .txt-box a{margin-top:48px;font-size: 13px;letter-spacing: -0.33px;}
    #main .scroll{bottom:36px;}
}


/* mobile */
@media all and (max-width:768px) {
    #main .section01{}
    #main .section01 .bg{background: url(../images/main/m_bg01.png) no-repeat;background-size: cover;}
    #main .section02{}
    #main .section02 .bg{background: url(../images/main/m_bg02.png) no-repeat;background-size: cover;}
    #main .section03{}
    #main .section03 .bg{background: url(../images/main/m_bg03.png) no-repeat;background-size: cover;}
}



/* ----------------------------------------------
 * Generated by Animista on 2023-6-26 22:37:35
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes slide-top {
    0% {
        -webkit-transform: translateY(200px);
        transform: translateY(200px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slide-top {
    0% {
        -webkit-transform: translateY(200px);
        transform: translateY(200px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}