@charset "utf-8";

#inc01{display:flex;flex-direction:column;justify-content:space-between;gap:30px;width:375px;height:100%}
#inc01 .slogan{text-align:center}
#inc01 .slogan .txt p{margin: 20px 0 10px; font-size: 34px; color: var(--primary); line-height: 1.1; white-space: pre-line; font-weight: 600;}
#inc01 .slogan .txt span {font-size: 18px; color: #777777; font-weight: 500; display: block; padding: 0 0 15px 0;}
#inc01 .slogan .num{display:inline-block;margin-top:15px;padding:6px 17px 3px;border:1px solid #e1e1e1;border-radius:50px;background:#f2f2f2}
#inc01 .slogan .num b{margin-right:3px;font-weight:normal;color:#111;font-family:'SBAggroM'}
#inc01 .link ul{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center}
#inc01 .link ul a{font-size:15px;letter-spacing: -0.025em;color:#111}
#inc01 .link ul div{display:flex;justify-content:center;align-items:center;width:100%;height:85px;margin-bottom:7px;border-radius:13px;box-shadow:0px 0px 4px 0px rgba(0,0,0,.1);transition:all .3s}
#inc01 .link ul .box01 div{background:url(./img/icon01.png) no-repeat center}
#inc01 .link ul .box02 div{background:url(./img/icon02.png) no-repeat center}
#inc01 .link ul .box03 div{background:url(./img/icon03.png) no-repeat center}
#inc01 .link ul .box04 div{background:url(./img/icon04.png) no-repeat center}

#inc01 .branch ul{display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; text-align: center;}
#inc01 .branch ul .box01 div{}
#inc01 .branch ul .box02 div{}
#inc01 .branch ul .box03 div{}

#inc01 .vol_bnr{margin-top:15px}
#inc01 .vol_bnr a{position: relative; display: flex; align-items: center; gap: 15px; height: 130px; padding: 0 25px; border-radius: 13px; color: #fff; background: var(--primary); transition: all .3s;}
#inc01 .vol_bnr a img{position:relative}
#inc01 .vol_bnr a div{margin-left: auto; box-shadow: none;}
#inc01 .vol_bnr a p{font-size:17px;font-family:'SBAggroM'}
#inc01 .vol_bnr a span{opacity:.5}
#inc01 .pop_up .tit{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
#inc01 .pop_up .tit:after{position:absolute;left:32%;content:'';width:45%;height:1px;background:#e1e1e1}
#inc01 .pop_up .arrow{display:flex;border-radius:30px;padding:3px 10px;background:#f2f2f2}
#inc01 .pop_up .arrow span{display:flex;align-items:center;cursor:pointer;color:#aaa;transition:all .3s}
#inc01 .pop_up .arrow span+span:before{display:inline-block;vertical-align:8px;content:'';width:1px;height:12px;margin:0 8px;background:#ccc}
#inc01 .pop_up .arrow svg{width:18px}
#inc01 .pop_silder{overflow:hidden;display:block;border-radius:13px}
#inc01 .pop_silder .img{display:flex;align-items:center;height:135px}

@media(hover:hover){
#inc01 .link ul .box01 a:hover div{background:url(./img/icon01_on.png) no-repeat center}
#inc01 .link ul .box02 a:hover div{background:url(./img/icon02_on.png) no-repeat center}
#inc01 .link ul .box03 a:hover div{background:url(./img/icon03_on.png) no-repeat center}
#inc01 .link ul .box04 a:hover div{background:url(./img/icon04_on.png) no-repeat center}

#inc01 .pop_up .arrow span:hover{color:#333}
}

/* 반응형 [s] */
@media (max-width:1024px){
#inc01{flex-direction:row;flex-wrap:wrap;width:100%;margin-top:70px;padding:0 15px}
#inc01 .slogan{width:100%}
#inc01 .link, #inc01 .pop_up{width:calc(100% - 18px)}
#inc01 .link{display:flex;gap:20px;width:100%}
#inc01 .link ul{width: 100%; grid-template-columns: repeat(4,1fr);}
#inc01 .link ul .box01 div{background:url(./img/icon01_on.png) no-repeat center}
#inc01 .link ul .box02 div{background:url(./img/icon02_on.png) no-repeat center}
#inc01 .link ul .box03 div{background:url(./img/icon03_on.png) no-repeat center}
#inc01 .link ul .box04 div{background:url(./img/icon04_on.png) no-repeat center}

#inc01 .slogan .txt p {font-size: 22px;}
#inc01 .slogan .txt span { font-size: 14px;}

#inc01 .branch {width:100%}
#inc01 .branch ul{display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; text-align: center;width:100%}
#inc01 .pop_silder .img{overflow:hidden;height:auto;border-radius:13px}
#inc01 .pop_silder .img img{width:100%}
#inc01 .pop_up .tit{margin-bottom:10px}

#inc01 .vol_bnr ul{width:33%;grid-template-columns:repeat(3,1fr)}
#inc01 .vol_bnr{margin-top:15px}
#inc01 .vol_bnr a{height: 100px;padding:0}
#inc01 .vol_bnr a div{margin: auto; box-shadow: none;}
#inc01 .vol_bnr a p{font-size:14px;}

}
@media (max-width:768px){
#inc01 .link ul{width:100%}
#inc01 .link, #inc01 .pop_up{width:100%}
}
@media (max-width:480px){
#inc01{margin-top:45px}
}
/* 반응형 [e] */