@charset "utf-8";

/**/
#wrap.main.fp-viewing-0{}
#wrap.main:not(.fp-viewing-0) #header{transform:translateY(-100%);}
#wrap.main.fp-viewing-7{}
#wrap.main.fp-viewing-7 #goshop{display:none;}
#wrap.main #gotop{display:none;}

/*main*/
#main{}

/*fullpage*/
#fullpage{}
#fullpage .section{padding: 0 20px;}
#fullpage .section.sec-1{padding:0;}
#fullpage .section.sec-6{background:#f5f5f5;}
#fullpage .section.sec-8{padding:0;}
#fullpage .section .header{display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;}
#fullpage .section .header .title{line-height:80px;font-size:68px;font-weight:700;font-family: 'Paperlogy', sans-serif;}
#fullpage .section .header .text{margin: 27px 0 0 0;line-height: 28px;font-size: 18px;font-weight: 300;color: #111;word-break: keep-all;}
#fullpage .section .header .text span{font-weight: 600;color:#000B8C;}
#fullpage .section .header .text br.mo{display:none;}
#fullpage .visual{}
#fullpage .visual .swiper-slide{height:100dvh;}
#fullpage .visual .swiper-slide .text{position:absolute;top:50%;left:50%;width:1920px;max-width:100%;padding:0 120px;transform:translate(-50%,-50%);z-index:1;display:flex;flex-direction:column;}
#fullpage .visual .swiper-slide .text .txt{line-height: 68px;font-size:30px;font-weight:400;color:#111;opacity:0;transform:translateY(100px);transition: all 1.5s;width: 560px;max-width: 100%;}
#fullpage .visual .swiper-slide .text .txt strong{font-weight:600;}
#fullpage .visual .swiper-slide .text .txt span{font-weight: 600;vertical-align: top;}
#fullpage .visual .swiper-slide .text .tit{line-height: 68px;font-size: 46px;font-weight: 800;color: #000B8C;font-family: 'Paperlogy', sans-serif;opacity:0;transform:translateY(100px);transition: all 1.5s;width: 560px;max-width: 100%;}
#fullpage .visual .swiper-slide .text .tit strong{font-weight:600;}
#fullpage .visual .swiper-slide .text .ico{margin:30px 0 0 0;opacity:0;transform:translateY(100px);transition: all 1.5s;}
#fullpage .visual .swiper-slide .text .ico img{display:block;max-width:100%;height:auto;}
#fullpage .visual .swiper-slide .text.left{align-items:flex-start;text-align:left;}
#fullpage .visual .swiper-slide .text.right{align-items:flex-end;}
#fullpage .visual .swiper-slide .background{position:absolute;inset:0;z-index:0;}
#fullpage .visual .swiper-slide .background img{width:100%;height:100%;object-fit:cover;}
#fullpage .visual .swiper-slide-active{}
#fullpage .visual .swiper-slide-active .text{}
#fullpage .visual .swiper-slide-active .text .txt{opacity:1;transform:translateY(0);transition-delay:0.3s;}
#fullpage .visual .swiper-slide-active .text .tit{opacity:1;transform:translateY(0);transition-delay:0.6s;}
#fullpage .visual .swiper-slide-active .text .ico{opacity:1;transform:translateY(0);transition-delay:0.9s;}
#fullpage .visual .swiper-pagination{position:absolute;bottom:100px;left:50%;padding:0 140px;width:1920px;max-width:100%;transform:translateX(-50%);display:flex;align-items:center;gap: 10px;height:20px;z-index:2;}
#fullpage .visual .swiper-pagination .swiper-pagination-bullet{margin: 0;width:auto;height:auto;border-radius: unset;background:transparent;opacity: 1;display: flex;align-items: center;justify-content: center;gap: 10px;}
#fullpage .visual .swiper-pagination .swiper-pagination-bullet .num{font-size:18px;font-weight:600;color:#fff;font-family:'Montserrat', sans-serif;opacity:0.5;}
#fullpage .visual .swiper-pagination .swiper-pagination-bullet .bar{display:none;position:relative;width: 88px;height: 3px;background:rgb(255 255 255 / 50%);)}
#fullpage .visual .swiper-pagination .swiper-pagination-bullet .bar i{position:absolute;top:0;left:0;bottom:0;background:#fff;}
#fullpage .visual .swiper-pagination .swiper-pagination-bullet-active{}
#fullpage .visual .swiper-pagination .swiper-pagination-bullet-active .num{opacity:1;}
#fullpage .visual .swiper-pagination .swiper-pagination-bullet-active .bar{display:block;}
#fullpage .visual .swiper-timer{position:absolute;bottom:100px;left:50%;padding:0 140px;width:1920px;max-width:100%;transform:translateX(-50%);display:flex;align-items:center;gap:20px;height:20px;z-index:2;}
#fullpage .visual .swiper-timer .current{font-size:18px;font-weight:600;color:#fff;font-family:'Montserrat', sans-serif;}
#fullpage .visual .swiper-timer .next{font-size:18px;font-weight:600;color:#fff;font-family:'Montserrat', sans-serif;}
#fullpage .visual .swiper-timer .gauge{position:relative;width:88px;height:3px;background:rgb(255 255 255 / 40%);}
#fullpage .visual .swiper-timer .gauge i{position:absolute;top:0;left:0;bottom:0;background:#fff;}
#fullpage .symbol{display:flex;align-items:center;padding: 0 120px;}
#fullpage .symbol .icon{flex:1;display:flex;align-items:center;justify-content:center;}
#fullpage .symbol .icon img{width:390px;max-width:100%;height:auto;}
#fullpage .symbol .text{flex:1;}
#fullpage .symbol .text .tit{margin:0 0 30px;line-height:40px;font-size:38px;font-weight:700;color:#111;}
#fullpage .symbol .text .txt{margin:0 0 30px;line-height: 1.5;font-size: 20px;font-weight:300;color:#111;word-break: keep-all;}
#fullpage .symbol .text .eng{line-height: 1.5;font-size: 20px;font-weight:600;color:#DED6C3;}
#fullpage .story{margin: 100px 0 0;padding: 0 120px;display:flex;align-items:center;justify-content:center;gap:36px;}
#fullpage .story .item{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:312px;max-width:100%;height:auto;aspect-ratio:1/1;border-radius:30px;background:#F5F5F5;transition:all 0.5s;}
#fullpage .story .item .ico{margin:0 0 12px;width: 40px;height: 40px;}
#fullpage .story .item .ico.ico-1{background:url("../img/icon/ic_story1.png") no-repeat center / contain;}
#fullpage .story .item .ico.ico-2{background:url("../img/icon/ic_story2.png") no-repeat center / contain;}
#fullpage .story .item .ico.ico-3{background:url("../img/icon/ic_story3.png") no-repeat center / contain;}
#fullpage .story .item .ico.ico-4{background:url("../img/icon/ic_story4.png") no-repeat center / contain;}
#fullpage .story .item .tit{margin:0 0 12px;line-height:24px;font-size:20px;font-weight:500;color:#111;}
#fullpage .story .item .num{line-height:100px;font-size:90px;font-weight:900;color:#000B8C;}
#fullpage .story .item .txt{line-height:26px;font-size:22px;font-weight:700;color:#111;}
#fullpage .story .item:hover{transform:translateY(-70px);background:#000B8C;}
#fullpage .story .item:hover .ico.ico-1{background:url("../img/icon/ic_story1_on.png") no-repeat center / contain;}
#fullpage .story .item:hover .ico.ico-2{background:url("../img/icon/ic_story2_on.png") no-repeat center / contain;}
#fullpage .story .item:hover .ico.ico-3{background:url("../img/icon/ic_story3_on.png") no-repeat center / contain;}
#fullpage .story .item:hover .ico.ico-4{background:url("../img/icon/ic_story4_on.png") no-repeat center / contain;}
#fullpage .story .item:hover .tit{color:#fff;}
#fullpage .story .item:hover .num{color:#fff;}
#fullpage .story .item:hover .txt{color:#fff;}
#fullpage .technology{margin: 67px auto 0;width: 1480px;max-width: 100%;display:flex;gap: 21.8px;}
#fullpage .technology .item{flex: 1;position:relative;width: 222px;border-radius:30px;height: 461px;overflow: hidden;transition: flex 1s cubic-bezier(.4, 0, .2, 1), opacity .5s ease-out;will-change: flex;}
#fullpage .technology .item .icon{position:absolute;z-index:1;top: 0;left: 0;display: flex;align-items: center;justify-content: center;100%:;width: 100%;height: 100%;}
#fullpage .technology .item .icon img{width:auto;max-height: 50px;height:auto;object-fit:contain;transform: rotate(90deg);filter:grayscale(1);}
#fullpage .technology .item .text{position:absolute;z-index:2;top:45px;: 0;left: 0;width: 100%;padding: 0 55px 45px;display: flex;flex-direction: column;align-items: flex-start;text-align: left;transform: translateY(50px);opacity:0;visibility:hidden;transition: all 0.5s;}
#fullpage .technology .item .text .txt{margin:0 0 36px;line-height:30px;font-size:22px;color:#fff;white-space: nowrap;}
#fullpage .technology .item .text .img{display: flex;align-items: center;gap: 12px;}
#fullpage .technology .item .text .img img{width:66px;height:48px;object-fit:contain;}
#fullpage .technology .item .background{position:absolute;inset:0;z-index:0;}
#fullpage .technology .item .background:before{content:'';position:absolute;inset:0;background: linear-gradient(to right,rgba(0 0 0 / 50%) 0%,rgba(0 0 0 / 50%) 100%);opacity:1;visibility:visible;transition:all 0.5s;}
#fullpage .technology .item .background:after{content:'';position:absolute;inset:0;background: linear-gradient(to right,rgba(17 17 17 / 30%) 0%,rgba(17 17 17 / 0%) 100%);opacity:0;visibility:hidden;transition:all 0.5s;}
#fullpage .technology .item .background img{width:100%;height:100%;object-fit:cover;}
#fullpage .technology .item .background img.mo{display:none;}
#fullpage .technology .item.item-2{}
#fullpage .technology .item.item-2 .text{align-items: flex-end;text-align: right;}
#fullpage .technology .item.item-2 .background:after{background: linear-gradient(to left,rgba(17 17 17 / 30%) 0%,rgba(17 17 17 / 0%) 100%);opacity:0;visibility:hidden;transition:all 0.5s;}
#fullpage .technology .item.item-2.on .icon{left:unset;right: 55px;}
#fullpage .technology .item.on{flex: 5.35;}
#fullpage .technology .item.on .icon{top: calc(100% - 135px);left: 55px;width: auto;height: auto;transform: translate(0);align-items: flex-start;justify-content: flex-start;}
#fullpage .technology .item.on .icon img{max-height: 80px;transform: rotate(0deg);filter:grayscale(0);}
#fullpage .technology .item.on .text{opacity:1;visibility:visible;transform: translateY(0);transition-delay: 0.3s;}
#fullpage .technology .item.on .background:before{opacity:0;visibility:hidden;}
#fullpage .technology .item.on .background:after{opacity:1;visibility:visible;}

