/*공통*/

/*메인*/
#fullpage .section{background-repeat: no-repeat; background-position: center; background-size: cover;
    background-color:#2a2627; position: relative;}

#fullpage .srcArea{width: 100%; height: 100%; overflow: hidden;}
#fullpage .srcArea > div{background-repeat: no-repeat; background-position: center; background-size: cover;
    position: relative; width: 100%; height: 100%; background-attachment: fixed;}
#fullpage .textArea{color: #fff; margin: 0 auto; position: absolute; z-index: 2; text-align: left;
    left: 200px; top: 50%; transform: translateY(-50%); width: calc(50% - 250px);}
#fullpage .textArea h2{font-size: 3.8em; line-height: 1.2em; font-weight: 800; margin-bottom: 20px;}
#fullpage .textArea > div{font-size: 1.3em; line-height: 1.8em; opacity: 0.8; font-weight: 500;}

.fp-scroller,
.visualSwiper,
.visualSwiper .swiper-wrapper{height: 100%;}
.visualSwiper .swiper-slide{background-color:#2a2627;}
.visualSwiper .swiper-slide:nth-child(1) .srcArea > div{background-image: url("../img/main/mvisual_bg01.jpg");}
.visualSwiper .swiper-slide:nth-child(2) .srcArea > div{background-image: url("../img/main/mvisual_bg02.jpg");}
.visualSwiper .swiper-slide:nth-child(3) .srcArea > div{background-image: url("../img/main/mvisual_bg03.jpg");}
.visualSwiper .swiper-slide:nth-child(4) .srcArea > div{background-image: url("../img/main/mvisual_bg04.jpg");}
.visualSwiper .swiper-slide:nth-child(5) .srcArea > div{background-image: url("../img/main/mvisual_bg05.jpg");}

#fullpage .visualSwiper .textArea{text-shadow: 0 3px 3px #00000056; width: calc(100% - 250px);}
#fullpage .visualSwiper .textArea h3{font-size: 3em; line-height: 1.4em; font-weight: 600; margin-bottom: 20px; margin-top: 50px;}
#fullpage .visualSwiper .textArea > div{ opacity: 1; line-height: 1.6em;}

.swiper .swiper-button{
    position: absolute;
    left: 200px;
    bottom: 180px;
    display: flex; align-items: center;
    justify-content: center;
    gap: 10px;
}
.swiper .swiper-button-next,
.swiper .swiper-button-prev{position: relative; display: block; left: 0; top: 0; right: 0; bottom: 0;}
.swiper .swiper-button-next:after,
.swiper .swiper-button-prev:after{font-family: "Font Awesome 5 Pro";color:#fff;font-weight:400;content: "\f061";display: block;font-size: 2em;}
.swiper .swiper-button-prev{transform: scaleX(-1);}
.swiper .swiper-pagination-bullet-active{background-color: #000000;}

#fullpage .middle_title{ line-height: 1.8em; color: #fff; text-align: center; padding: 100px 0}
#fullpage .middle_title h4{font-size: 3em;}
#fullpage .middle_title p{font-size: 1.3em; opacity: 0.8; margin-top: 10px;}

#fullpage .s1 .srcArea > div{background-image: url("../img/main/section_bg01.jpg");}
#fullpage .s1 .textArea{text-shadow: 0 3px 6px #00000029; left: auto; right: 200px;}

#fullpage .s2{background-color: #ffffff;}
#fullpage .s2 .srcArea{width: 50%; height: 70%; float: right;}
#fullpage .s2 .srcArea > div{background-image: url("../img/main/section_bg02.jpg");}
#fullpage .s2 .textArea{color: #000000;}

#fullpage .s3 .srcArea > div{background-image: url("../img/main/section_bg03.jpg");}
#fullpage .s3 .textArea{text-shadow: 0 3px 6px #00000029;}

#fullpage .s4{background-color: #F3F3F3;}
#fullpage .s4 .srcArea{width: 50%; height: 70%;}
#fullpage .s4 .srcArea > div{background-image: url("../img/main/section_bg04.jpg");}
#fullpage .s4 .textArea{color: #000000; left: auto; right: 200px;}

#fullpage .s5 .srcArea > div{background-image: url("../img/main/section_bg05.jpg");}
#fullpage .s5 .textArea{text-shadow: 0 3px 6px #00000029;}



#fp-nav ul li{width: auto; margin: 15px 0;}
#fp-nav ul li .fp-tooltip.fp-right,
#fp-nav ul li .fp-sr-only{display: none;}

#fp-nav ul li a{display: flex; align-items: center; justify-content: right;}
#fp-nav ul li a span{all:unset; display: block; background-color: #fff;}

#fp-nav ul li a span:last-of-type,
#fp-nav ul li a.active span:last-of-type{display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; font-size: 9px; letter-spacing: -0.5px; font-weight: 600; margin: 0; padding: 0; color: #00000080;}
#fp-nav ul li:hover a span:last-of-type,
#fp-nav ul li:hover a.active span:last-of-type{color: #000000; font-weight: 600;}

#fp-nav ul li a.active span:last-of-type{background-color: #000000; color: #fff;}

#fp-nav ul li a span.fp-sr-only{display: none;}
#fp-nav ul li a.active span.fp-sr-only,
#fp-nav ul li:hover a.active span.fp-sr-only {border-radius: 20px; display: flex; align-items: center;
    height: 20px; line-height: 20px; width: auto; margin: 0; font-size: 10px; padding: 0 6px; background-color: #000; color: #fff; margin-right: -18px; z-index: 2; text-transform:uppercase;}

#fp-nav ul li a span:before{display: block;}
#fp-nav ul li:nth-child(3) a span:last-of-type:before{content: "01"}
#fp-nav ul li:nth-child(4) a span:last-of-type:before{content: "02"}
#fp-nav ul li:nth-child(5) a span:last-of-type:before{content: "03"}
#fp-nav ul li:nth-child(6) a span:last-of-type:before{content: "04"}
#fp-nav ul li:nth-child(7) a span:last-of-type:before{content: "05"}

#fp-nav ul li .fp-tooltip,
#fp-nav ul li:hover .fp-tooltip{display: none;}



.scrolldown{display: none;}
@media screen and (max-width: 1400px) {
    #fullpage .visualSwiper .textArea,
    #fullpage .textArea{width: 75%; left: 10%;}
    .swiper .swiper-button{left: 10%; bottom: 10%;}
}
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 992px) {
    #fullpage .visualSwiper .textArea,
    #fullpage .textArea{width: 85%; left: 5%;}
    .swiper .swiper-button{left: 5%; bottom: 10%;}

    #fullpage .textArea h2{font-size: 3em;}
    #fullpage .visualSwiper .textArea h3{font-size: 2.5em;}
    #fullpage .s1 .textArea,
    #fullpage .s4 .textArea{ left: 5%; right: auto;}
    #fullpage .s2 .textArea,
    #fullpage .s4 .textArea{padding-top: 100px; top: 0%; transform:none;}
    #fullpage .s2 .srcArea,
    #fullpage .s4 .srcArea{width: 100%; height: 50%; top: 50%; left: 0; float: unset; position: absolute;}

    #fullpage .middle_title h4{font-size: 2em;}

}
@media screen and (max-width: 768px) {
    #fullpage .textArea h2{font-size: 2.5em;}
    #fullpage .textArea > div{font-size: 1.2em;}
}
@media screen and (max-width: 500px) {
    .fix_right{top: 13px; right: 10px;}
    .logo img{height: 30px;}
    .tnb{padding: 15px 0;}
    .fix_right li:first-of-type{display: none;}
    .fix_right li.hash{box-shadow: none; font-size: 1.2em;}
    #fullpage .textArea h2{font-size: 2em;}
    #fullpage .textArea > div{font-size: 1.1em;}
    #fullpage .textArea > div .hidden{display: none;}

    #fullpage .visualSwiper .textArea h3{font-size: 1.8em;}
    #fullpage .middle_title h4{font-size: 1.8em;}


    .scrolldown {
        display: block;;
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 100px;
        z-index: 52;
        font-weight: 500;
        color: #fff;
        text-align: center;
    }
    .scrolldown a {
        position: relative;
        display: block;
        height: 100%;
        position: relative;
        box-sizing: border-box;
    }
    .scrolldown .icon {
        position: absolute;
        top: 17%;
        left: 50%;
        display: inline-block;
        width: 20px;
        height: 30px;
        border: 2px #fff solid;
        border-radius: 30px;
        transform: translateX(-50%);
    }
    .scrolldown .icon::after {
        content: "";
        position: absolute;
        top: 7px;
        left: 50%;
        margin-left: -2px;
        width: 4px;
        height: 4px;
        border-radius: 100%;
        background-color: #fff;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-animation: scrollDownPointer 1.5s infinite;
        animation: scrollDownPointer 1.5s infinite;
    }
    .scrolldown a > i.txt {
        position: relative;
        display: inline-block;
        padding-top: 50px;
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        color: #fff;
    }
    .scrolldown a > i.txt:before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -10px;
        background: url("../img/common/icon_scroll_arrow.svg") no-repeat center;
        width: 9px;
        height: 9px;
        background-size: cover;
        transform: translateX(-50%);
    }
}



@-webkit-keyframes scrollDownPointer {
    60% {-webkit-transform: translate(0, 200%); transform: translate(0, 200%);}
    70% {opacity: 0;}
    100% {-webkit-transform: translate(0, 0); transform: translate(0, 0);}
}
@keyframes scrollDownPointer {
    60% {-webkit-transform: translate(0, 200%); transform: translate(0, 200%);}
    70% {opacity: 0;}
    100% {-webkit-transform: translate(0, 0); transform: translate(0, 0);}
}

@keyframes imagescale {
    0% {
        transform: scale(1)  rotate(.001deg);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
    }

    100% {
        transform: scale(1.3)  rotate(.001deg);
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -o-transform: scale(1.3);
    }
}