@charset "utf-8";

#inc03{max-width:var(--mainsize);margin:0 auto;padding:100px 0}
#inc03 .box_wrap{display:flex;;flex-wrap:wrap;gap:30px}
#inc03 .box_wrap>div{width:calc(33.33% - 25px);height:410px}
#inc03 .box01{display:flex}
#inc03 .box01 .hf{width:50%;height:410px}
#inc03 .box01 .l_cir{border-radius:0 200px 200px 0;background:var(--primary2)}
#inc03 .box01 .r_cir{border-radius:200px 0 0 200px;background:#222}
#inc03 .box02{background:#f2f2f2}
#inc03 .box02 .top{display:flex;justify-content:space-between}
#inc03 .box02 .top p{font-weight:700;color:var(--primary)}
#inc03 .box02 .top .arrow{display:flex}
#inc03 .box02 .top span{cursor:pointer;transition:all .3s}
#inc03 .box02 .btm_slider{width:100%}
#inc03 .box02 .btm_slider p{margin-bottom:15px;font-size:20px;font-weight:700;color:#111}
#inc03 .box02 .btm_slider a{color:#666}
#inc03 .box02 .btm_slider div{white-space:pre-line}
#inc03 .box03 a{display:block;width:100%;height:100%;transition:all .3s}
#inc03 .box03 .bg01{background:url(./img/box03_bg1.jpg)}
#inc03 .box03 .img_slider{overflow:hidden;height:100%}
#inc03 .box04{overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;height:100%}
#inc03 .box04 a{flex-direction:column;font-size:17px;font-weight:500;color:#fff}
#inc03 .box04 a span{font-weight:700;color:var(--primary3);text-transform:uppercase;font-family:var(--k-font), var(--e-font)}
#inc03 .box04 a img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-10;object-fit:cover;object-position:top;transition:object-position 1s cubic-bezier(0.5, 1, 0.89, 1)}
#inc03 .box05 a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;height:100%;border-radius:100%;text-align:center;color:#fff;background:var(--primary3);transition:all .3s}
#inc03 .box05 a p{font-size:20px;font-weight:700;text-transform:uppercase;font-family:var(--e-font)}
#inc03 .box05 a span{opacity:.7}
#inc03 .box06{display:flex;height:100%;color:#fff;background:url(./img/box06_bg.jpg)}
#inc03 .box06 span{font-size:20px;font-weight:700}
#inc03 .box06>div p{margin-bottom:10px;font-size:35px;font-weight:700}
#inc03 .box06>div div{white-space:pre-line;opacity:.5}
#inc03 .space{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:60px 50px 70px}

/* 반응형 [s] */
@media (hover:hover){
#inc03 .box01:hover .l_cir{background:#222}
#inc03 .box01:hover .r_cir{background:var(--primary2)}
#inc03 .box02 .top span:hover{color:#111}
#inc03 .box03 a:hover{border-radius:50%}
#inc03 .box04 a:hover img{object-position:bottom}
#inc03 .box05 a:hover{gap:40px;background:var(--primary)}
}
@media (max-width:1230px){
#inc03 .space{padding:50px 30px 60px}
}
@media (max-width:1024px){
#inc03{padding:90px 0;width:95%}
#inc03 .box_wrap{gap:20px}
#inc03 .box_wrap>div{width:calc(100% / 2 - 10px);height:265px}
#inc03 .box01{order:1}
#inc03 .box01 .hf{height:265px}
#inc03 .box02{order:4}
#inc03 .box02 .btm_slider p{font-size:18px}
#inc03 .box03{order:3}
#inc03 .box03 .bg01{background-position:top;background-size:cover}
#inc03 .box04{order:2}
#inc03 .box04 a{font-size:16px}
#inc03 .box05{order:5}
#inc03 .box05 a{border-radius:0%}
#inc03 .box06{order:6;background-position:center;background-size:cover}
#inc03 .box06 span{font-size:16px}
#inc03 .box06>div p{font-size:28px}
#inc03 .box06>div div{white-space:normal}
#inc03 .space{padding:55px 40px}
}
@media (max-width:768px){
#inc03{padding:70px 0}
#inc03 .box_wrap>div{height:215px}
#inc03 .box01 .hf{height:215px}
#inc03 .box02 .top span svg{width:20px;height:20px}
#inc03 .box02 .btm_slider p{margin-bottom:10px;font-size:16px}
#inc03 .box04 a{font-size:14px}
#inc03 .box06 span{font-size:14px}
#inc03 .box06>div p{margin-bottom:8px;font-size:23px}
#inc03 .space{padding:20px}
}
@media (max-width:480px){
#inc03{padding:60px 0 30px}
#inc03 .box_wrap{flex-direction:column}
#inc03 .box_wrap>div{width:100%;height:200px}
#inc03 .box01{display:none}
#inc03 .box02{order:1}
#inc03 .box02 .btm_slider p{font-size:17px}
#inc03 .box03{display:none}
#inc03 .box04{order:2}
#inc03 .box04 a{font-size:15px}
#inc03 .box05{order:3}
#inc03 .box05 a{gap:10px}
#inc03 .box05 a:hover{gap:25px}
#inc03 .box05 a p{font-size:18px}
#inc03 .box06{order:4;text-align:center}
#inc03 .space{padding:30px}
}
@media (max-width:380px){
#inc03{padding:50px 0 25px} 
#inc03 .box_wrap{gap:12px}
#inc03 .box_wrap>div{height:180px}
#inc03 .box02 .btm_slider p{font-size:15px}
#inc03 .box04 a{font-size:14px}
#inc03 .box05 a p{font-size:16px}
#inc03 .box06 span{font-size:13px}
#inc03 .box06>div p{font-size:21px}
}
/* 반응형 [e] */