#fullpage .product{margin:96px auto 0;padding: 0 120px;max-width:100%;display: flex;align-items: center;justify-content: center;}
#fullpage .product ul{display:flex;gap:90px;width: 1420px;max-width: 100%;}
#fullpage .product li{flex:1;}
#fullpage .product li .box{position:relative;display:block;}
#fullpage .product li .box:hover .text{opacity:1;visibility:visible;transform:translateY(0);}
#fullpage .product li .box:hover .image img{transform:translateY(-25px);}
#fullpage .product li .name{margin: 0 0 25px;display:flex;align-items:center;gap: 10px;height:38px;}
#fullpage .product li .name .eng{font-size: 28px;font-weight:700;color:#111;font-family: 'Paperlogy', sans-serif;}
#fullpage .product li .name .tit{font-size: 22px;font-weight: 500;}
#fullpage .product li .image{position:relative;width:100%;height:auto;aspect-ratio:38/42;border-radius:30px;overflow:hidden;display: flex;align-items: center;justify-content: center;background:#a8adb5}
#fullpage .product li .image img{display:block;width:100%;object-fit: cover;transition:all 0.5s;}
#fullpage .product li .text{position:absolute;z-index: 2;bottom:0;left:0;padding:0 0 30px 30px;line-height:26px;font-size: 17px;font-weight:500;color:#111;opacity: 0;visibility: hidden;transform: translateY(50px);transition:all 0.5s;word-break: keep-all;}
#fullpage .product li .text span{color:#000B8C;}
#fullpage .partners{margin:80px auto;padding: 0 120px;}
#fullpage .partners .marquee{margin:0 0 42px;overflow: hidden;}
#fullpage .partners .marquee:last-of-type{margin-bottom:0;}
#fullpage .partners .marquee .swiper-container{}
#fullpage .partners .marquee .swiper-wrapper{transition-timing-function: linear !important;}
#fullpage .partners .marquee .swiper-slide{display:flex;align-items:center;justify-content:center;width:310px;height:auto;aspect-ratio:310/85;border-radius:20px;overflow:hidden;background:#ffffff;}
#fullpage .partners .marquee .swiper-slide img{max-width:100%;max-height:100%;object-fit:contain;}
#fullpage .news{position:relative;margin:110px auto 0;padding:0 120px}
#fullpage .news .list{}
#fullpage .news .list ul{display:flex;gap:62px;}
#fullpage .news .list li{width:calc((100% / 4) - 22px)}
#fullpage .news .list li .box{position:relative;display:block;}
#fullpage .news .list li .box:hover .image:before{opacity:1;visibility:visible;}
#fullpage .news .list li .box:hover .text{transform:translateY(0);opacity:1;visibility:visible;}
#fullpage .news .list li .image{position: relative;width:100%;height:auto;aspect-ratio:36/32;border-radius:30px;overflow:hidden;}
#fullpage .news .list li .image:before{content:'';position:absolute;inset:0;z-index:0;background: linear-gradient(to top, rgb(17 17 17 / 100%) 0%, rgba(0 0 0 / 0%) 100%);opacity: 0;visibility: hidden;transition: all 0.5s;}
#fullpage .news .list li .image img{width:100%;height:100%;}
#fullpage .news .list li .text{position:absolute;z-index:2;bottom:0;left:0;width:100%;padding:30px;line-height: 24px;font-size: 18px;font-weight: 500;color: #fff;opacity:0;visibility:hidden;transform:translateY(50px);transition:all 0.5s;}
#fullpage .news .more{position:absolute;top:-68px;right: 120px;}
#fullpage .news .more a{display:flex;align-items:center;gap:12px;line-height:24px;font-size: 18px;font-weight:500;font-family: 'Paperlogy', sans-serif;}
#fullpage .news .more a:after{content:'';width:17px;height:17px;background:url("../img/icon/ic_more_btn.png") no-repeat center / contain;}
#fullpage .background{position:absolute;bottom: 0;left: 0;width: 100%;z-index: 0;}
#fullpage .background .pc-only{display:block;}
#fullpage .background .mo-only{display:none;}
#fullpage .background .swiper-container{}
#fullpage .background .swiper-wrapper{transition-timing-function: linear !important;}
#fullpage .background .swiper-slide{width:auto;line-height:1;font-size:160px;font-weight:900;color:#F5F5F5;white-space:nowrap;}

