@charset "utf-8";

#inc03{overflow:hidden;position:relative;width:100%;height:100%;background:var(--primary)}
#inc03 .pin-spacer{overflow:visible;float:none;display:block;place-self:auto;grid-area:auto;flex-basis:auto;flex-shrink:1;position:relative;width:100%;height:1800px;z-index:auto;padding:0px 0px 0;margin:0px;order:0;inset:auto;box-sizing:border-box}
#inc03 .inc03_pin{max-width:100%;width:100%;height:100%;transform:translate(0px, 0px);translate:none;rotate:none;scale:none;inset:0px auto auto 0px;margin:0px;padding:0px}

/* tit */
#inc03 .left_tit{position: absolute;top:0;left:0;width:100%}
#inc03 .tit_area{display:block;padding-top:240px}
#inc03 .tit_area div b{color:#fff}
#inc03 .tit_area div h2{color:#fff}
#inc03 .tit_area a{display:block;width:135px;height:50px;margin-top:45px;font-size:15px;font-weight:700;line-height:50px;text-align:center;color:var(--primary);background:#fff;transition:0.2s}
#inc03.inc03_cm {min-height: calc(300px * 8 + 10px)}

/* bg */
#inc03 .bg_wrap{width:100%;height:100vh}
#inc03 .bg_wrap>div{width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;background-size:cover;transition:all 0.5s}
#inc03 .bg_wrap>div.visible{opacity:1}
#inc03 .bg{background-size:cover}
#inc03 .bg01{background: url(./img/bg01.jpg) no-repeat 50% 50%}
#inc03 .bg02{background: url(./img/bg02.jpg) no-repeat 50% 50%}
#inc03 .bg03{background: url(./img/bg03.jpg) no-repeat 50% 50%}
#inc03 .bg04{background: url(./img/bg04.jpg) no-repeat 50% 50%}
#inc03 .bg05{background: url(./img/bg05.jpg) no-repeat 50% 50%}

/* cont */
#inc03 .right_cont{position: absolute;top:0;left:50%;transform:translateX(-20%)} 
#inc03 .right_cont .static{display: flex;justify-content: flex-end;padding-top:240px}
#inc03 .right_cont ul{display:grid;grid-template-columns:repeat(2,1fr);column-gap:40px;row-gap:50px}
#inc03 .right_cont ul li{position:relative;width:423px;height:415px;border-radius:30px;font-size:15px;font-weight:700;background:rgba(255, 255, 255, 0.3);transition:0.2s}
#inc03 .right_cont ul li a{display:block;width:100%;height:100%;;padding:140px 10px 45px 55px;color:rgba(255, 255, 255, 0.5)}
#inc03 .right_cont ul li:nth-child(2n){top:250px}
#inc03 .right_cont ul li b{position:absolute;right:60px;top:55px;font-weight:700;color:#fff;font-family:var(--main-font)}
#inc03 .right_cont ul li h3{padding-bottom: 10px;font-size:25px;font-weight:700;color:#fff;font-family:var(--main-font)}
#inc03 .right_cont ul li span{display:block;margin-top:-3px;padding-bottom:18px;color:#fff;font-family:var(--main-font)}
#inc03 .right_cont ul li .txt{padding-bottom:30px;font-weight:400}
#inc03 .right_cont ul li .btn_wrap{display:flex;align-items:center;justify-content:center;width:49px;height:49px;border-radius:100%;color:#fff;background:rgba(255, 255, 255, 0.2)}
#inc03 .right_cont ul li .btn_wrap svg{width:20px;height:20px}
#inc03 .right_cont ul li.on{background:rgba(0,0,0,0.5)}


