@charset "utf-8";
#inc01{position:relative;margin-top:200px;height:auto;overflow: hidden;}
#inc01 .since{margin-left:70px;width:max-content;font-size:22px;font-weight:400}
#inc01 .cont_wrap{position:sticky;
    top:0px;padding:150px 0 250px;margin-top:30px;height:auto;
    overflow: hidden;
    background-color:var(--primary-color)}
#inc01 .cont_wrap canvas{opacity:0;position:absolute;top:0px;left:70px}
#inc01 .matter_word{opacity:0;position:absolute;top:0px;left:70px}
#inc01 .matter_word span{font-size:177px;font-weight:900;color:#000}
#inc01 .txt_wrap{display:flex;justify-content:end;margin:auto;width:var(--mainsize)}
#inc01 .txt_wrap h2{width:calc(50% / 4);font-size:24px;font-weight:600;color:#000}
#inc01 .txt_wrap .txt{position:relative;padding-bottom:85px;width:50%}
#inc01 .txt_wrap .txt p{font-size:20px;font-weight:400;color:#000}
#inc01 .txt_wrap .txt a{position:absolute;left:0px;bottom:0px;display:flex;align-items:center;gap:20px;padding-right:30px;width:max-content;max-height:25px;font-size:19px;font-weight:700;color:#000}
#inc01 .txt_wrap .bg{position:relative;width:7px;height:7px;background-color:#000;border-radius:50%}
#inc01 .txt_wrap .bg svg{opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:21px;height:21px;color:#fff}

#inc01 .gsap_wrap{position:relative;padding:120px 70px 160px;width:100%;background-color:#000}
#inc01 .gsap_wrap .img_cont{display:flex;align-items:start}
#inc01 .img_cont a{position:relative}
#inc01 .img_cont .left{width:50%}
#inc01 .img_cont .right{margin-left:25%;width:15%;box-sizing:content-box}
#inc01 .img_cont .img{overflow:hidden;width:100%;filter:blur(10px) brightness(0.5);transition:all 1.5s}
#inc01 .img_cont .left .img{height:710px;transform:perspective(2500px) rotateY(180deg)}
#inc01 .img_cont .right .img{height:410px;transform:perspective(2500px) rotateY(-180deg)}
#inc01 .gsap_wrap.active .img_cont .img{filter:blur(0px) brightness(1);transform:perspective(2500px) rotateY(0deg)}
#inc01 .img_cont img{width:100%;height:100%;object-fit:cover;transition:all .3s}
#inc01 .img_cont svg{opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:50%;background-color:rgb(0, 0, 0,0.8);transition:all .3s}
#inc01 .img_cont .left svg{width:210px;height:210px}
#inc01 .img_cont .right svg{width:150px;height:150px}

#inc01 .img_cont a span{opacity:0;position:absolute;background-color:rgba(236, 146, 11, 0.2);transition:all .3s}
#inc01 .img_cont a span:after{content:"";position:absolute;width:8px;height:8px;background-color:var(--primary-color)}
#inc01 .img_cont a span:nth-child(-n+2):after{top:-4px;left:-4px}
#inc01 .img_cont a span:nth-child(3):after{bottom:-4px;right:-4px}
#inc01 .img_cont a span:nth-child(4):after{bottom:-4px;right:-4px}
#inc01 .img_cont a span.bg_top{top:0px;left:0px;width:100%;height:1px}
#inc01 .img_cont a span.bg_right{top:0px;right:0px;width:1px;height:100%}
#inc01 .img_cont a span.bg_bottom{bottom:0px;right:0px;width:100%;height:1px}
#inc01 .img_cont a span.bg_left{bottom:0px;left:0px;width:1px;height:100%}

#inc01 .txt_cont{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin-top:200px}
#inc01 .txt_cont h2, #inc01 .txt_cont h3 {overflow:hidden}
#inc01 .txt_cont h2 span{color:var(--primary-color)}
#inc01 .txt_cont h3 div{margin-top:60px;font-size:70px;font-weight:700;line-height:1.1}
#inc01 .txt_cont a{overflow:hidden;margin-top:90px;cursor:none}
#inc01 .txt_cont a .icon{display:flex;justify-content:center;align-items:center;width:75px;height:75px;border-radius:50%;background-color:var(--primary-color);transition:all .3s}
#inc01 .txt_cont a svg{width:28px;height:28px}
#inc01 .txt_cont a svg path{color:#000}