/*animate*/
#fullpage .section .symbol .icon{opacity:0;transform:translateY(100px);transition:all 1.2s;}
#fullpage .section .symbol .text{opacity:0;transform:translateY(100px);transition:all 1.2s;}
#fullpage .section.active .symbol .icon{opacity:1;transform:translateY(0);transition-delay:0.6s;}
#fullpage .section.active .symbol .text{opacity:1;transform:translateY(0);transition-delay:0.9s;}

/*navigation*/
#fp-nav{}
#fp-nav.fp-right{right:70px !important;}
#fp-nav ul{display:flex;flex-direction:column;gap:28px;}
#fp-nav ul li{margin:0 !important;display:flex;align-items:center;justify-content:center;}
#fp-nav ul li:last-child{display:none;}
#fp-nav ul li a{}
#fp-nav ul li a span{margin:0 !important;width:4px !important;height:4px !important;background:#000B8C !important;transform:translate(-50%, -50%);}
#fp-nav ul li a.active span{width:8px !important;height:8px !important;}
/* 모바일 터치 디바이스에서는 우측 섹션 점 네비 숨김 (fullPage가 넣는 id="fp-nav") */
@media (hover: none) and (pointer: coarse){
    #fp-nav{display:none !important;}
}

.fp-watermark{display:none !important;}

