@charset "utf-8";

#inc01{position:relative;width:1200px;margin:0 auto;padding:60px 0 75px}

#inc01 .main_icon_area{overflow:hidden;position:relative;z-index:100;margin-bottom:150px}
#inc01 .main_icon_area li{position:relative;float:left;width:25%}
#inc01 .main_icon_area li + li:before{position:absolute;left:-15px;top:40px;content:'';width:5px;height:5px;border-radius:50%;background:#e1e1e1}
#inc01 .main_icon_area li:nth-child(1) a{background:url(/sh_img/include/inc01/icon01_off.png) no-repeat 20px center;transition:all .3s}
#inc01 .main_icon_area li:nth-child(2) a{background:url(/sh_img/include/inc01/icon02_off.png) no-repeat 20px center;transition:all .3s}
#inc01 .main_icon_area li:nth-child(3) a{background:url(/sh_img/include/inc01/icon03_off.png) no-repeat 20px center;transition:all .3s}
#inc01 .main_icon_area li:nth-child(4) a{background:url(/sh_img/include/inc01/icon04_off.png) no-repeat 20px center;transition:all .3s}
#inc01 .main_icon_area li a{padding-left:100px;color:#777}
#inc01 .main_icon_area li a .icon_tit{margin-bottom:5px;font-size:18px;line-height:30px;color:#333;font-family:'notokr-bold'}
#inc01 .main_icon_area li a{display:block;height:100%}

#inc01 .inc_banner:after{display:block;content:'';clear:both}
#inc01 .inc_banner  > div{position:relative;width:48.5%;height:190px;border-radius:25px 0;transition:all .5s}
#inc01 .inc_banner  > div a{display:block;position:relative;z-index:1;height:100%;padding:62px 35px 0;color:rgba(255,255,255,.7)}
#inc01 .inc_banner  > div p{margin-bottom:8px;font-size:21px;color:#fff;font-family:'notokr-bold'}
#inc01 .inc_banner  > div p span{margin-left:10px;font-weight:600;font-size:14px;color:rgba(255,255,255,.8);letter-spacing:0;font-family:'Poppins'}
#inc01 .inc_banner .left{float:left;background:var(--primary) url(/sh_img/include/inc01/bg.png) repeat}
#inc01 .inc_banner .left img{position:absolute;top:-70px;right:33px}
#inc01 .inc_banner .right{float:right;background:var(--primary02) url(/sh_img/include/inc01/bg.png) repeat}
#inc01 .inc_banner .right img{position:absolute;top:-51px;right:24px;z-index:-1}

/* fade  */
.animated{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-delay:.3s;animation-delay:.3s}
@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translateY(50px)}to{opacity:1;-webkit-transform:none}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:none}}

@media (hover:hover) {
#inc01 .main_icon_area li:nth-child(1) a:hover{background:url(/sh_img/include/inc01/icon01_on.png) no-repeat 20px center}
#inc01 .main_icon_area li:nth-child(2) a:hover{background:url(/sh_img/include/inc01/icon02_on.png) no-repeat 20px center}
#inc01 .main_icon_area li:nth-child(3) a:hover{background:url(/sh_img/include/inc01/icon03_on.png) no-repeat 20px center}
#inc01 .main_icon_area li:nth-child(4) a:hover{background:url(/sh_img/include/inc01/icon04_on.png) no-repeat 20px center}
#inc01 .inc_banner  > div:hover{transform: translateY(-35px);box-shadow: 8px 8px 5px rgb(0 0 0 / 10%);transition:all .3s}
}
@media (max-width:1240px){
#inc01{width:100%;padding:60px 20px 75px}
#inc01 .main_icon_area li a{padding:100px 0 0;background-position:center 20px !important;text-align:center}
#inc01 .main_icon_area li + li:before{top:50%;transform:translate(-50%)}
}
@media (max-width:1024px){
#inc01{padding:40px 15px 75px}
}
@media (max-width:810px){
#inc01 .main_icon_area{display:flex;flex-wrap:wrap;margin-bottom:80px}
#inc01 .main_icon_area li{width:50%;padding:20px 0 50px;border-top:1px dashed #e1e1e1}
#inc01 .main_icon_area li:first-child,#inc01 .main_icon_area li:nth-child(2){border-top:0}
#inc01 .main_icon_area li + li:before{display:none}
#inc01 .main_icon_area li:nth-child(even){border-left:1px dashed #e1e1e1}
#inc01 .inc_banner > div{width:100%}
#inc01 .inc_banner > div+div{margin-top:70px}
#inc01 .inc_banner .left img{top:-50px}
}
@media (max-width:500px){
#inc01{padding-top:0}
#inc01 .main_icon_area{display:block;margin-bottom:0}
#inc01 .main_icon_area li{width:100%;padding:20px 0}
#inc01 .main_icon_area li:nth-child(2),#inc01 .main_icon_area li+li{border-top:1px dashed #e1e1e1}
#inc01 .main_icon_area li:nth-child(even){border-left:0}
#inc01 .main_icon_area li a{padding-top:70px;background-size:30px!important}
#inc01 .main_icon_area li a .icon_tit{font-size:16px}
#inc01 .inc_banner > div{height:auto}
#inc01 .inc_banner > div+div{margin-top:30px}
#inc01 .inc_banner > div img{display:none}
#inc01 .inc_banner > div a{padding:45px 35px;text-align:center}
#inc01 .inc_banner > div p{margin-bottom:10px;font-size:18px}
#inc01 .inc_banner > div p span{display:block;margin-left:0;font-size:13px}
#inc01 .inc_banner .right{margin-top:10px}
}