#inc01 .cursor{position:fixed;z-index:9999;width:120px;height:120px;transform:translate(-50%, -50%);transition-property:background, transform;pointer-events:none}
#inc01 .cursor .bg{display:flex;justify-content:center;align-items:center;text-align:center;opacity:0;transform:scale(0);width:100%;height:100%;border-radius:50%;font-size:13px;font-weight:700;transition:all .3s var(--timing);color:#000 !important;background:var(--primary-color)}
#inc01 .cursor.on .bg{opacity:1;transform:scale(1)}

@keyframes rotate {
    0% { transform:translate(-50%, -50%) rotate(0deg)}
    100% { transform:translate(-50%, -50%) rotate(360deg)}
}

/* 반응형 [s] */
@media (hover:hover){
#inc01 .img_cont a:hover span{opacity:1}
#inc01 .img_cont a:hover span.bg_top{top:-40px;left:-40px;width:calc(100% + 80px)}
#inc01 .img_cont a:hover span.bg_right{top:-40px;right:-40px;height:calc(100% + 80px)}
#inc01 .img_cont a:hover span.bg_bottom{bottom:-40px;right:-40px;width:calc(100% + 80px)}
#inc01 .img_cont a:hover span.bg_left{bottom:-40px;left:-40px;height:calc(100% + 80px)}
#inc01 .img_cont a:hover img{transform:scale(130%);filter:brightness(0.5)}
#inc01 .img_cont a:hover svg{opacity:1;animation:rotate 10s linear infinite}
}
@media (max-width:1980px){
#inc01 .since{font-size:18px}
#inc01 .txt_wrap h2{font-size:22px}
#inc01 .txt_wrap .txt p{font-size:18px}
#inc01 .txt_wrap .txt a{font-size:17px}
#inc01 .img_cont .left .img{height:580px}
#inc01 .img_cont .right .img{height:340px}
#inc01 .img_cont .left svg{width:170px;height:170px}
#inc01 .img_cont .right svg{width:100px;height:100px}
#inc01 .txt_cont h3 div{font-size:62px}
}
@media (max-width:1380px){
#inc01{margin-top:180px}
#inc01 .since{margin-left:2.5%}
#inc01 .matter_word{left:2.5%}
#inc01 .matter_word span{font-size:160px}
#inc01 .cont_wrap canvas{left:2.5%}
#inc01 .txt_wrap{width:95%}
#inc01 .txt_wrap h2{font-size:20px}
#inc01 .txt_wrap .txt p{font-size:16px}
#inc01 .txt_wrap .txt a{font-size:16px}
#inc01 .img_cont .right{margin-left:20%;width:25%}
#inc01 .img_cont .right .img{height:300px}
#inc01 .img_cont .left .img{height:500px}
#inc01 .txt_cont h3 div{font-size:50px}
#inc01 .txt_cont a .icon{width:70px;height:70px}
#inc01 .txt_cont a svg{width:24px;height:24px}
#inc01 .gsap_wrap{padding:280px 5%}
}
@media (max-width:1024px){
#inc01{margin-top:130px}
#inc01 .matter_word span{font-size:135px}
#inc01 .txt_wrap{flex-direction:column;gap:20px;align-items:end}
#inc01 .txt_wrap h2{width:50%}
#inc01 .cont_wrap{padding:120px 0 200px}
#inc01 .img_cont .left .img{height:420px}
#inc01 .img_cont .right{margin-left:15%}
#inc01 .img_cont .right .img{height:270px}
#inc01 .img_cont a:hover span.bg_top{top:-30px;left:-30px;width:calc(100% + 60px)}
#inc01 .img_cont a:hover span.bg_right{top:-30px;right:-30px;height:calc(100% + 60px)}
#inc01 .img_cont a:hover span.bg_bottom{bottom:-30px;right:-30px;width:calc(100% + 60px)}
#inc01 .img_cont a:hover span.bg_left{bottom:-30px;left:-30px;height:calc(100% + 60px)}
#inc01 .img_cont .left svg{width:150px;height:150px}
#inc01 .gsap_wrap{padding:200px 5%}
#inc01 .txt_cont{margin-top:170px}
#inc01 .txt_cont h3 div{margin-top:50px;font-size:40px}
#inc01 .txt_cont a{margin-top:70px}
#inc01 .txt_cont a .icon{width:65px;height:65px}
#inc01 .txt_cont a svg{width:21px;height:21px}
#inc01 .cursor{width:120px;height:120px}
}
@media (max-width:768px){
#inc01{margin-top:90px}
#inc01 .since{margin:auto;font-size:17px}
#inc01 .cont_wrap{margin-top:20px;padding:90px 0}
#inc01 .txt_wrap{text-align:center;align-items:center}
#inc01 .txt_wrap h2{width:100%}
#inc01 .txt_wrap .txt{padding-bottom:60px;width:100%}
#inc01 .txt_wrap .txt a{left:50%;transform:translateX(-50%);padding-right:0px}
#inc01 .matter_word{display:none}
#inc01 .gsap_wrap{padding:120px 5%}
#inc01 .gsap_wrap .img_cont{flex-direction:column}
#inc01 .img_cont .left{margin-left:2.5%;width:80%}
#inc01 .img_cont .left .img{height:350px}
#inc01 .img_cont .left svg{width:130px;height:130px}
#inc01 .img_cont .right{margin:100px 2.5% 0 auto;width:50%}
#inc01 .img_cont .right .img{height:230px}
#inc01 .img_cont a:hover span.bg_top{top:-20px;left:-20px;width:calc(100% + 40px)}
#inc01 .img_cont a:hover span.bg_right{top:-20px;right:-20px;height:calc(100% + 40px)}
#inc01 .img_cont a:hover span.bg_bottom{bottom:-20px;right:-20px;width:calc(100% + 40px)}
#inc01 .img_cont a:hover span.bg_left{bottom:-20px;left:-20px;height:calc(100% + 40px)}
#inc01 .txt_cont{margin-top:150px}
#inc01 .txt_cont h3 div{margin-top:40px;font-size:28px}
#inc01 .txt_cont a{margin-top:60px}
#inc01 .txt_cont a .icon{width:60px;height:60px}
#inc01 .cursor .bg{white-space:pre-line}
#inc01 .txt_wrap .bg{
    width: 40px;
    height: 40px;
    margin: 8px auto;
}
#inc01 .txt_wrap .bg svg{
    opacity: 1;
}
#inc01 .txt_wrap .txt a{
    position: static;
    display: block;
    margin: 20px auto;
    transform: translateX(0);
}
}
@media (max-width:480px){
#inc01{margin-top:50px}
#inc01 .cont_wrap{padding:70px 0}
#inc01 .txt_wrap h2{font-size:18px}
#inc01 .txt_wrap .txt p{font-size:15px}
#inc01 .txt_wrap .txt a{gap:15px;font-size:15px}
#inc01 .gsap_wrap{padding:80px 5% 100px}
#inc01 .img_cont .left{margin-left:5%}
#inc01 .img_cont .left .img{height:270px}
#inc01 .img_cont .left svg{width:110px;height:110px}
#inc01 .img_cont .right{margin:70px 5% 0 auto;width:50%}
#inc01 .img_cont .right svg{width:90px;height:90px}
#inc01 .txt_cont{margin-top:100px}
#inc01 .txt_cont h3 div{margin-top:30px;font-size:23px;white-space:pre-line}
#inc01 .txt_cont a{margin-top:50px}
#inc01 .cursor{width:90px;height:90px}
#inc01 .cursor .bg{font-size:12px}
#inc01 .cursor{width:110px;height:110px}
#inc01 .cursor .bg{font-size:13px}
}
@media (max-width:390px){
#inc01{margin-top:40px}
#inc01 .since{font-size:16px}
#inc01 .txt_wrap{gap:15px}
#inc01 .txt_wrap h2{font-size:17px}
#inc01 .txt_wrap .txt{padding-bottom:50px}
#inc01 .txt_wrap .txt p{font-size:14px}
#inc01 .txt_wrap .txt a{gap:12px;font-size:14px}
#inc01 .gsap_wrap{padding:70px 5% 90px}
#inc01 .img_cont .left .img{height:230px}
#inc01 .img_cont .left svg{width:100px;height:100px}
#inc01 .img_cont .right{margin-top:60px}
#inc01 .img_cont .right .img{height:215px}
#inc01 .img_cont .right svg{width:80px;height:80px}
#inc01 .txt_cont{margin-top:80px}
#inc01 .txt_cont h3 div{margin-top:20px;font-size:20px}
#inc01 .txt_cont a{margin-top:40px}
#inc01 .txt_cont a .icon{width:55px;height:55px}
#inc01 .cursor{width:100px;height:100px}
#inc01 .cursor .bg{font-size:12px}
}
/* 반응형 [e] */