@media (max-width:1024px){

    #fullpage .section{padding: 0;}
    #fullpage .section .header{padding:0 20px;}
    #fullpage .section .header .title{line-height:1;font-size: 28px;}
    #fullpage .section .header .text{margin:12px 0 0 0;line-height: 1.5;font-size: 14px;}
    #fullpage .section .header .text br{}
    #fullpage .section .header .text br.pc{display:none;}
    #fullpage .section .header .text br.mo{display:block;}
    #fullpage .visual{}
    #fullpage .visual .swiper-slide .text{padding: 20px;top: 120px;left:0;align-items: flex-start !important;text-align: left !important;transform: unset;}
    #fullpage .visual .swiper-slide .text .txt{line-height:1.5;font-size: 16px;transform: translateY(50px);}
    #fullpage .visual .swiper-slide .text .tit{line-height:1.5;font-size: 28px;transform: translateY(50px);}
    #fullpage .visual .swiper-slide-active .text .txt{opacity:1;transform:translateY(0);transition-delay:0.3s;}
    #fullpage .visual .swiper-slide-active .text .tit{opacity:1;transform:translateY(0);transition-delay:0.6s;}
    #fullpage .visual .swiper-timer{padding:0 20px;}
    #fullpage .visual .swiper-pagination{padding:0 20px;}
    #fullpage .symbol{flex-direction:column;align-items:stretch;padding:60px 20px;gap: 40px;}
    #fullpage .symbol .icon{}
    #fullpage .symbol .icon img{width:auto;height:100px;object-fit:contain;}
    #fullpage .symbol .text .tit{margin:0 0 10px;line-height:1.4;font-size: 16px;}
    #fullpage .symbol .text .txt{margin:0 0 10px;line-height:1.6;font-size: 14px;}
    #fullpage .symbol .text .txt br{display:none;}
    #fullpage .symbol .text .eng{line-height:1.4;font-size: 14px;}
    #fullpage .story{margin:40px 0 0;padding:0 20px;flex-wrap:wrap;gap:10px;}
    #fullpage .story .item{width:calc((100% / 2) - 5px);border-radius:20px;}
    #fullpage .story .item .ico{margin:0 0 6px;width: 32px;height: 32px;}
    #fullpage .story .item .tit{margin: 0 0 5px;line-height:1.5;font-size:14px;}
    #fullpage .story .item .num{line-height: 40px;font-size:30px;color: #000B8C;}
    #fullpage .story .item .txt{line-height:1.5;font-size: 14px;}
    #fullpage .story .item:hover{transform:translateY(0px);background: #F5F5F5;}
    #fullpage .story .item:hover .ico.ico-1{background:url("../img/icon/ic_story1.png") no-repeat center / contain;}
    #fullpage .story .item:hover .ico.ico-2{background:url("../img/icon/ic_story2.png") no-repeat center / contain;}
    #fullpage .story .item:hover .ico.ico-3{background:url("../img/icon/ic_story3.png") no-repeat center / contain;}
    #fullpage .story .item:hover .ico.ico-4{background:url("../img/icon/ic_story4.png") no-repeat center / contain;}
    #fullpage .story .item:hover .tit{color:initial;}
    #fullpage .story .item:hover .num{color: #000B8C;}
    #fullpage .story .item:hover .txt{color:initial;}
    #fullpage .story .item.on{background:#000B8C;}
    #fullpage .story .item.on .ico.ico-1{background:url("../img/icon/ic_story1_on.png") no-repeat center / contain;}
    #fullpage .story .item.on .ico.ico-2{background:url("../img/icon/ic_story2_on.png") no-repeat center / contain;}
    #fullpage .story .item.on .ico.ico-3{background:url("../img/icon/ic_story3_on.png") no-repeat center / contain;}
    #fullpage .story .item.on .ico.ico-4{background:url("../img/icon/ic_story4_on.png") no-repeat center / contain;}
    #fullpage .story .item.on .tit{color:#fff;}
    #fullpage .story .item.on .num{color:#fff;}
    #fullpage .story .item.on .txt{color:#fff;}
    #fullpage .technology{margin:40px 0 0;padding: 0 20px;gap:10px;}
    #fullpage .technology .item{border-radius:16px;height: calc(100dvh - 318px);max-height: 320px;}
    #fullpage .technology .item .icon{}
    #fullpage .technology .item .icon img{max-height: 32px;}
    #fullpage .technology .item .text{top: 0;padding: 20px;}
    #fullpage .technology .item .text .txt{margin:0 0 12px;line-height:1.5;font-size: 14px;}
    #fullpage .technology .item .text .img{}
    #fullpage .technology .item .text .img img{width:40px;height:auto;aspect-ratio:66/48;}
    #fullpage .technology .item .background{position:absolute;inset:0;z-index:0;}
    #fullpage .technology .item .background:before{content:'';position:absolute;inset:0;background: linear-gradient(to right,rgba(0 0 0 / 80%) 0%,rgba(0 0 0 / 80%) 100%);opacity:1;visibility:visible;transition:all 0.5s;}
    #fullpage .technology .item .background:after{content:'';position:absolute;inset:0;background: linear-gradient(to right,rgba(17 17 17 / 50%) 0%,rgba(0 0 0 / 0%) 100%);opacity:0;visibility:hidden;transition:all 0.5s;}
    #fullpage .technology .item .background img{width:100%;height:100%;object-fit:cover;}
    #fullpage .technology .item .background img.mo{display:block;}
    #fullpage .technology .item .background img.pc{display:none;}
    #fullpage .technology .item.on{flex: 3;}
    #fullpage .technology .item.on .icon{top: calc(100% - 75px);left: 20px;}
    #fullpage .technology .item.on .icon img{max-height: 45px;}
    #fullpage .technology .item.item-2.on .icon{right: 20px;}
    #fullpage .product{margin:40px auto 0;padding: 0 20px;}
    #fullpage .product ul{gap: 0;}
    #fullpage .product li{flex: 0 0 auto;width: 75dvw;}
    #fullpage .product li .box{}
    #fullpage .product li .box:hover .image img{transform:translateY(-10px);}
    #fullpage .product li .name{margin: 0 0 10px;height: 24px;gap:5px;}
    #fullpage .product li .name .eng{font-size:16px;}
    #fullpage .product li .name .tit{font-size: 14px;}
    #fullpage .product li .image{border-radius:16px;aspect-ratio: 1/1;}
    #fullpage .product li .text{position: relative;padding: 15px 0 0;line-height: 1.4;font-size: 14px;font-weight: 300;}
    #fullpage .product li .text br.pc{display:none;}
    #fullpage .product li .text br.mo{display:block;}
    #fullpage .product li.swiper-slide .text{transform: translateY(50px);opacity: 0;visibility: hidden;}
    #fullpage .product li.swiper-slide-active .text{transform: translateY(0);opacity: 1;visibility: visible;transition-delay: 0.2s;}
    #fullpage .partners{margin:40px auto;padding: 0;}
    #fullpage .partners .marquee{margin: 0 0 10px;}
    #fullpage .partners .marquee .swiper-slide{width:160px;border-radius:10px;aspect-ratio: 2/1;}
    #fullpage .news{position:relative;z-index:2;margin: 40px auto 0;padding: 40px 20px 0;}
    #fullpage .news .list{}
    #fullpage .news .list ul{flex-wrap: wrap;gap: 20px 15px;}
    #fullpage .news .list li{width: calc((100% / 2) - 8px);}
    #fullpage .news .list li .image{border-radius:10px;}
    #fullpage .news .list li .image:before{opacity: 1;visibility: visible;}
    #fullpage .news .list li .text{padding: 0;line-height: 1.4;font-size: 12px;font-weight: 300;color: #fff;opacity:1;visibility:visible;transform:unset;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;left: 10px;right: 10px;bottom: 10px;width: calc(100% - 20px);}
    #fullpage .news .list li .text br{display:none;}
    #fullpage .news .more{top: 0;right: 20px;}
    #fullpage .news .more a{line-height:20px;font-size: 12px;}
    #fullpage .news .more a:after{width:15px;height:15px;}
    #fullpage .background{}
    #fullpage .background .pc-only{display:none;}
    #fullpage .background .mo-only{display:block;}
    #fullpage .background .swiper-slide{font-size: 60px;}


    #fp-nav{display: none !important;}
}