/* 반응형 [s] */
@media (max-width:1400px){
#inc03 .pin-spacer{height:1600px}
#inc03 .left_tit{left:50%;transform:translateX(-50%);width:90%}
#inc03 .right_cont{left:unset;right:5%;transform:none;width:50%}
#inc03 .right_cont ul{column-gap:30px;row-gap:40px;width:100%}
#inc03 .right_cont ul li{width:100%;height:auto}
#inc03 .right_cont ul li a{padding:90px 25px 35px 25px}
#inc03 .right_cont ul li h3{font-size:22px}
#inc03 .right_cont ul li span{padding-bottom:12px}
#inc03 .right_cont ul li b{top:35px;right:10%}
#inc03 .right_cont ul li .txt{padding-bottom:25px;word-break:keep-all;white-space:normal}
}
@media (max-width:1024px){
#inc03 .pin-spacer{height:1400px}
#inc03 .tit_area{padding-top:160px}
#inc03 .left_tit{width:95%}
#inc03 .right_cont{right:2.5%;width:55%}
#inc03 .right_cont .static{padding-top:160px}
#inc03 .right_cont ul{column-gap:20px;row-gap:30px}
#inc03 .right_cont ul li{border-radius:20px;font-size:14px;background-color:rgb(255, 255, 255, 0.3) !important;}
#inc03 .right_cont ul li h3{font-size:21px}
#inc03 .right_cont ul li span{padding-bottom:8px}
#inc03 .right_cont ul li .txt{padding-bottom:20px}
#inc03 .right_cont ul li .btn_wrap{width:45px;height:45px}
#inc03 .right_cont ul li .btn_wrap svg{width:18px;height:18px}
}
@media (max-width:768px){
#inc03 .pin-spacer{height:1390px}
#inc03 .tit_area{display:flex;flex-direction:column;align-items:center;padding-top:100px}
#inc03 .tit_area div h2{margin:auto;width:80%}
#inc03 .tit_area a{margin-top:40px}
#inc03 .left_tit{text-align:center}
#inc03 .right_cont{top:380px;right:50%;transform:translateX(50%);width:95%}
#inc03 .right_cont .static{padding-top:0px}
#inc03 .right_cont ul{display:flex;flex-wrap:wrap;gap:20px}
#inc03 .right_cont ul li:nth-child(-n+4){width:calc(50% - 10px)}
#inc03 .right_cont ul li:last-child{width:100%}
#inc03 .right_cont ul li:nth-child(2n){top:0px}
#inc03 .right_cont ul li a{padding:80px 25px 30px 25px}
#inc03 .right_cont ul li b{top:20px;right:25px}
#inc03 .right_cont ul li:hover{background:rgba(0,0,0,0.5)}
#inc03 .bg_wrap>div:nth-last-child(-n+4){display:none}
}
@media (max-width:610px){
#inc03 .pin-spacer{height:1440px}
}
@media (max-width:480px){
#inc03 .pin-spacer{height:1740px}
#inc03 .tit_area{padding-top:80px}
#inc03 .tit_area a{margin-top:35px;width:126px;height:48px;line-height:48px;font-size:14px}
#inc03 .tit_area div h2{width:90%}
#inc03 .right_cont{top:330px}
#inc03 .right_cont ul{flex-direction:column;flex-wrap:wrap;gap:12px}
#inc03 .right_cont ul li:nth-child(-n+4){width:100%}
#inc03 .right_cont ul li:nth-child(odd){background:rgba(255, 255, 255, 0.3) !important}
#inc03 .right_cont ul li:nth-child(even){background:rgb(0, 0, 0, 0.5) !important}
#inc03 .right_cont ul li a{display:flex;flex-direction:column;align-items:center;text-align:center;padding:25px 2.5%}
#inc03 .right_cont ul li b{position:static}
#inc03 .right_cont ul li h3{margin-top:5px;font-size:19px}
#inc03.inc03_cm {min-height: calc(270px * 8 + 10px)}
}
@media (max-width:380px){
#inc03 .pin-spacer{height:1530px}
#inc03 .tit_area{padding-top:60px}
#inc03 .tit_area a{margin-top:30px;width:118px;height:44px;line-height:44px;font-size:13px}
#inc03 .tit_area div h2{width:95%}
#inc03 .right_cont{top:270px}
#inc03 .right_cont ul li{font-size:13px}
#inc03 .right_cont ul li a{padding:20px 2.5%}
#inc03 .right_cont ul li h3{margin-top:3px;font-size:18px}
#inc03 .right_cont ul li .txt{padding-bottom:15px}
#inc03 .right_cont ul li .btn_wrap{width:42px;height:42px}
#inc03 .right_cont ul li .btn_wrap svg{width:17px;height:17px}
}
/* 반응형 [e] */